misc: bump nightly version.

(cherry picked from commit a56b1e374a)

.github/workflows/deploy.yml

@@ -11,7 +11,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout
-        uses: actions/checkout@v6
+        uses: actions/checkout@v5
 
       - name: Setup dotnet
         uses: actions/setup-dotnet@v5
@@ -32,7 +32,7 @@ jobs:
         run: touch $OUTPUT_PATH/.nojekyll
 
       - name: Commit wwwroot to GitHub Pages
-        uses: JamesIves/github-pages-deploy-action@v4
+        uses: JamesIves/github-pages-deploy-action@v4.5.0
         with:
           github_token: ${{ secrets.GITHUB_TOKEN }}
           branch: gh-pages

.github/workflows/pack-nightly.yml

@@ -6,7 +6,7 @@ on:
       Version_Prefix:
         description: 'Version Prefix'
         required: true
-        default: '12.0.999'
+        default: '11.2.999'
         type: string
       Semi_Avalonia:
         description: 'Pack Semi.Avalonia'
@@ -31,7 +31,7 @@ jobs:
 
     steps:
       - name: Checkout
-        uses: actions/checkout@v6
+        uses: actions/checkout@v5
 
       - name: Get Version
         run: |
@@ -62,7 +62,7 @@ jobs:
         run: dotnet nuget push "nugets/*.nupkg" --api-key ${{ secrets.IRIHI_NUGET_API_KEY }} --source irihi.tech --skip-duplicate
 
       - name: Upload a Build Artifact
-        uses: actions/upload-artifact@v7
+        uses: actions/upload-artifact@v4.6.2
         with:
           name: nugets
           path: nugets

.github/workflows/pack.yml

@@ -40,7 +40,6 @@ on:
       Semi_Avalonia_TreeDataGrid:
         type: boolean
         default: true
-    secrets: {}
 
 jobs:
   Pack_to_NuGet:
@@ -48,7 +47,7 @@ jobs:
 
     steps:
       - name: Checkout
-        uses: actions/checkout@v6
+        uses: actions/checkout@v5
 
       - name: Pack Semi.Avalonia
         if: ${{ inputs.Semi_Avalonia }}
@@ -71,7 +70,7 @@ jobs:
         run: dotnet nuget push "nugets/*.nupkg" --api-key ${{ secrets.NUGET_ORG_API_KEY }} --source https://api.nuget.org/v3/index.json --skip-duplicate
 
       - name: Upload a Build Artifact
-        uses: actions/upload-artifact@v7
+        uses: actions/upload-artifact@v4.6.2
         with:
           name: nugets
           path: nugets

.github/workflows/publish.yml

@@ -75,11 +75,11 @@ jobs:
     runs-on: windows-latest
     steps:
       - name: Checkout
-        uses: actions/checkout@v6
+        uses: actions/checkout@v5
       - name: Publish win-x64
         run: dotnet publish demo/Semi.Avalonia.Demo.Desktop -r win-x64 -c Release -o publish --sc /p:PublishSingleFile=true /p:IncludeNativeLibrariesForSelfExtract=true
       - name: Upload a Build Artifact
-        uses: actions/upload-artifact@v7
+        uses: actions/upload-artifact@v4.6.2
         with:
           name: Semi.Avalonia.Demo.Desktop.win-x64
           path: |
@@ -91,13 +91,13 @@ jobs:
     runs-on: windows-latest
     steps:
       - name: Checkout
-        uses: actions/checkout@v6
+        uses: actions/checkout@v5
       - name: Enable Native AOT in .csproj
         run: sed -i 's#<!--<PublishAot>true</PublishAot>-->#<PublishAot>true</PublishAot>#' demo/Semi.Avalonia.Demo.Desktop/Semi.Avalonia.Demo.Desktop.csproj
       - name: Publish win-x64 AOT
         run: dotnet publish demo/Semi.Avalonia.Demo.Desktop -r win-x64 -c Release -o publish
       - name: Upload a Build Artifact
-        uses: actions/upload-artifact@v7
+        uses: actions/upload-artifact@v4.6.2
         with:
           name: Semi.Avalonia.Demo.Desktop.win-x64.NativeAOT
           path: |
@@ -109,11 +109,11 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout
-        uses: actions/checkout@v6
+        uses: actions/checkout@v5
       - name: Publish linux-x64
         run: dotnet publish demo/Semi.Avalonia.Demo.Desktop -r linux-x64 -c Release -o publish --sc /p:PublishSingleFile=true /p:IncludeNativeLibrariesForSelfExtract=true
       - name: Upload a Build Artifact
-        uses: actions/upload-artifact@v7
+        uses: actions/upload-artifact@v4.6.2
         with:
           name: Semi.Avalonia.Demo.Desktop.linux-x64
           path: |
@@ -125,13 +125,13 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout
-        uses: actions/checkout@v6
+        uses: actions/checkout@v5
       - name: Enable Native AOT in .csproj
         run: sed -i 's#<!--<PublishAot>true</PublishAot>-->#<PublishAot>true</PublishAot>#' demo/Semi.Avalonia.Demo.Desktop/Semi.Avalonia.Demo.Desktop.csproj
       - name: Publish linux-x64 AOT
         run: dotnet publish demo/Semi.Avalonia.Demo.Desktop -r linux-x64 -c Release -o publish
       - name: Upload a Build Artifact
-        uses: actions/upload-artifact@v7
+        uses: actions/upload-artifact@v4.6.2
         with:
           name: Semi.Avalonia.Demo.Desktop.linux-x64.NativeAOT
           path: |
@@ -143,11 +143,11 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout
-        uses: actions/checkout@v6
+        uses: actions/checkout@v5
       - name: Publish linux-x64 DRM
         run: dotnet publish demo/Semi.Avalonia.Demo.Drm -r linux-x64 -c Release -o publish --sc /p:PublishSingleFile=true /p:IncludeNativeLibrariesForSelfExtract=true
       - name: Upload a Build Artifact
-        uses: actions/upload-artifact@v7
+        uses: actions/upload-artifact@v4.6.2
         with:
           name: Semi.Avalonia.Demo.Drm.linux-x64
           path: |
@@ -159,13 +159,13 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout
-        uses: actions/checkout@v6
+        uses: actions/checkout@v5
       - name: Enable Native AOT in .csproj
         run: sed -i 's#<!--<PublishAot>true</PublishAot>-->#<PublishAot>true</PublishAot>#' demo/Semi.Avalonia.Demo.Drm/Semi.Avalonia.Demo.Drm.csproj
       - name: Publish linux-x64 AOT
         run: dotnet publish demo/Semi.Avalonia.Demo.Drm -r linux-x64 -c Release -o publish
       - name: Upload a Build Artifact
-        uses: actions/upload-artifact@v7
+        uses: actions/upload-artifact@v4.6.2
         with:
           name: Semi.Avalonia.Demo.Drm.linux-x64.NativeAOT
           path: |
@@ -177,11 +177,11 @@ jobs:
     runs-on: macos-latest
     steps:
       - name: Checkout
-        uses: actions/checkout@v6
+        uses: actions/checkout@v5
       - name: Publish osx-arm64
         run: dotnet publish demo/Semi.Avalonia.Demo.Desktop -r osx-arm64 -c Release -o publish --sc /p:PublishSingleFile=true /p:IncludeNativeLibrariesForSelfExtract=true
       - name: Upload a Build Artifact
-        uses: actions/upload-artifact@v7
+        uses: actions/upload-artifact@v4.6.2
         with:
           name: Semi.Avalonia.Demo.Desktop.osx-arm64
           path: |
@@ -193,13 +193,13 @@ jobs:
     runs-on: macos-latest
     steps:
       - name: Checkout
-        uses: actions/checkout@v6
+        uses: actions/checkout@v5
       - name: Enable Native AOT in .csproj
         run: sed -i '' 's#<!--<PublishAot>true</PublishAot>-->#<PublishAot>true</PublishAot>#' demo/Semi.Avalonia.Demo.Desktop/Semi.Avalonia.Demo.Desktop.csproj
       - name: Publish osx-arm64 AOT
         run: dotnet publish demo/Semi.Avalonia.Demo.Desktop -r osx-arm64 -c Release -o publish
       - name: Upload a Build Artifact
-        uses: actions/upload-artifact@v7
+        uses: actions/upload-artifact@v4.6.2
         with:
           name: Semi.Avalonia.Demo.Desktop.osx-arm64.NativeAOT
           path: |
@@ -211,7 +211,7 @@ jobs:
     runs-on: windows-latest
     steps:
       - name: Checkout
-        uses: actions/checkout@v6
+        uses: actions/checkout@v5
       - name: Install Android workload
         run: dotnet workload install android
       - name: Restore Dependencies
@@ -219,7 +219,7 @@ jobs:
       - name: Publish Android
         run: dotnet publish demo/Semi.Avalonia.Demo.Android -c Release -f net10.0-android --no-restore -o publish /p:RuntimeIdentifier=android-arm64
       - name: Upload a Build Artifact
-        uses: actions/upload-artifact@v7
+        uses: actions/upload-artifact@v4.6.2
         with:
           name: android-arm64
           path: publish/*Signed.apk

.github/workflows/release-tag.yml

@@ -33,7 +33,6 @@ jobs:
       Semi_Avalonia_ColorPicker: ${{ inputs.Semi_Avalonia_ColorPicker }}
       Semi_Avalonia_DataGrid: ${{ inputs.Semi_Avalonia_DataGrid }}
       Semi_Avalonia_TreeDataGrid: ${{ inputs.Semi_Avalonia_TreeDataGrid }}
-    secrets: inherit
 
   publish:
     uses: ./.github/workflows/publish.yml
@@ -42,7 +41,7 @@ jobs:
     needs: [ nuget,publish ]
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/download-artifact@v8
+      - uses: actions/download-artifact@v4.3.0
 
       - name: Display structure of downloaded files
         run: ls -R
@@ -63,7 +62,7 @@ jobs:
         run: ls -R
 
       - name: Release
-        uses: softprops/action-gh-release@v2
+        uses: softprops/action-gh-release@v2.3.2
         if: startsWith(github.ref, 'refs/tags/') || github.event_name == 'workflow_dispatch'
         with:
           generate_release_notes: true

Nuget.Config

@@ -1,6 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<configuration>
-    <packageSources>
-        <add key="avalonia-nightly" value="https://nuget-feed-nightly.avaloniaui.net/v3/index.json" />
-    </packageSources>
-</configuration>

demo/Directory.Packages.props

@@ -1,12 +1,13 @@
 <Project>
     <PropertyGroup>
         <ManagePackageVersionsCentrally>true</ManagePackageVersionsCentrally>
-        <AvaloniaVersion>12.0.0</AvaloniaVersion>
-        <DataGridVersion>12.0.0</DataGridVersion>
-        <SkiaSharpVersion>3.119.3-preview.1.1</SkiaSharpVersion>
+        <AvaloniaVersion>12.0.999-cibuild0061987-alpha</AvaloniaVersion>
+        <DataGridVersion>11.3.10</DataGridVersion>
+        <SkiaSharpVersion>3.119.1</SkiaSharpVersion>
     </PropertyGroup>
     <ItemGroup>
         <PackageVersion Include="Avalonia" Version="$(AvaloniaVersion)"/>
+<!--        <PackageVersion Include="Avalonia.Diagnostics" Version="$(AvaloniaVersion)" />-->
         <PackageVersion Include="Avalonia.Desktop" Version="$(AvaloniaVersion)" />
         <PackageVersion Include="Avalonia.LinuxFramebuffer" Version="$(AvaloniaVersion)"/>
         <PackageVersion Include="Avalonia.iOS" Version="$(AvaloniaVersion)" />
@@ -14,13 +15,13 @@
         <PackageVersion Include="Avalonia.Android" Version="$(AvaloniaVersion)" />
         <PackageVersion Include="Avalonia.Controls.ColorPicker" Version="$(AvaloniaVersion)"/>
         <PackageVersion Include="Avalonia.Controls.DataGrid" Version="$(DataGridVersion)"/>
-        <PackageVersion Include="AvaloniaUI.DiagnosticsSupport" Version="2.2.0-beta3"/>
 
         <PackageVersion Include="SkiaSharp" Version="$(SkiaSharpVersion)"/>
         <PackageVersion Include="SkiaSharp.NativeAssets.WebAssembly" Version="$(SkiaSharpVersion)"/>
 
-        <PackageVersion Include="Xamarin.AndroidX.Core.SplashScreen" Version="1.2.0.2"/>
+        <PackageVersion Include="Xamarin.AndroidX.Core.SplashScreen" Version="1.2.0"/>
 
-        <PackageVersion Include="CommunityToolkit.Mvvm" Version="8.4.2"/>
+        <PackageVersion Include="CommunityToolkit.Mvvm" Version="8.4.0"/>
+        <PackageVersion Include="Irihi.Avalonia.Shared" Version="0.3.1"/>
     </ItemGroup>
 </Project>

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

@@ -1,20 +0,0 @@
-using Android.App;
-using Android.Runtime;
-using Avalonia;
-using Avalonia.Android;
-
-namespace Semi.Avalonia.Demo.Android;
-
-[Application]
-public class Application : AvaloniaAndroidApplication<App>
-{
-    protected Application(nint javaReference, JniHandleOwnership transfer) : base(javaReference, transfer)
-    {
-    }
-
-    protected override AppBuilder CustomizeAppBuilder(AppBuilder builder)
-    {
-        return base.CustomizeAppBuilder(builder)
-            .WithSourceHanSansCNFont();
-    }
-}

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

@@ -1,5 +1,6 @@
 using Android.App;
 using Android.Content.PM;
+using Avalonia;
 using Avalonia.Android;
 
 namespace Semi.Avalonia.Demo.Android;
@@ -11,4 +12,11 @@ namespace Semi.Avalonia.Demo.Android;
     MainLauncher = true,
     LaunchMode = LaunchMode.SingleTop,
     ConfigurationChanges = ConfigChanges.Orientation | ConfigChanges.ScreenSize | ConfigChanges.UiMode)]
-public class MainActivity : AvaloniaMainActivity;
+public class MainActivity : AvaloniaMainActivity
+{
+    protected override AppBuilder CustomizeAppBuilder(AppBuilder builder)
+    {
+        return base.CustomizeAppBuilder(builder)
+            .WithSourceHanSansCNFont();
+    }
+}

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

@@ -2,7 +2,7 @@
     <PropertyGroup>
         <OutputType>Exe</OutputType>
         <TargetFramework>net10.0-android</TargetFramework>
-        <SupportedOSPlatformVersion>23</SupportedOSPlatformVersion>
+        <SupportedOSPlatformVersion>21</SupportedOSPlatformVersion>
         <Nullable>enable</Nullable>
         <ApplicationId>com.irihitech.Semi.Avalonia</ApplicationId>
         <ApplicationVersion>1</ApplicationVersion>
@@ -13,12 +13,6 @@
         <RootNamespace>Semi.Avalonia.Demo.Android</RootNamespace>
     </PropertyGroup>
 
-    <!-- Use CoreCLR on Android -->
-    <PropertyGroup Condition="$([MSBuild]::GetTargetPlatformIdentifier('$(TargetFramework)')) == 'android'">
-        <UseMonoRuntime>false</UseMonoRuntime>
-        <PublishReadyToRun>true</PublishReadyToRun>
-    </PropertyGroup>
-
     <ItemGroup>
         <AndroidResource Include="Icon.png" Link="Resources\drawable\Icon.png"/>
         <AvaloniaResource Include="..\Fonts\*" Link="Assets\Fonts\%(Filename)%(Extension)" />

demo/Semi.Avalonia.Demo/App.axaml

@@ -10,7 +10,7 @@
         <semi:SemiTheme Locale="zh-CN" />
         <semi:SemiPopupAnimations />
         <semi:ColorPickerSemiTheme />
-        <semi:DataGridSemiTheme />
+        <!-- <semi:DataGridSemiTheme /> -->
         <!-- <semi:TreeDataGridSemiTheme /> -->
     </Application.Styles>
     <Application.Resources>

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

@@ -12,9 +12,6 @@ public partial class App : Application
     public override void Initialize()
     {
         AvaloniaXamlLoader.Load(this);
-#if DEBUG
-        this.AttachDeveloperTools();
-#endif
         this.DataContext = new ApplicationViewModel();
     }
 
@@ -25,7 +22,7 @@ public partial class App : Application
             case IClassicDesktopStyleApplicationLifetime desktop:
                 // Line below is needed to remove Avalonia data validation.
                 // Without this line you will get duplicate validations from both Avalonia and CT
-                // BindingPlugins.DataValidators.RemoveAt(0);
+                BindingPlugins.DataValidators.RemoveAt(0);
                 desktop.MainWindow = new MainWindow();
                 break;
             case ISingleViewApplicationLifetime singleView:

demo/Semi.Avalonia.Demo/Converters/FileIconConverter.cs

@@ -0,0 +1,28 @@
+using System;
+using System.Collections.Generic;
+using System.Globalization;
+using Avalonia;
+using Avalonia.Data.Converters;
+using Avalonia.Metadata;
+
+namespace Semi.Avalonia.Demo.Converters;
+
+public class FileIconConverter : IMultiValueConverter
+{
+    [Content] public IDictionary<string, object?> Items { get; } = new Dictionary<string, object?>();
+
+    public object? Convert(IList<object?> values, Type targetType, object? parameter, CultureInfo culture)
+    {
+        if (values[0] is bool isDirectory && values[1] is bool isOpen)
+        {
+            if (!isDirectory)
+            {
+                return Items["file"];
+            }
+
+            return isOpen ? Items["folderOpen"] : Items["folderClosed"];
+        }
+
+        return AvaloniaProperty.UnsetValue;
+    }
+}

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

@@ -29,40 +29,40 @@
 
         <AutoCompleteBox
             PlaceholderText="Please select a State"
-            ValueMemberBinding="{Binding Name,x:DataType=vm:StateData}" />
+            ValueMemberBinding="{Binding Name,DataType=vm:StateData}" />
         <AutoCompleteBox
             Classes="Large"
-            ValueMemberBinding="{Binding Name,x:DataType=vm:StateData}" />
+            ValueMemberBinding="{Binding Name,DataType=vm:StateData}" />
         <AutoCompleteBox
             Classes="Small"
-            ValueMemberBinding="{Binding Name,x:DataType=vm:StateData}" />
+            ValueMemberBinding="{Binding Name,DataType=vm:StateData}" />
         <AutoCompleteBox
             Classes="Bordered"
-            ValueMemberBinding="{Binding Name,x:DataType=vm:StateData}" />
+            ValueMemberBinding="{Binding Name,DataType=vm:StateData}" />
         <AutoCompleteBox
             IsEnabled="False"
             PlaceholderText="Disabled"
-            ValueMemberBinding="{Binding Name,x:DataType=vm:StateData}" />
+            ValueMemberBinding="{Binding Name,DataType=vm:StateData}" />
         <AutoCompleteBox
             InnerLeftContent="https://"
             InnerRightContent=".com"
-            ValueMemberBinding="{Binding Name,x:DataType=vm:StateData}" />
+            ValueMemberBinding="{Binding Name,DataType=vm:StateData}" />
 
         <StackPanel Orientation="Horizontal">
             <AutoCompleteBox
                 Width="100"
                 Classes="Large"
                 PlaceholderText="Large"
-                ValueMemberBinding="{Binding Name,x:DataType=vm:StateData}" />
+                ValueMemberBinding="{Binding Name,DataType=vm:StateData}" />
             <AutoCompleteBox
                 Width="100"
                 PlaceholderText="Default"
-                ValueMemberBinding="{Binding Name,x:DataType=vm:StateData}" />
+                ValueMemberBinding="{Binding Name,DataType=vm:StateData}" />
             <AutoCompleteBox
                 Width="100"
                 Classes="Small"
                 PlaceholderText="Small"
-                ValueMemberBinding="{Binding Name,x:DataType=vm:StateData}" />
+                ValueMemberBinding="{Binding Name,DataType=vm:StateData}" />
         </StackPanel>
 
         <StackPanel Orientation="Horizontal">
@@ -70,17 +70,17 @@
                 Width="100"
                 IsEnabled="False"
                 PlaceholderText="Disabled"
-                ValueMemberBinding="{Binding Name,x:DataType=vm:StateData}" />
+                ValueMemberBinding="{Binding Name,DataType=vm:StateData}" />
             <AutoCompleteBox
                 Width="100"
                 Classes="Bordered"
                 PlaceholderText="Bordered"
-                ValueMemberBinding="{Binding Name,x:DataType=vm:StateData}" />
+                ValueMemberBinding="{Binding Name,DataType=vm:StateData}" />
             <AutoCompleteBox
                 Width="100"
                 Classes="Bordered"
                 IsEnabled="False"
-                ValueMemberBinding="{Binding Name,x:DataType=vm:StateData}" />
+                ValueMemberBinding="{Binding Name,DataType=vm:StateData}" />
         </StackPanel>
 
     </StackPanel>

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

@@ -35,30 +35,5 @@
                 VerticalAlignment="Center"
                 Text="A.S.I.A" />
         </ButtonSpinner>
-        <ButtonSpinner
-            Height="30"
-            AllowSpin="{Binding #allowSpinCheck.IsChecked}"
-            BorderThickness="1"
-            ShowButtonSpinner="{Binding #showSpinCheck.IsChecked}"
-            Spin="OnSpin"
-            Theme="{StaticResource SplitButtonSpinner}">
-            <TextBlock
-                HorizontalAlignment="Center"
-                VerticalAlignment="Center"
-                Text="A.S.I.A" />
-        </ButtonSpinner>
-        <ButtonSpinner
-            Height="30"
-            AllowSpin="{Binding #allowSpinCheck.IsChecked}"
-            ButtonSpinnerLocation="Left"
-            BorderThickness="1"
-            ShowButtonSpinner="{Binding #showSpinCheck.IsChecked}"
-            Spin="OnSpin"
-            Theme="{StaticResource SplitButtonSpinner}">
-            <TextBlock
-                HorizontalAlignment="Center"
-                VerticalAlignment="Center"
-                Text="A.S.I.A" />
-        </ButtonSpinner>
     </StackPanel>
 </UserControl>

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

@@ -33,6 +33,6 @@
             Margin="0,0,0,8"
             CustomDateFormatString="ddd, MMM d"
             SelectedDateFormat="Custom" />
-        <CalendarDatePicker Margin="0,0,0,8" PlaceholderText="Placeholder" />
+        <CalendarDatePicker Margin="0,0,0,8" Watermark="Watermark" />
     </StackPanel>
 </UserControl>

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

@@ -1,69 +0,0 @@
-<UserControl xmlns="https://github.com/avaloniaui"
-             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-             x:Class="Semi.Avalonia.Demo.Pages.CarouselPageDemo">
-    <DockPanel>
-        <ScrollViewer DockPanel.Dock="Right" Width="220">
-            <StackPanel Margin="12" Spacing="8">
-                <TextBlock Text="Configuration" FontWeight="SemiBold" FontSize="16"
-                           Foreground="{DynamicResource SystemControlHighlightAccentBrush}" />
-
-                <TextBlock Text="Navigation" FontWeight="SemiBold" FontSize="13" />
-                <StackPanel Spacing="6">
-                    <Button Content="Previous" Click="OnPrevious" HorizontalAlignment="Stretch" />
-                    <Button Content="Next" Click="OnNext" HorizontalAlignment="Stretch" />
-                </StackPanel>
-
-                <Separator />
-
-                <TextBlock Text="Status" FontWeight="SemiBold" FontSize="13" />
-                <TextBlock Name="StatusText" Text="Page 1 of 3" Opacity="0.7" TextWrapping="Wrap" />
-            </StackPanel>
-        </ScrollViewer>
-
-        <Border DockPanel.Dock="Right" Width="1"
-                Background="{DynamicResource SystemControlForegroundBaseMediumLowBrush}" />
-
-        <Border Margin="12"
-                BorderBrush="{DynamicResource SystemControlForegroundBaseMediumLowBrush}"
-                BorderThickness="1" CornerRadius="6" ClipToBounds="True">
-            <Panel>
-                <CarouselPage Name="DemoCarousel"
-                              SelectionChanged="OnSelectionChanged">
-                    <ContentPage Header="Welcome">
-                        <StackPanel Margin="24" Spacing="12"
-                                    HorizontalAlignment="Center" VerticalAlignment="Center">
-                            <TextBlock Text="Welcome" FontSize="28" FontWeight="Bold"
-                                       HorizontalAlignment="Center" />
-                            <TextBlock Text="Swipe left or use the buttons to navigate."
-                                       TextWrapping="Wrap" Opacity="0.7" TextAlignment="Center" MaxWidth="280" />
-                        </StackPanel>
-                    </ContentPage>
-                    <ContentPage Header="Explore">
-                        <StackPanel Margin="24" Spacing="12"
-                                    HorizontalAlignment="Center" VerticalAlignment="Center">
-                            <TextBlock Text="Explore" FontSize="28" FontWeight="Bold"
-                                       HorizontalAlignment="Center" />
-                            <TextBlock Text="CarouselPage supports scroll-based and transition-based navigation modes."
-                                       TextWrapping="Wrap" Opacity="0.7" TextAlignment="Center" MaxWidth="280" />
-                        </StackPanel>
-                    </ContentPage>
-                    <ContentPage Header="Get Started">
-                        <StackPanel Margin="24" Spacing="12"
-                                    HorizontalAlignment="Center" VerticalAlignment="Center">
-                            <TextBlock Text="Get Started" FontSize="28" FontWeight="Bold"
-                                       HorizontalAlignment="Center" />
-                            <TextBlock Text="Use SelectedIndex to jump to any page, or assign a PageTransition for animated switching."
-                                       TextWrapping="Wrap" Opacity="0.7" TextAlignment="Center" MaxWidth="280" />
-                        </StackPanel>
-                    </ContentPage>
-                </CarouselPage>
-                <PipsPager HorizontalAlignment="Center"
-                           VerticalAlignment="Bottom" Margin="0,0,0,20"
-                           NumberOfPages="3"
-                           SelectedPageIndex="{Binding #DemoCarousel.SelectedIndex}" />
-            </Panel>
-        </Border>
-
-
-    </DockPanel>
-</UserControl>

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

@@ -1,34 +0,0 @@
-using System.Collections;
-using Avalonia.Controls;
-using Avalonia.Interactivity;
-
-namespace Semi.Avalonia.Demo.Pages;
-
-public partial class CarouselPageDemo : UserControl
-{
-    public CarouselPageDemo()
-    {
-        InitializeComponent();
-    }
-
-    private void OnPrevious(object? sender, RoutedEventArgs e)
-    {
-        if (DemoCarousel.SelectedIndex > 0)
-            DemoCarousel.SelectedIndex--;
-    }
-
-    private void OnNext(object? sender, RoutedEventArgs e)
-    {
-        var pageCount = (DemoCarousel.Pages as IList)?.Count ?? 0;
-        if (DemoCarousel.SelectedIndex < pageCount - 1)
-            DemoCarousel.SelectedIndex++;
-    }
-
-    private void OnSelectionChanged(object? sender, PageSelectionChangedEventArgs e)
-    {
-        if (StatusText == null)
-            return;
-        var pageCount = (DemoCarousel.Pages as IList)?.Count ?? 0;
-        StatusText.Text = $"Page {DemoCarousel.SelectedIndex + 1} of {pageCount}";
-    }
-}

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

@@ -2,90 +2,80 @@
     x:Class="Semi.Avalonia.Demo.Pages.ColorPickerDemo"
     xmlns="https://github.com/avaloniaui"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:semi="https://irihi.tech/semi"
     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
     d:DesignHeight="1450"
     d:DesignWidth="800"
     mc:Ignorable="d">
-    <DockPanel>
-        <ScrollViewer DockPanel.Dock="Right" Width="260">
-            <StackPanel Margin="12" Spacing="8">
-                <StackPanel.Styles>
-                    <Style Selector="ToggleSwitch">
-                        <Setter Property="OffContent" Value="{Binding $self.OnContent}" />
-                    </Style>
-                </StackPanel.Styles>
-                <StackPanel Spacing="8">
-                    <ToggleSwitch Name="AccentColors" OnContent="IsAccentColorsVisible" IsChecked="True" />
-                    <ToggleSwitch Name="AlphaEnabled" OnContent="IsAlphaEnabled" IsChecked="True" />
-                    <ToggleSwitch Name="Alpha" OnContent="IsAlphaVisible" IsChecked="True" />
-                    <ToggleSwitch Name="ColorComponents" OnContent="IsColorComponentsVisible" IsChecked="True" />
-                    <ToggleSwitch Name="ColorModel" OnContent="IsColorModelVisible" IsChecked="True" />
-                    <ToggleSwitch Name="ColorPalette" OnContent="IsColorPaletteVisible" IsChecked="True" />
-                    <ToggleSwitch Name="ColorPreview" OnContent="IsColorPreviewVisible" IsChecked="True" />
-                    <ToggleSwitch Name="ColorSpectrum" OnContent="IsColorSpectrumVisible" IsChecked="True" />
-                    <ToggleSwitch Name="ColorSpectrumSlider" OnContent="IsColorSpectrumSliderVisible" IsChecked="True" />
-                    <ToggleSwitch Name="ComponentSlider" OnContent="IsComponentSliderVisible" IsChecked="True" />
-                    <ToggleSwitch Name="ComponentTextInput" OnContent="IsComponentTextInputVisible" IsChecked="True" />
-                    <ToggleSwitch Name="HexInput" OnContent="IsHexInputVisible" IsChecked="True" />
-                </StackPanel>
-
-                <Separator />
-
-                <StackPanel Spacing="8">
-                    <TextBlock>
-                        <Run Text="Color: " />
-                        <Run Text="{Binding #cv.Color,Mode=OneWay}" />
-                    </TextBlock>
-                    <TextBlock>
-                        <Run Text="HsvColor:" />
-                        <Run Text="{Binding #cv.HsvColor,Mode=OneWay}" />
-                    </TextBlock>
+    <ScrollViewer>
+        <StackPanel Spacing="20">
+            <StackPanel Orientation="Horizontal" Spacing="20">
+                <ColorView Name="Test" ColorSpectrumShape="Ring" />
+                <ColorView ColorSpectrumShape="Box" />
+                <ColorView Palette="{DynamicResource SemiColorPalette}" />
+            </StackPanel>
+            <StackPanel Orientation="Horizontal">
+                <ColorView
+                    Name="SimpleColorViewTest"
+                    HsvColor="hsv(180,80%,70%)"
+                    IsAlphaVisible="True"
+                    Theme="{StaticResource SimpleColorView}" />
+                <StackPanel>
+                    <TextBlock Text="{Binding #SimpleColorViewTest.HsvColor}" />
+                    <TextBlock Text="{Binding #SimpleColorViewTest.Color}" />
                 </StackPanel>
             </StackPanel>
-        </ScrollViewer>
-
-        <Border Margin="12"
-                BorderBrush="{DynamicResource SemiColorBorder}"
-                BorderThickness="1"
-                CornerRadius="6"
-                ClipToBounds="True">
-            <Border.Styles>
-                <Style Selector=":is(ColorView)">
-                    <Setter Property="IsAccentColorsVisible" Value="{Binding #AccentColors.IsChecked}" />
-                    <Setter Property="IsAlphaEnabled" Value="{Binding #AlphaEnabled.IsChecked}" />
-                    <Setter Property="IsAlphaVisible" Value="{Binding #Alpha.IsChecked}" />
-                    <Setter Property="IsColorComponentsVisible" Value="{Binding #ColorComponents.IsChecked}" />
-                    <Setter Property="IsColorModelVisible" Value="{Binding #ColorModel.IsChecked}" />
-                    <Setter Property="IsColorPaletteVisible" Value="{Binding #ColorPalette.IsChecked}" />
-                    <Setter Property="IsColorPreviewVisible" Value="{Binding #ColorPreview.IsChecked}" />
-                    <Setter Property="IsColorSpectrumVisible" Value="{Binding #ColorSpectrum.IsChecked}" />
-                    <Setter Property="IsColorSpectrumSliderVisible" Value="{Binding #ColorSpectrumSlider.IsChecked}" />
-                    <Setter Property="IsComponentSliderVisible" Value="{Binding #ComponentSlider.IsChecked}" />
-                    <Setter Property="IsComponentTextInputVisible" Value="{Binding #ComponentTextInput.IsChecked}" />
-                    <Setter Property="IsHexInputVisible" Value="{Binding #HexInput.IsChecked}" />
-
-                    <Setter Property="Color" Value="#39C5BB" />
-                </Style>
-            </Border.Styles>
-            <StackPanel Margin="12" Spacing="12" Orientation="Horizontal">
-                <StackPanel Spacing="12">
-                    <TextBlock Text="Default Theme" FontWeight="Bold" FontSize="16" />
-                    <ColorView Name="cv" />
-                    <StackPanel Spacing="12" Orientation="Horizontal">
-                        <ColorPicker />
-                        <ColorPicker Theme="{DynamicResource HexColorPicker}" />
-                    </StackPanel>
-                </StackPanel>
-                <StackPanel Spacing="12">
-                    <TextBlock Text="SimpleColorPicker" FontWeight="Bold" FontSize="16" />
-                    <ColorView Theme="{DynamicResource SimpleColorView}" />
-                    <StackPanel Spacing="12" Orientation="Horizontal">
-                        <ColorPicker Theme="{DynamicResource SimpleColorPicker}" />
-                        <ColorPicker Theme="{DynamicResource HexSimpleColorPicker}" />
-                    </StackPanel>
-                </StackPanel>
+            <StackPanel Orientation="Horizontal" Spacing="8">
+                <ColorPicker ColorSpectrumShape="Ring">
+                    <ColorPicker.Palette>
+                        <FlatHalfColorPalette />
+                    </ColorPicker.Palette>
+                </ColorPicker>
+                <ColorPicker ColorSpectrumShape="Box">
+                    <ColorPicker.Palette>
+                        <semi:SemiColorLightPalette />
+                    </ColorPicker.Palette>
+                </ColorPicker>
+                <ColorPicker
+                    Theme="{DynamicResource HexColorPicker}"
+                    ColorSpectrumShape="Box">
+                    <ColorPicker.Palette>
+                        <semi:SemiColorLightPalette />
+                    </ColorPicker.Palette>
+                </ColorPicker>
             </StackPanel>
-        </Border>
-    </DockPanel>
+            <StackPanel HorizontalAlignment="Left">
+                <TextBlock Text="Use Style to customize button" />
+                <ColorPicker
+                    Margin="8"
+                    MinWidth="32"
+                    HsvColor="hsv(180,80%,70%)">
+                    <ColorPicker.Content>
+                        <Border
+                            Margin="1"
+                            Background="{Binding $parent[ColorPicker].HsvColor, Converter={StaticResource ToBrushConverter}}"
+                            CornerRadius="1" />
+                    </ColorPicker.Content>
+                    <ColorPicker.Styles>
+                        <Style Selector="DropDownButton">
+                            <Setter Property="Padding" Value="0" />
+                            <Style Selector="^ /template/ PathIcon">
+                                <Setter Property="IsVisible" Value="False" />
+                            </Style>
+                        </Style>
+                    </ColorPicker.Styles>
+                </ColorPicker>
+            </StackPanel>
+
+            <StackPanel Orientation="Horizontal" Spacing="8">
+                <ColorPicker
+                    Theme="{StaticResource SimpleColorPicker}"
+                    HsvColor="hsv(180,80%,70%)" />
+                <ColorPicker
+                    Theme="{StaticResource HexSimpleColorPicker}"
+                    HsvColor="hsv(180,80%,70%)" />
+            </StackPanel>
+        </StackPanel>
+    </ScrollViewer>
 </UserControl>

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

@@ -1,94 +0,0 @@
-<UserControl
-    x:Class="Semi.Avalonia.Demo.Pages.CommandBarDemo"
-    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:collections="clr-namespace:Avalonia.Collections;assembly=Avalonia.Base"
-    d:DesignHeight="600"
-    d:DesignWidth="800"
-    mc:Ignorable="d">
-    <UserControl.Resources>
-        <collections:AvaloniaList x:TypeArguments="CommandBarDefaultLabelPosition" x:Key="LabelPositionList">
-            <CommandBarDefaultLabelPosition>Bottom</CommandBarDefaultLabelPosition>
-            <CommandBarDefaultLabelPosition>Collapsed</CommandBarDefaultLabelPosition>
-            <CommandBarDefaultLabelPosition>Right</CommandBarDefaultLabelPosition>
-        </collections:AvaloniaList>
-        <collections:AvaloniaList x:TypeArguments="CommandBarOverflowButtonVisibility" x:Key="VisibilityList">
-            <CommandBarOverflowButtonVisibility>Auto</CommandBarOverflowButtonVisibility>
-            <CommandBarOverflowButtonVisibility>Collapsed</CommandBarOverflowButtonVisibility>
-            <CommandBarOverflowButtonVisibility>Visible</CommandBarOverflowButtonVisibility>
-        </collections:AvaloniaList>
-    </UserControl.Resources>
-    <ScrollViewer>
-        <StackPanel Spacing="16">
-            <GroupBox>
-                <GroupBox.Header>
-                    <Grid ColumnDefinitions="Auto,*" RowDefinitions="Auto,Auto,Auto,Auto,Auto,Auto">
-
-                        <TextBlock Grid.Row="0" Grid.Column="0" Text="DefaultLabelPosition" VerticalAlignment="Center" />
-                        <ComboBox Grid.Row="0" Grid.Column="1"
-                                  Name="lc"
-                                  ItemsSource="{DynamicResource LabelPositionList}"
-                                  SelectedValue="{x:Static CommandBarDefaultLabelPosition.Bottom}" />
-
-                        <TextBlock Grid.Row="1" Grid.Column="0" Text="OverflowButtonVisibility" VerticalAlignment="Center" />
-                        <ComboBox Grid.Row="1" Grid.Column="1"
-                                  Name="btvb"
-                                  ItemsSource="{DynamicResource VisibilityList}"
-                                  SelectedValue="{x:Static CommandBarOverflowButtonVisibility.Auto}" />
-
-                        <TextBlock Grid.Row="2" Grid.Column="0" Text="IsDynamicOverflowEnabled" VerticalAlignment="Center" />
-                        <ToggleSwitch Grid.Row="2" Grid.Column="1" Name="idfe" IsChecked="True" />
-
-                        <TextBlock Grid.Row="3" Grid.Column="0" Text="IsOpen" VerticalAlignment="Center" />
-                        <ToggleSwitch Grid.Row="3" Grid.Column="1" Name="isop" />
-
-                        <TextBlock Grid.Row="4" Grid.Column="0" Text="IsSticky" VerticalAlignment="Center" />
-                        <ToggleSwitch Grid.Row="4" Grid.Column="1" Name="isst" />
-
-                        <TextBlock Grid.Row="5" Grid.Column="0" Text="Width" VerticalAlignment="Center" />
-                        <Slider Grid.Row="5" Grid.Column="1" Name="ws" HorizontalAlignment="Left" Width="500" Minimum="0" Maximum="1000" Value="200" />
-                    </Grid>
-                </GroupBox.Header>
-                <CommandBar
-                    DefaultLabelPosition="{Binding #lc.SelectedValue}"
-                    OverflowButtonVisibility="{Binding #btvb.SelectedValue}"
-                    IsDynamicOverflowEnabled="{Binding #idfe.IsChecked}"
-                    IsOpen="{Binding #isop.IsChecked}"
-                    IsSticky="{Binding #isst.IsChecked}"
-                    Width="{Binding #ws.Value}">
-                    <CommandBarButton Label="New" Icon="{DynamicResource SemiIconPlus}" />
-                    <CommandBarButton Label="Save" Icon="{DynamicResource SemiIconSave}" />
-                    <CommandBarSeparator />
-                    <CommandBarToggleButton Label="Bold" Icon="{DynamicResource SemiIconBold}" />
-                    <CommandBarToggleButton Label="Italic" Icon="{DynamicResource SemiIconItalic}" />
-                    <CommandBarToggleButton IsChecked="True" IsEnabled="False" Label="Underline" Icon="{DynamicResource SemiIconUnderline}" />
-                    <CommandBarSeparator />
-                    <CommandBarButton Label="Share" Icon="{DynamicResource SemiIconShare}" />
-                    <CommandBarButton Label="Export" Icon="{DynamicResource SemiIconExport}" />
-                    <CommandBarButton Label="Print" Icon="{DynamicResource SemiIconPrint}" />
-                    <CommandBarSeparator />
-                    <CommandBarButton Label="Delete" Icon="{DynamicResource SemiIconDelete}" />
-                </CommandBar>
-            </GroupBox>
-
-            <!--  With secondary commands (overflow)  -->
-            <GroupBox>
-                <GroupBox.Header>
-                    <TextBlock Text="CommandBar — With Secondary Commands (overflow)" />
-                </GroupBox.Header>
-                <CommandBar>
-                    <CommandBarButton Label="New" Icon="{DynamicResource SemiIconPlus}" />
-                    <CommandBarButton Label="Save" Icon="{DynamicResource SemiIconSave}" />
-                    <CommandBarButton Label="Share" Icon="{DynamicResource SemiIconShare}" />
-                    <CommandBar.SecondaryCommands>
-                        <CommandBarButton Label="Export" Icon="{DynamicResource SemiIconExport}" />
-                        <CommandBarButton Label="Delete" Icon="{DynamicResource SemiIconDelete}" />
-                    </CommandBar.SecondaryCommands>
-                </CommandBar>
-            </GroupBox>
-
-        </StackPanel>
-    </ScrollViewer>
-</UserControl>

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

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

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

@@ -1,54 +0,0 @@
-<UserControl
-    x:Class="Semi.Avalonia.Demo.Pages.ContentPageDemo"
-    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">
-    <DockPanel>
-        <ScrollViewer DockPanel.Dock="Right" Width="260">
-            <StackPanel Margin="12" Spacing="8">
-                <TextBlock Text="Configuration" FontWeight="SemiBold" FontSize="16"
-                           Foreground="{DynamicResource SemiColorText0}" />
-                <TextBlock Text="ContentPage is the fundamental page type. It hosts a single piece of content and integrates with NavigationPage, TabbedPage, and CarouselPage. The Header property sets the navigation bar title."
-                           FontSize="12" Opacity="0.7" TextWrapping="Wrap" />
-
-                <Separator />
-
-                <TextBlock Text="Navigation" FontWeight="SemiBold" />
-                <Button Content="Push Page" HorizontalAlignment="Stretch" Click="OnPush" />
-                <Button Content="Pop Page" HorizontalAlignment="Stretch" Click="OnPop" />
-                <Button Content="Pop to Root" HorizontalAlignment="Stretch" Click="OnPopToRoot" />
-
-                <Separator />
-
-                <TextBlock Text="Key Properties" FontWeight="SemiBold" />
-                <TextBlock Text="• Header: nav bar title (string or Control)" FontSize="12" Opacity="0.8" TextWrapping="Wrap" />
-                <TextBlock Text="• Content: any Avalonia control" FontSize="12" Opacity="0.8" TextWrapping="Wrap" />
-                <TextBlock Text="• Background: page background brush" FontSize="12" Opacity="0.8" TextWrapping="Wrap" />
-                <TextBlock Text="• HorizontalContentAlignment" FontSize="12" Opacity="0.8" />
-                <TextBlock Text="• VerticalContentAlignment" FontSize="12" Opacity="0.8" />
-                <TextBlock Text="• AutomaticallyApplySafeAreaPadding" FontSize="12" Opacity="0.8" />
-
-                <Separator />
-
-                <TextBlock Name="StatusText"
-                           Text="Depth: 1 | Current: Root Page"
-                           FontSize="11"
-                           Opacity="0.7" />
-            </StackPanel>
-        </ScrollViewer>
-
-        <Border DockPanel.Dock="Right" Width="1" Background="{DynamicResource SemiColorBackground0}" />
-
-        <Border Margin="12"
-                BorderBrush="{DynamicResource SemiColorBorder}"
-                BorderThickness="1"
-                CornerRadius="6"
-                ClipToBounds="True">
-            <NavigationPage Name="DemoNav" />
-        </Border>
-    </DockPanel>
-</UserControl>

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

@@ -1,93 +0,0 @@
-using Avalonia.Controls;
-using Avalonia.Interactivity;
-using Avalonia.Media;
-using Avalonia.Layout;
-
-namespace Semi.Avalonia.Demo.Pages;
-
-public partial class ContentPageDemo : UserControl
-{
-    private static readonly Color[] PageColors =
-    [
-        Color.FromRgb(0xE3, 0xF2, 0xFD), // blue
-        Color.FromRgb(0xF3, 0xE5, 0xF5), // purple
-        Color.FromRgb(0xE8, 0xF5, 0xE9), // green
-        Color.FromRgb(0xFF, 0xF8, 0xE1), // amber
-        Color.FromRgb(0xFB, 0xE9, 0xE7), // deep orange
-    ];
-
-    private int _pageCount;
-
-    public ContentPageDemo()
-    {
-        InitializeComponent();
-        Loaded += OnLoaded;
-    }
-
-    private async void OnLoaded(object? sender, RoutedEventArgs e)
-    {
-        await DemoNav.PushAsync(MakePage("Root Page", "ContentPage inside a NavigationPage.\nUse the options to navigate."));
-        UpdateStatus();
-    }
-
-    private async void OnPush(object? sender, RoutedEventArgs e)
-    {
-        _pageCount++;
-        await DemoNav.PushAsync(MakePage($"Page {_pageCount}", $"ContentPage #{_pageCount}.\nNavigate back using the back button."));
-        UpdateStatus();
-    }
-
-    private async void OnPop(object? sender, RoutedEventArgs e)
-    {
-        await DemoNav.PopAsync();
-        UpdateStatus();
-    }
-
-    private async void OnPopToRoot(object? sender, RoutedEventArgs e)
-    {
-        await DemoNav.PopToRootAsync();
-        _pageCount = 0;
-        UpdateStatus();
-    }
-
-    private void UpdateStatus()
-    {
-        StatusText.Text = $"Depth: {DemoNav.StackDepth} | Current: {DemoNav.CurrentPage?.Header}";
-    }
-
-    private ContentPage MakePage(string header, string body) =>
-        new ContentPage
-        {
-            Header = header,
-            Background = new SolidColorBrush(PageColors[_pageCount % PageColors.Length]),
-            Content = new StackPanel
-            {
-                HorizontalAlignment = HorizontalAlignment.Center,
-                VerticalAlignment = VerticalAlignment.Center,
-                Spacing = 10,
-                Children =
-                {
-                    new TextBlock
-                    {
-                        Text = header,
-                        FontSize = 20,
-                        FontWeight = FontWeight.SemiBold,
-                        HorizontalAlignment = HorizontalAlignment.Center,
-                        Foreground = Brushes.Black,
-                    },
-                    new TextBlock
-                    {
-                        Text = body,
-                        FontSize = 13,
-                        Opacity = 0.7,
-                        TextWrapping = TextWrapping.Wrap,
-                        TextAlignment = TextAlignment.Center,
-                        MaxWidth = 260,
-                        Foreground = Brushes.Black,
-                    }
-                }
-            },
-            HorizontalContentAlignment = HorizontalAlignment.Stretch,
-            VerticalContentAlignment = VerticalAlignment.Stretch
-        };
-}

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

@@ -1,179 +0,0 @@
-<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: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:DataType="vm:DataGridDemoViewModel"
-    mc:Ignorable="d">
-    <TabControl>
-        <TabItem Header="DataGrid">
-            <Grid RowDefinitions="Auto, *">
-                <StackPanel Grid.Row="0" Orientation="Horizontal">
-                    <ToggleSwitch Content="Enable" Name="enable" IsChecked="True" />
-                    <ToggleSwitch Content="Inset Content" Name="inset" />
-                    <ToggleSwitch Content="ScrollBar Auto Hide" Name="autohide" />
-                </StackPanel>
-                <DataGrid Grid.Row="1"
-                          Margin="8"
-                          CanUserReorderColumns="True"
-                          CanUserResizeColumns="True"
-                          CanUserSortColumns="True"
-                          HeadersVisibility="All"
-                          IsReadOnly="True"
-                          Classes.InsetContent="{Binding #inset.IsChecked}"
-                          ScrollViewer.AllowAutoHide="{Binding #autohide.IsChecked}"
-                          IsEnabled="{Binding #enable.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 Name="EditableTab" Header="Editable">
-            <Grid Margin="8" RowDefinitions="Auto,*,Auto">
-                <StackPanel
-                    Grid.Row="0"
-                    Orientation="Horizontal"
-                    Spacing="4">
-                    <TextBlock VerticalAlignment="Center" Text="FontSize:" />
-                    <Slider
-                        Name="FontSizeSlider"
-                        Width="100"
-                        VerticalAlignment="Center"
-                        Maximum="30"
-                        Minimum="5"
-                        Value="14" />
-                    <CheckBox
-                        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

@@ -1,15 +0,0 @@
-using Avalonia;
-using Avalonia.Controls;
-using Avalonia.Markup.Xaml;
-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/DrawerPageDemo.axaml

@@ -1,77 +0,0 @@
-<UserControl
-    x:Class="Semi.Avalonia.Demo.Pages.DrawerPageDemo"
-    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="700"
-    d:DesignWidth="800"
-    mc:Ignorable="d">
-    <DockPanel>
-        <ScrollViewer DockPanel.Dock="Right" Width="260">
-            <StackPanel Margin="12" Spacing="8">
-                <TextBlock Text="Configuration" FontWeight="SemiBold" FontSize="16"
-                           Foreground="{DynamicResource SemiColorText0}" />
-
-                <Button Content="Toggle Drawer"
-                        HorizontalAlignment="Stretch"
-                        Click="OnToggleDrawer" />
-
-                <Separator />
-
-                <CheckBox Name="GestureCheck"
-                          Content="Gesture Enabled"
-                          IsChecked="True"
-                          IsCheckedChanged="OnGestureChanged" />
-                
-                <ComboBox SelectionChanged="OnLayoutChanged" >
-                    <ComboBoxItem Content="CompactOverlay" />
-                    <ComboBoxItem Content="CompactInline" />
-                    <ComboBoxItem Content="Split" />
-                    <ComboBoxItem Content="Overlay" />
-                </ComboBox>
-
-                <Separator />
-
-                <TextBlock Text="Status" FontWeight="SemiBold" FontSize="14" />
-                <TextBlock Name="StatusText"
-                           Text="Drawer: Closed"
-                           Opacity="0.7"
-                           TextWrapping="Wrap" />
-            </StackPanel>
-        </ScrollViewer>
-
-        <Border DockPanel.Dock="Right" Width="1" Background="{DynamicResource SemiColorBackground0}" />
-        
-        <DrawerPage Name="DemoDrawer"
-                    Margin="12"
-                    Header="First Look"
-                    DrawerLayoutBehavior="Overlay"
-                    CompactDrawerLength="80"
-                    DrawerLength="250">
-            <DrawerPage.DrawerHeader>
-                <TextBlock Text="Menu" Margin="16" FontSize="18" FontWeight="SemiBold" Foreground="{DynamicResource SemiColorPrimary}" />
-            </DrawerPage.DrawerHeader>
-            <DrawerPage.DrawerFooter>
-                <TextBlock HorizontalAlignment="Center" Text="Powered by IRIHI" Margin="8" />
-            </DrawerPage.DrawerFooter>
-            <DrawerPage.Drawer>
-                <ListBox Name="DrawerMenu" SelectionChanged="OnMenuSelectionChanged">
-                    <ListBoxItem Content="Home" />
-                    <ListBoxItem Content="Settings" />
-                    <ListBoxItem Content="Profile" />
-                    <ListBoxItem Content="About" />
-                </ListBox>
-            </DrawerPage.Drawer>
-            <DrawerPage.Content>
-                <ContentPage Header="Home">
-                    <StackPanel HorizontalAlignment="Center" VerticalAlignment="Center" Spacing="8">
-                        <TextBlock Text="Home Page" FontSize="20" FontWeight="SemiBold" HorizontalAlignment="Center" />
-                        <TextBlock Text="Swipe from the left edge or use the hamburger button to open the drawer."
-                                   FontSize="13" Opacity="0.7" TextWrapping="Wrap" TextAlignment="Center" MaxWidth="300" />
-                    </StackPanel>
-                </ContentPage>
-            </DrawerPage.Content>
-        </DrawerPage>
-    </DockPanel>
-</UserControl>

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

@@ -1,90 +0,0 @@
-using System;
-using System.Linq;
-using Avalonia.Controls;
-using Avalonia.Input.GestureRecognizers;
-using Avalonia.Interactivity;
-using Avalonia.Layout;
-
-namespace Semi.Avalonia.Demo.Pages;
-
-public partial class DrawerPageDemo : UserControl
-{
-    public DrawerPageDemo()
-    {
-        InitializeComponent();
-        EnableMouseSwipeGesture(DemoDrawer);
-    }
-
-    protected override void OnLoaded(RoutedEventArgs e)
-    {
-        base.OnLoaded(e);
-        DemoDrawer.Opened += OnDrawerStatusChanged;
-        DemoDrawer.Closed += OnDrawerStatusChanged;
-    }
-
-    protected override void OnUnloaded(RoutedEventArgs e)
-    {
-        base.OnUnloaded(e);
-        DemoDrawer.Opened -= OnDrawerStatusChanged;
-        DemoDrawer.Closed -= OnDrawerStatusChanged;
-    }
-
-    private void OnDrawerStatusChanged(object? sender, EventArgs e) => UpdateStatus();
-
-    private void OnToggleDrawer(object? sender, RoutedEventArgs e)
-    {
-        DemoDrawer.IsOpen = !DemoDrawer.IsOpen;
-    }
-
-    private void OnGestureChanged(object? sender, RoutedEventArgs e)
-    {
-        DemoDrawer.IsGestureEnabled = GestureCheck.IsChecked == true;
-    }
-
-    private void OnMenuSelectionChanged(object? sender, SelectionChangedEventArgs e)
-    {
-        if (DrawerMenu.SelectedItem is ListBoxItem item)
-        {
-            DemoDrawer.Content = new ContentPage
-            {
-                Header = item.Content?.ToString(),
-                Content = new TextBlock
-                {
-                    Text = $"{item.Content} page content",
-                    FontSize = 16,
-                    HorizontalAlignment = HorizontalAlignment.Center,
-                    VerticalAlignment = VerticalAlignment.Center,
-                },
-                HorizontalContentAlignment = HorizontalAlignment.Stretch,
-                VerticalContentAlignment = VerticalAlignment.Stretch
-            };
-            DemoDrawer.IsOpen = false;
-        }
-    }
-
-    private void UpdateStatus()
-    {
-        StatusText.Text = $"Drawer: {(DemoDrawer.IsOpen ? "Open" : "Closed")}";
-    }
-
-    private static void EnableMouseSwipeGesture(Control control)
-    {
-        var recognizer = control.GestureRecognizers
-            .OfType<SwipeGestureRecognizer>()
-            .FirstOrDefault();
-
-        recognizer?.IsMouseEnabled = true;
-    }
-
-    private void OnLayoutChanged(object? sender, SelectionChangedEventArgs e)
-    {
-        DemoDrawer.DrawerLayoutBehavior = (sender as ComboBox)?.SelectedIndex switch
-        {
-            0 => DrawerLayoutBehavior.CompactOverlay,
-            1 => DrawerLayoutBehavior.CompactInline,
-            2 => DrawerLayoutBehavior.Split,
-            3 => DrawerLayoutBehavior.Overlay,
-            _ => DrawerLayoutBehavior.CompactOverlay
-        };
-    }
-}

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

@@ -1,327 +0,0 @@
-<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"
-             xmlns:vm="clr-namespace:Semi.Avalonia.Demo.ViewModels"
-             xmlns:controls="clr-namespace:Semi.Avalonia.Demo.Controls"
-             xmlns:cvt="clr-namespace:Semi.Avalonia.Demo.Converters"
-             xmlns:pages="clr-namespace:Semi.Avalonia.Demo.Pages"
-             mc:Ignorable="d" d:DesignWidth="1000" d:DesignHeight="1450"
-             x:DataType="vm:HighContrastDemoViewModel"
-             x:Class="Semi.Avalonia.Demo.Pages.HighContrastDemo">
-    <Design.DataContext>
-        <vm:HighContrastDemoViewModel />
-    </Design.DataContext>
-    <SplitView
-        Name="splitView"
-        CompactPaneLength="50"
-        DisplayMode="CompactInline"
-        IsPaneOpen="{Binding #toggle.IsChecked, Mode=TwoWay}"
-        OpenPaneLength="300"
-        PanePlacement="Right">
-        <SplitView.Pane>
-            <StackPanel>
-                <ToggleSwitch
-                    Name="toggle"
-                    HorizontalAlignment="Right"
-                    IsChecked="True"
-                    Theme="{DynamicResource IconBorderlessToggleSwitch}"
-                    Content="{StaticResource SemiIconSidebar}" />
-                <Border IsVisible="{Binding #splitView.IsPaneOpen}" Theme="{DynamicResource CardBorder}">
-                    <Panel>
-                        <TextBlock
-                            IsVisible="{Binding SelectedColorResource, Converter={x:Static ObjectConverters.IsNull}}"
-                            Text="Click on Color to Check Details"
-                            TextWrapping="Wrap" />
-                        <controls:ColorDetailControl
-                            Background="{Binding SelectedColorResource.Brush}"
-                            IsVisible="{Binding SelectedColorResource, Converter={x:Static ObjectConverters.IsNotNull}}"
-                            ResourceKey="{Binding SelectedColorResource.ResourceKey}"
-                            ResourceName="{Binding SelectedColorResource.ResourceKey}" />
-                    </Panel>
-                </Border>
-            </StackPanel>
-        </SplitView.Pane>
-        <SplitView.Content>
-            <ScrollViewer>
-                <StackPanel Spacing="10">
-                    <TextBlock Text="Theme Preview" FontWeight="SemiBold" />
-                    <ListBox
-                        Theme="{StaticResource PureCardRadioGroupListBox}"
-                        ItemsSource="{Binding ThemeVariants}"
-                        SelectedItem="{Binding SelectedThemeVariant}">
-                        <ListBox.ItemsPanel>
-                            <ItemsPanelTemplate>
-                                <WrapPanel Orientation="Horizontal" />
-                            </ItemsPanelTemplate>
-                        </ListBox.ItemsPanel>
-                        <ListBox.ItemTemplate>
-                            <DataTemplate>
-                                <StackPanel HorizontalAlignment="Left" Spacing="5" MinWidth="200">
-                                    <ThemeVariantScope RequestedThemeVariant="{Binding}">
-                                        <Border
-                                            Padding="5 25 5 5"
-                                            HorizontalAlignment="Left"
-                                            Background="{DynamicResource WindowColor}"
-                                            BorderBrush="{DynamicResource WindowTextColor}"
-                                            BorderThickness="1"
-                                            CornerRadius="3">
-                                            <StackPanel Spacing="10">
-                                                <StackPanel Orientation="Horizontal" Spacing="50">
-                                                    <StackPanel Spacing="5">
-                                                        <TextBlock
-                                                            FontSize="50"
-                                                            Text="Aa" />
-                                                        <StackPanel Orientation="Horizontal" Spacing="3">
-                                                            <StackPanel.Styles>
-                                                                <Style Selector="Border">
-                                                                    <Setter Property="BorderThickness" Value="1" />
-                                                                    <Setter Property="BorderBrush" Value="{DynamicResource WindowTextColor}" />
-                                                                    <Setter Property="CornerRadius" Value="5" />
-                                                                    <Setter Property="Width" Value="10" />
-                                                                    <Setter Property="Height" Value="{Binding $self.Width}" />
-                                                                </Style>
-                                                            </StackPanel.Styles>
-                                                            <Border Background="{DynamicResource WindowColor}" />
-                                                            <Border Background="{DynamicResource HotlightColor}" />
-                                                            <Border Background="{DynamicResource GrayTextColor}" />
-                                                            <Border Background="{DynamicResource HighlightTextColor}" />
-                                                            <Border Background="{DynamicResource HighlightColor}" />
-                                                        </StackPanel>
-                                                    </StackPanel>
-                                                    <Border
-                                                        BorderThickness="1"
-                                                        BorderBrush="{DynamicResource WindowTextColor}"
-                                                        CornerRadius="3"
-                                                        Padding="8">
-                                                        <Panel>
-                                                            <StackPanel Spacing="5">
-                                                                <Border
-                                                                    Width="50"
-                                                                    Height="1"
-                                                                    Background="{DynamicResource WindowTextColor}" />
-                                                                <Border
-                                                                    Height="1"
-                                                                    Background="{DynamicResource WindowTextColor}" />
-                                                                <Border
-                                                                    Height="1"
-                                                                    Background="{DynamicResource WindowTextColor}" />
-                                                            </StackPanel>
-                                                            <StackPanel
-                                                                HorizontalAlignment="Right"
-                                                                VerticalAlignment="Bottom"
-                                                                Orientation="Horizontal"
-                                                                Spacing="2">
-                                                                <Border
-                                                                    Width="20"
-                                                                    Height="5"
-                                                                    Background="{DynamicResource HighlightColor}"
-                                                                    CornerRadius="1" />
-                                                                <Border
-                                                                    Width="20"
-                                                                    Height="5"
-                                                                    BorderThickness="1"
-                                                                    BorderBrush="{DynamicResource ButtonTextColor}"
-                                                                    CornerRadius="1" />
-                                                            </StackPanel>
-                                                        </Panel>
-                                                    </Border>
-                                                </StackPanel>
-                                                <Border
-                                                    Height="1"
-                                                    Background="{DynamicResource WindowTextColor}" />
-                                            </StackPanel>
-                                        </Border>
-                                    </ThemeVariantScope>
-                                    <TextBlock Text="{Binding}" FontWeight="SemiBold" />
-                                </StackPanel>
-                            </DataTemplate>
-                        </ListBox.ItemTemplate>
-                    </ListBox>
-
-                    <ThemeVariantScope
-                        MinWidth="400"
-                        RequestedThemeVariant="{Binding SelectedThemeVariant}">
-                        <Border Padding="10" Background="{DynamicResource WindowColor}">
-                            <StackPanel Spacing="16">
-                                <StackPanel.Styles>
-                                    <Style Selector="TextBlock">
-                                        <Setter Property="HorizontalAlignment" Value="Left" />
-                                        <Setter Property="VerticalAlignment" Value="Center" />
-                                        <Setter Property="FontWeight" Value="SemiBold" />
-                                    </Style>
-                                    <Style Selector="controls|ColorItemControl.ColorBlock">
-                                        <Setter Property="Width" Value="44" />
-                                        <Setter Property="Height" Value="{Binding $self.Width}" />
-                                        <Setter Property="HorizontalAlignment" Value="Right" />
-                                        <Setter Property="BorderThickness" Value="1" />
-                                        <Setter Property="BorderBrush" Value="{DynamicResource WindowTextColor}" />
-                                        <Setter Property="CornerRadius" Value="3" />
-                                    </Style>
-                                </StackPanel.Styles>
-                                <Panel>
-                                    <TextBlock
-                                        Foreground="{DynamicResource WindowTextColor}"
-                                        Text="Background" />
-                                    <controls:ColorItemControl
-                                        Classes="ColorBlock"
-                                        DataContext="{Binding ColorResources[0]}"
-                                        Background="{DynamicResource  WindowColor}" />
-                                </Panel>
-                                <Panel>
-                                    <TextBlock
-                                        Foreground="{DynamicResource WindowTextColor}"
-                                        Text="Text" />
-                                    <controls:ColorItemControl
-                                        Classes="ColorBlock"
-                                        DataContext="{Binding ColorResources[1]}"
-                                        Background="{DynamicResource  WindowTextColor}" />
-                                </Panel>
-                                <Panel>
-                                    <TextBlock
-                                        Foreground="{DynamicResource HotlightColor}"
-                                        TextDecorations="Underline"
-                                        Text="Hyperlink" />
-                                    <controls:ColorItemControl
-                                        Classes="ColorBlock"
-                                        DataContext="{Binding ColorResources[2]}"
-                                        Background="{DynamicResource  HotlightColor}" />
-                                </Panel>
-                                <Panel>
-                                    <TextBlock
-                                        Foreground="{DynamicResource GrayTextColor}"
-                                        Text="Inactive Text" />
-                                    <controls:ColorItemControl
-                                        Classes="ColorBlock"
-                                        DataContext="{Binding ColorResources[3]}"
-                                        Background="{DynamicResource  GrayTextColor}" />
-                                </Panel>
-                                <Panel>
-                                    <TextBlock
-                                        Foreground="{DynamicResource HighlightTextColor}"
-                                        Background="{DynamicResource HighlightColor}"
-                                        Text="Selected text" />
-                                    <StackPanel Orientation="Horizontal" HorizontalAlignment="Right" Spacing="4">
-                                        <controls:ColorItemControl
-                                            Classes="ColorBlock"
-                                            DataContext="{Binding ColorResources[4]}"
-                                            Background="{DynamicResource  HighlightTextColor}" />
-                                        <controls:ColorItemControl
-                                            Classes="ColorBlock"
-                                            DataContext="{Binding ColorResources[5]}"
-                                            Background="{DynamicResource  HighlightColor}" />
-                                    </StackPanel>
-                                </Panel>
-                                <Panel>
-                                    <Border
-                                        HorizontalAlignment="Left"
-                                        VerticalAlignment="Center"
-                                        BorderBrush="{DynamicResource ButtonTextColor}"
-                                        Background="{DynamicResource ButtonFaceColor}"
-                                        BorderThickness="2"
-                                        CornerRadius="3">
-                                        <TextBlock
-                                            Foreground="{DynamicResource ButtonTextColor}"
-                                            Padding="16 6"
-                                            Text="Button text" />
-                                    </Border>
-                                    <StackPanel Orientation="Horizontal" HorizontalAlignment="Right" Spacing="4">
-                                        <controls:ColorItemControl
-                                            Classes="ColorBlock"
-                                            DataContext="{Binding ColorResources[6]}"
-                                            Background="{DynamicResource  ButtonTextColor}" />
-                                        <controls:ColorItemControl
-                                            Classes="ColorBlock"
-                                            DataContext="{Binding ColorResources[7]}"
-                                            Background="{DynamicResource  ButtonFaceColor}" />
-                                    </StackPanel>
-                                </Panel>
-                            </StackPanel>
-                        </Border>
-                    </ThemeVariantScope>
-
-                    <DataGrid
-                        HorizontalAlignment="Left"
-                        CanUserSortColumns="False"
-                        AutoGenerateColumns="False"
-                        ItemsSource="{Binding ColorResources}"
-                        GridLinesVisibility="All"
-                        BorderBrush="{DynamicResource SemiColorBorder}"
-                        BorderThickness="1"
-                        Padding="5">
-                        <DataGrid.Columns>
-                            <DataGridTemplateColumn Header="Color">
-                                <DataGridTemplateColumn.CellTemplate>
-                                    <DataTemplate>
-                                        <controls:ColorItemControl
-                                            Width="40"
-                                            Height="20"
-                                            CornerRadius="3"
-                                            Background="{Binding Brush}" />
-                                    </DataTemplate>
-                                </DataGridTemplateColumn.CellTemplate>
-                            </DataGridTemplateColumn>
-
-                            <DataGridTemplateColumn Header="ResourceKey">
-                                <DataGridTemplateColumn.CellTemplate>
-                                    <DataTemplate>
-                                        <SelectableTextBlock
-                                            Margin="12 0"
-                                            VerticalAlignment="Center"
-                                            Text="{Binding ResourceKey}" />
-                                    </DataTemplate>
-                                </DataGridTemplateColumn.CellTemplate>
-                            </DataGridTemplateColumn>
-
-                            <DataGridTemplateColumn Header="Hex">
-                                <DataGridTemplateColumn.CellTemplate>
-                                    <DataTemplate>
-                                        <SelectableTextBlock
-                                            Margin="12 0"
-                                            VerticalAlignment="Center"
-                                            Text="{Binding Brush,
-                                                Converter={x:Static cvt:ColorConverter.ToHex},ConverterParameter={x:False}}" />
-                                    </DataTemplate>
-                                </DataGridTemplateColumn.CellTemplate>
-                            </DataGridTemplateColumn>
-
-                            <DataGridTemplateColumn Header="Description">
-                                <DataGridTemplateColumn.CellTemplate>
-                                    <DataTemplate>
-                                        <SelectableTextBlock
-                                            Margin="12 0"
-                                            VerticalAlignment="Center"
-                                            Text="{Binding Description}" />
-                                    </DataTemplate>
-                                </DataGridTemplateColumn.CellTemplate>
-                            </DataGridTemplateColumn>
-
-                            <DataGridTemplateColumn Header="Pair With">
-                                <DataGridTemplateColumn.CellTemplate>
-                                    <DataTemplate>
-                                        <SelectableTextBlock
-                                            Margin="12 0"
-                                            VerticalAlignment="Center"
-                                            Text="{Binding PairWith}" />
-                                    </DataTemplate>
-                                </DataGridTemplateColumn.CellTemplate>
-                            </DataGridTemplateColumn>
-
-                            <DataGridTemplateColumn Width="100" Header="CopyText">
-                                <DataGridTemplateColumn.CellTemplate>
-                                    <DataTemplate DataType="vm:ColorResource">
-                                        <Button
-                                            Command="{Binding $parent[pages:HighContrastDemo].Copy}"
-                                            CommandParameter="{Binding CopyText}"
-                                            Theme="{DynamicResource  IconBorderlessButton}"
-                                            Content="{StaticResource SemiIconCopy}" />
-                                    </DataTemplate>
-                                </DataGridTemplateColumn.CellTemplate>
-                            </DataGridTemplateColumn>
-                        </DataGrid.Columns>
-                    </DataGrid>
-                </StackPanel>
-            </ScrollViewer>
-        </SplitView.Content>
-    </SplitView>
-</UserControl>

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

@@ -1,25 +0,0 @@
-using System.Threading.Tasks;
-using Avalonia.Controls;
-using Avalonia.Input.Platform;
-using Semi.Avalonia.Demo.ViewModels;
-
-namespace Semi.Avalonia.Demo.Pages;
-
-public partial class HighContrastDemo : UserControl
-{
-    public HighContrastDemo()
-    {
-        InitializeComponent();
-        this.DataContext = new HighContrastDemoViewModel();
-    }
-
-    public async Task Copy(object? o)
-    {
-        if (o is null) return;
-        var toplevel = TopLevel.GetTopLevel(this);
-        if (toplevel?.Clipboard is { } c)
-        {
-            await c.SetTextAsync(o.ToString());
-        }
-    }
-}

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

@@ -16,7 +16,7 @@
             Margin="8"
             Classes="ClearButton"
             Text="{Binding SearchText}"
-            PlaceholderText="Input Icon Name" />
+            Watermark="Input Icon Name" />
 
         <TabControl
             Grid.Row="1"

demo/Semi.Avalonia.Demo/Pages/NavigationDemoHelper.cs

@@ -1,66 +0,0 @@
-using Avalonia.Controls;
-using Avalonia.Layout;
-using Avalonia.Media;
-
-namespace Semi.Avalonia.Demo.Pages;
-
-/// <summary>
-/// Shared helpers for ControlCatalog demo pages.
-/// </summary>
-internal static class NavigationDemoHelper
-{
-    /// <summary>
-    /// Pastel background brushes cycled by page index.
-    /// </summary>
-    internal static readonly IBrush[] PageBrushes =
-    [
-        new SolidColorBrush(Color.Parse("#BBDEFB")),
-        new SolidColorBrush(Color.Parse("#C8E6C9")),
-        new SolidColorBrush(Color.Parse("#FFE0B2")),
-        new SolidColorBrush(Color.Parse("#E1BEE7")),
-        new SolidColorBrush(Color.Parse("#FFCDD2")),
-        new SolidColorBrush(Color.Parse("#B2EBF2"))
-    ];
-
-    internal static IBrush GetPageBrush(int index) =>
-        PageBrushes[(index % PageBrushes.Length + PageBrushes.Length) % PageBrushes.Length];
-
-    /// <summary>
-    /// Creates a simple demo ContentPage with a centered title and subtitle.
-    /// </summary>
-    internal static ContentPage MakePage(string header, string body, int colorIndex) =>
-        new()
-        {
-            Header = header,
-            Background = GetPageBrush(colorIndex),
-            Content = new StackPanel
-            {
-                HorizontalAlignment = HorizontalAlignment.Center,
-                VerticalAlignment = VerticalAlignment.Center,
-                Spacing = 8,
-                Children =
-                {
-                    new TextBlock
-                    {
-                        Text = header,
-                        FontSize = 20,
-                        FontWeight = FontWeight.SemiBold,
-                        HorizontalAlignment = HorizontalAlignment.Center,
-                        Foreground = Brushes.Black,
-                    },
-                    new TextBlock
-                    {
-                        Text = body,
-                        FontSize = 13,
-                        Opacity = 0.7,
-                        TextWrapping = TextWrapping.Wrap,
-                        TextAlignment = TextAlignment.Center,
-                        MaxWidth = 260,
-                        Foreground = Brushes.Black,
-                    }
-                }
-            },
-            HorizontalContentAlignment = HorizontalAlignment.Stretch,
-            VerticalContentAlignment = VerticalAlignment.Stretch
-        };
-}

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

@@ -1,68 +0,0 @@
-<UserControl
-    x:Class="Semi.Avalonia.Demo.Pages.NavigationPageDemo"
-    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="700"
-    d:DesignWidth="800"
-    mc:Ignorable="d">
-    <ScrollViewer>
-        <DockPanel>
-            <ScrollViewer DockPanel.Dock="Right" Width="260">
-                <StackPanel Margin="12" Spacing="8">
-                    <TextBlock Text="Configuration" FontWeight="SemiBold" FontSize="16" />
-                    <TextBlock Text="Navigation" FontWeight="SemiBold" FontSize="13" />
-
-                    <Button Content="Push Page"
-                            HorizontalAlignment="Stretch"
-                            Click="OnPush" />
-                    <Button Content="Pop"
-                            HorizontalAlignment="Stretch"
-                            Click="OnPop" />
-                    <Button Content="Pop to Root"
-                            HorizontalAlignment="Stretch"
-                            Click="OnPopToRoot" />
-
-                    <Separator />
-
-                    <TextBlock Text="Options" FontWeight="SemiBold" FontSize="14" />
-
-                    <CheckBox Name="HasNavBarCheck"
-                              Content="Has Navigation Bar"
-                              IsChecked="True"
-                              IsCheckedChanged="OnHasNavBarChanged" />
-                    <CheckBox Name="HasBackButtonCheck"
-                              Content="Has Back Button"
-                              IsChecked="True" 
-                              IsCheckedChanged="OnHasBackButonChanged" />
-
-                    <Separator />
-
-                    <TextBlock Text="Status" FontWeight="SemiBold" FontSize="14" />
-                    <TextBlock Name="StatusText"
-                               Text="Depth: 1"
-                               Opacity="0.7"
-                               TextWrapping="Wrap" />
-                    <TextBlock Name="HeaderText"
-                               Text="Current: Home"
-                               Opacity="0.7"
-                               TextWrapping="Wrap" />
-                    <ToggleSwitch Content="Large" Name="large" />
-                </StackPanel>
-            </ScrollViewer>
-
-            <Border DockPanel.Dock="Right" Width="1" Background="{DynamicResource SemiColorBackground0}" />
-
-            <Border Margin="12"
-                    BorderBrush="{DynamicResource SemiColorBorder}"
-                    BorderThickness="1"
-                    CornerRadius="6"
-                    ClipToBounds="True">
-                <NavigationPage 
-                    Name="DemoNav" 
-                    Classes.Large="{Binding #large.IsChecked}" />
-            </Border>
-        </DockPanel>
-    </ScrollViewer>
-</UserControl>

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

@@ -1,66 +0,0 @@
-using Avalonia.Controls;
-using Avalonia.Interactivity;
-
-namespace Semi.Avalonia.Demo.Pages;
-
-public partial class NavigationPageDemo : UserControl
-{
-    private int _pageCount;
-
-    public NavigationPageDemo()
-    {
-        InitializeComponent();
-        Loaded += OnLoaded;
-    }
-
-    private async void OnLoaded(object? sender, RoutedEventArgs e)
-    {
-        await DemoNav.PushAsync(NavigationDemoHelper.MakePage("Home", "Welcome!\nUse the buttons to push and pop pages.", 0), null);
-        UpdateStatus();
-    }
-
-    private async void OnPush(object? sender, RoutedEventArgs e)
-    {
-        _pageCount++;
-        var page = NavigationDemoHelper.MakePage($"Page {_pageCount}", $"This is page {_pageCount}.", _pageCount);
-        NavigationPage.SetHasNavigationBar(page, HasNavBarCheck.IsChecked == true);
-        NavigationPage.SetHasBackButton(page, HasBackButtonCheck.IsChecked == true);
-        await DemoNav.PushAsync(page);
-        UpdateStatus();
-    }
-
-    private async void OnPop(object? sender, RoutedEventArgs e)
-    {
-        await DemoNav.PopAsync();
-        UpdateStatus();
-    }
-
-    private async void OnPopToRoot(object? sender, RoutedEventArgs e)
-    {
-        await DemoNav.PopToRootAsync();
-        _pageCount = 0;
-        UpdateStatus();
-    }
-
-    private void OnHasNavBarChanged(object? sender, RoutedEventArgs e)
-    {
-        if (DemoNav == null)
-            return;
-        if (DemoNav.CurrentPage != null)
-            NavigationPage.SetHasNavigationBar(DemoNav.CurrentPage, HasNavBarCheck.IsChecked == true);
-    }
-
-    private void OnHasBackButonChanged(object? sender, RoutedEventArgs e)
-    {
-        if (DemoNav == null)
-            return;
-        if (DemoNav.CurrentPage != null)
-            NavigationPage.SetHasBackButton(DemoNav.CurrentPage, HasBackButtonCheck.IsChecked == true);
-    }
-
-    private void UpdateStatus()
-    {
-        StatusText.Text = $"Depth: {DemoNav.StackDepth}";
-        HeaderText.Text = $"Current: {DemoNav.CurrentPage?.Header ?? "(none)"}";
-    }
-}

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

@@ -51,11 +51,6 @@
             <NumericUpDown Width="100" IsEnabled="False" />
             <NumericUpDown Width="100" ButtonSpinnerLocation="Left" />
         </StackPanel>
-        
-        <StackPanel>
-            <TextBlock Text="Split" />
-            <NumericUpDown Classes="Split" Width="300" />
-        </StackPanel>
 
     </StackPanel>
 </UserControl>

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

@@ -1,99 +0,0 @@
-<UserControl
-    x:Class="Semi.Avalonia.Demo.Pages.PipsPagerDemo"
-    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>
-        <StackPanel HorizontalAlignment="Left" Spacing="16" Margin="0,0,0,20">
-
-            <!-- Horizontal PipsPager -->
-            <TextBlock Classes="H6" Text="Horizontal" />
-            <PipsPager
-                NumberOfPages="8"
-                Orientation="Horizontal" />
-
-            <!-- Vertical PipsPager -->
-            <TextBlock Classes="H6" Text="Vertical" />
-            <PipsPager
-                NumberOfPages="8"
-                Orientation="Vertical" />
-
-            <!-- Linked with Carousel -->
-            <TextBlock Classes="H6" Text="Linked with Carousel" />
-            <Panel>
-                <Carousel
-                    Name="DemoCarousel"
-                    Height="160">
-                    <Border Background="#EAF5FF">
-                        <TextBlock
-                            HorizontalAlignment="Center"
-                            VerticalAlignment="Center"
-                            Foreground="#1C1F23"
-                            Text="Page 1" />
-                    </Border>
-                    <Border Background="#F9F9F9">
-                        <TextBlock
-                            HorizontalAlignment="Center"
-                            VerticalAlignment="Center"
-                            Foreground="#1C1F23"
-                            Text="Page 2" />
-                    </Border>
-                    <Border Background="#FFF8EA">
-                        <TextBlock
-                            HorizontalAlignment="Center"
-                            VerticalAlignment="Center"
-                            Foreground="#1C1F23"
-                            Text="Page 3" />
-                    </Border>
-                    <Border Background="#FEF2ED">
-                        <TextBlock
-                            HorizontalAlignment="Center"
-                            VerticalAlignment="Center"
-                            Foreground="#1C1F23"
-                            Text="Page 4" />
-                    </Border>
-                    <Border Background="#F0F5FF">
-                        <TextBlock
-                            HorizontalAlignment="Center"
-                            VerticalAlignment="Center"
-                            Foreground="#1C1F23"
-                            Text="Page 5" />
-                    </Border>
-                </Carousel>
-                <ThemeVariantScope RequestedThemeVariant="Light">
-                    <PipsPager
-                        Name="LinkedPager"
-                        NumberOfPages="5"
-                        Orientation="Horizontal"
-                        HorizontalAlignment="Center"
-                        VerticalAlignment="Bottom"
-                        Margin="0,0,0,8"
-                        SelectedPageIndex="{Binding #DemoCarousel.SelectedIndex}" />
-                </ThemeVariantScope>
-            </Panel>
-
-            <!-- Various page counts -->
-            <TextBlock Classes="H6" Text="Various Page Counts" />
-            <StackPanel Spacing="12">
-                <StackPanel Orientation="Horizontal" Spacing="8">
-                    <TextBlock VerticalAlignment="Center" Width="80" Text="3 pages" />
-                    <PipsPager NumberOfPages="3" Orientation="Horizontal" />
-                </StackPanel>
-                <StackPanel Orientation="Horizontal" Spacing="8">
-                    <TextBlock VerticalAlignment="Center" Width="80" Text="5 pages" />
-                    <PipsPager NumberOfPages="5" Orientation="Horizontal" />
-                </StackPanel>
-                <StackPanel Orientation="Horizontal" Spacing="8">
-                    <TextBlock VerticalAlignment="Center" Width="80" Text="10 pages" />
-                    <PipsPager NumberOfPages="10" Orientation="Horizontal" />
-                </StackPanel>
-            </StackPanel>
-
-        </StackPanel>
-    </ScrollViewer>
-</UserControl>
-

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

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

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

@@ -34,10 +34,14 @@
                         </StackPanel>
                         <Border MinHeight="150" Theme="{StaticResource CardBorder}">
                             <TabControl Classes.ReverseSeparator="{Binding #reverse.IsChecked}" TabStripPlacement="{Binding #place.SelectedValue}">
-                                <TabItem Content="Hello 1" Header="文档" Icon="{StaticResource SemiIconFile}" />
-                                <TabItem Content="Hello 2" Header="快速起步" Icon="{StaticResource SemiIconGlobe}" />
-                                <TabItem Content="Hello 4" Header="无效" Icon="{StaticResource SemiIconClear}" IsEnabled="False" />
-                                <TabItem Content="Hello 3" Header="帮助" Icon="{StaticResource SemiIconHelpCircle}" />
+                                <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 Height="300" Theme="{StaticResource CardBorder}">
@@ -53,10 +57,14 @@
                     <StackPanel>
                         <Border MinHeight="150" Theme="{StaticResource CardBorder}">
                             <TabControl TabStripPlacement="{Binding #place.SelectedValue}" Theme="{StaticResource LineTabControl}">
-                                <TabItem Content="Hello 1" Header="文档" Icon="{StaticResource SemiIconFile}" />
-                                <TabItem Content="Hello 2" Header="快速起步" Icon="{StaticResource SemiIconGlobe}" />
-                                <TabItem Content="Hello 4" Header="无效" Icon="{StaticResource SemiIconClear}" IsEnabled="False" />
-                                <TabItem Content="Hello 3" Header="帮助" Icon="{StaticResource SemiIconHelpCircle}" />
+                                <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 Height="300" Theme="{StaticResource CardBorder}">
@@ -74,10 +82,14 @@
                             Background="Transparent"
                             Theme="{StaticResource CardBorder}">
                             <TabControl TabStripPlacement="{Binding #place.SelectedValue}" Theme="{StaticResource CardTabControl}">
-                                <TabItem Content="Hello 1" Header="文档" Icon="{StaticResource SemiIconFile}" />
-                                <TabItem Content="Hello 2" Header="快速起步" Icon="{StaticResource SemiIconGlobe}" />
-                                <TabItem Content="Hello 4" Header="无效" Icon="{StaticResource SemiIconClear}" IsEnabled="False" />
-                                <TabItem Content="Hello 3" Header="帮助" Icon="{StaticResource SemiIconHelpCircle}" />
+                                <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
@@ -95,10 +107,14 @@
                     <StackPanel>
                         <Border MinHeight="150" Theme="{StaticResource CardBorder}">
                             <TabControl TabStripPlacement="{Binding #place.SelectedValue}" Theme="{StaticResource ButtonTabControl}">
-                                <TabItem Content="Hello 1" Header="文档" Icon="{StaticResource SemiIconFile}" />
-                                <TabItem Content="Hello 2" Header="快速起步" Icon="{StaticResource SemiIconGlobe}" />
-                                <TabItem Content="Hello 4" Header="无效" Icon="{StaticResource SemiIconClear}" IsEnabled="False" />
-                                <TabItem Content="Hello 3" Header="帮助" Icon="{StaticResource SemiIconHelpCircle}" />
+                                <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 Height="300" Theme="{StaticResource CardBorder}">

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

@@ -1,80 +0,0 @@
-<UserControl
-    x:Class="Semi.Avalonia.Demo.Pages.TabbedPageDemo"
-    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">
-    <DockPanel>
-        <ScrollViewer DockPanel.Dock="Right" Width="260">
-            <StackPanel Margin="12" Spacing="8">
-                <TextBlock Text="Configuration" FontWeight="SemiBold" FontSize="16"
-                           Foreground="{DynamicResource SemiColorText0}" />
-
-                <TextBlock Text="Tab Management" FontWeight="SemiBold" FontSize="13" />
-                <StackPanel Spacing="6">
-                    <Button Content="Add Tab" Click="OnAddTab" HorizontalAlignment="Stretch" />
-                    <Button Content="Remove Latest Tab" Click="OnRemoveTab" HorizontalAlignment="Stretch" />
-                </StackPanel>
-
-                <Separator />
-
-                <TextBlock Text="Tab Placement" FontWeight="SemiBold" FontSize="13" />
-                <ComboBox Name="PlacementCombo" SelectedIndex="0"
-                          SelectionChanged="OnPlacementChanged" HorizontalAlignment="Stretch">
-                    <ComboBoxItem Content="Top" />
-                    <ComboBoxItem Content="Bottom" />
-                    <ComboBoxItem Content="Left" />
-                    <ComboBoxItem Content="Right" />
-                </ComboBox>
-
-                <Separator />
-
-                <TextBlock Text="Status" FontWeight="SemiBold" FontSize="14" />
-                <TextBlock Name="StatusText"
-                           Text="3 tabs | Selected: Home (0)"
-                           Opacity="0.7"
-                           TextWrapping="Wrap" />
-            </StackPanel>
-        </ScrollViewer>
-
-        <Border DockPanel.Dock="Right" Width="1" Background="{DynamicResource SemiColorBackground0}" />
-
-        <Border Margin="12"
-                BorderBrush="{DynamicResource SemiColorBorder}"
-                BorderThickness="1"
-                CornerRadius="6"
-                ClipToBounds="True">
-            <TabbedPage Name="DemoTabs"
-                        TabPlacement="Top"
-                        SelectionChanged="OnSelectionChanged">
-                <ContentPage Header="Home">
-                    <StackPanel Margin="16" Spacing="8">
-                        <TextBlock Text="Home Tab" FontSize="24" FontWeight="Bold" />
-                        <TextBlock Text="Welcome to the Home tab. This is a TabbedPage sample."
-                                   TextWrapping="Wrap" />
-                        <TextBlock Text="Use the panel on the right to add or remove tabs dynamically."
-                                   TextWrapping="Wrap" Opacity="0.7" />
-                    </StackPanel>
-                </ContentPage>
-                <ContentPage Header="Search">
-                    <StackPanel Margin="16" Spacing="8">
-                        <TextBlock Text="Search Tab" FontSize="24" FontWeight="Bold" />
-                        <TextBox PlaceholderText="Type to search..." />
-                        <TextBlock Text="Search results will appear here." Opacity="0.7" />
-                    </StackPanel>
-                </ContentPage>
-                <ContentPage Header="Settings">
-                    <StackPanel Margin="16" Spacing="8">
-                        <TextBlock Text="Settings Tab" FontSize="24" FontWeight="Bold" />
-                        <CheckBox Content="Enable notifications" />
-                        <CheckBox Content="Dark mode" />
-                        <CheckBox Content="Auto-save" IsChecked="True" />
-                    </StackPanel>
-                </ContentPage>
-            </TabbedPage>
-        </Border>
-    </DockPanel>
-</UserControl>

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

@@ -1,84 +0,0 @@
-using System.Collections;
-using Avalonia;
-using Avalonia.Controls;
-using Avalonia.Interactivity;
-using Avalonia.Media;
-
-namespace Semi.Avalonia.Demo.Pages;
-
-public partial class TabbedPageDemo : UserControl
-{
-    private int _tabCounter = 3;
-
-    public TabbedPageDemo()
-    {
-        InitializeComponent();
-    }
-
-    private void OnAddTab(object? sender, RoutedEventArgs e)
-    {
-        var idx = ++_tabCounter;
-        var page = new ContentPage
-        {
-            Header = $"Tab {idx}",
-            Content = new StackPanel
-            {
-                Margin = new Thickness(16),
-                Spacing = 8,
-                Children =
-                {
-                    new TextBlock
-                    {
-                        Text = $"Tab {idx}",
-                        FontSize = 24,
-                        FontWeight = FontWeight.Bold,
-                    },
-                    new TextBlock
-                    {
-                        Text = $"This tab was added dynamically (tab #{idx}).",
-                        Opacity = 0.7,
-                        TextWrapping = TextWrapping.Wrap,
-                    }
-                }
-            }
-        };
-
-        ((IList)DemoTabs.Pages!).Add(page);
-        UpdateStatus();
-    }
-
-    private void OnRemoveTab(object? sender, RoutedEventArgs e)
-    {
-        var pages = (IList)DemoTabs.Pages!;
-        if (pages.Count > 1)
-        {
-            pages.RemoveAt(pages.Count - 1);
-            UpdateStatus();
-        }
-    }
-
-    private void OnPlacementChanged(object? sender, SelectionChangedEventArgs e)
-    {
-        if (DemoTabs == null) return;
-        DemoTabs.TabPlacement = PlacementCombo.SelectedIndex switch
-        {
-            1 => TabPlacement.Bottom,
-            2 => TabPlacement.Left,
-            3 => TabPlacement.Right,
-            _ => TabPlacement.Top
-        };
-    }
-
-    private void OnSelectionChanged(object? sender, PageSelectionChangedEventArgs e)
-    {
-        UpdateStatus();
-    }
-
-    private void UpdateStatus()
-    {
-        if (StatusText == null) return;
-        var pages = (IList)DemoTabs.Pages!;
-        var pageName = (DemoTabs.SelectedPage as ContentPage)?.Header?.ToString() ?? "—";
-        StatusText.Text = $"{pages.Count} tab{(pages.Count != 1 ? "s" : "")} | Selected: {pageName} ({DemoTabs.SelectedIndex})";
-    }
-}

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

@@ -1,103 +0,0 @@
-<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"
-             xmlns:vm="clr-namespace:Semi.Avalonia.Demo.ViewModels"
-             xmlns:pages="clr-namespace:Semi.Avalonia.Demo.Pages"
-             mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
-             x:Class="Semi.Avalonia.Demo.Pages.VariablesDemo"
-             x:DataType="vm:VariablesDemoViewModel">
-    <Design.DataContext>
-        <vm:VariablesDemoViewModel />
-    </Design.DataContext>
-    <Grid RowDefinitions="Auto, *">
-        <TextBox
-            Grid.Row="0"
-            Width="600"
-            Margin="8"
-            Classes="ClearButton"
-            Text="{Binding SearchText}"
-            PlaceholderText="Input Variable Category/ResourceKey/Type/Value/Description" />
-
-        <DataGrid
-            Grid.Row="1"
-            Margin="8"
-            CanUserReorderColumns="True"
-            CanUserResizeColumns="True"
-            CanUserSortColumns="True"
-            HeadersVisibility="All"
-            IsReadOnly="True"
-            ItemsSource="{Binding GridData}">
-            <DataGrid.Columns>
-                <DataGridTemplateColumn
-                    Width="300"
-                    x:DataType="vm:VariableItem"
-                    Header="ResourceKey">
-                    <DataGridTemplateColumn.CellTemplate>
-                        <DataTemplate DataType="vm:VariableItem">
-                            <SelectableTextBlock
-                                Margin="12,0"
-                                VerticalAlignment="Center"
-                                Text="{Binding ResourceKey}" />
-                        </DataTemplate>
-                    </DataGridTemplateColumn.CellTemplate>
-                </DataGridTemplateColumn>
-                <DataGridTemplateColumn
-                    Width="200"
-                    x:DataType="vm:VariableItem"
-                    Header="Type">
-                    <DataGridTemplateColumn.CellTemplate>
-                        <DataTemplate DataType="vm:VariableItem">
-                            <SelectableTextBlock
-                                Margin="12,0"
-                                VerticalAlignment="Center"
-                                Text="{Binding Type.Name}" />
-                        </DataTemplate>
-                    </DataGridTemplateColumn.CellTemplate>
-                </DataGridTemplateColumn>
-                <DataGridTemplateColumn
-                    Width="200"
-                    x:DataType="vm:VariableItem"
-                    Header="Value">
-                    <DataGridTemplateColumn.CellTemplate>
-                        <DataTemplate DataType="vm:VariableItem">
-                            <SelectableTextBlock
-                                Margin="12,0"
-                                VerticalAlignment="Center"
-                                Text="{Binding Value}"
-                                TextWrapping="Wrap" />
-                        </DataTemplate>
-                    </DataGridTemplateColumn.CellTemplate>
-                </DataGridTemplateColumn>
-                <DataGridTemplateColumn
-                    Width="*"
-                    x:DataType="vm:VariableItem"
-                    Header="Description">
-                    <DataGridTemplateColumn.CellTemplate>
-                        <DataTemplate DataType="vm:VariableItem">
-                            <SelectableTextBlock
-                                Margin="12,0"
-                                VerticalAlignment="Center"
-                                Text="{Binding Description}"
-                                TextWrapping="Wrap" />
-                        </DataTemplate>
-                    </DataGridTemplateColumn.CellTemplate>
-                </DataGridTemplateColumn>
-                <DataGridTemplateColumn
-                    Width="100"
-                    x:DataType="vm:VariableItem"
-                    Header="CopyText">
-                    <DataGridTemplateColumn.CellTemplate>
-                        <DataTemplate DataType="vm:VariableItem">
-                            <Button
-                                Command="{Binding $parent[pages:VariablesDemo].Copy}"
-                                CommandParameter="{Binding CopyText}"
-                                Theme="{DynamicResource  IconBorderlessButton}"
-                                Content="{StaticResource SemiIconCopy}" />
-                        </DataTemplate>
-                    </DataGridTemplateColumn.CellTemplate>
-                </DataGridTemplateColumn>
-            </DataGrid.Columns>
-        </DataGrid>
-    </Grid>
-</UserControl>

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

@@ -1,25 +0,0 @@
-using System.Threading.Tasks;
-using Avalonia.Controls;
-using Avalonia.Input.Platform;
-using Semi.Avalonia.Demo.ViewModels;
-
-namespace Semi.Avalonia.Demo.Pages;
-
-public partial class VariablesDemo : UserControl
-{
-    public VariablesDemo()
-    {
-        InitializeComponent();
-        this.DataContext = new VariablesDemoViewModel();
-    }
-
-    public async Task Copy(object? o)
-    {
-        if (o is null) return;
-        var toplevel = TopLevel.GetTopLevel(this);
-        if (toplevel?.Clipboard is { } c)
-        {
-            await c.SetTextAsync(o.ToString());
-        }
-    }
-}

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

@@ -1,31 +0,0 @@
-<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.WindowCustomizationsPage">
-
-    <StackPanel
-        Spacing="10"
-        IsEnabled="{OnFormFactor False, Desktop=True}">
-        <TextBlock Classes="H2" Text="Desktop properties" />
-
-        <CheckBox Content="Extend Client Area to Decorations"
-                  IsChecked="{Binding $parent[Window].ExtendClientAreaToDecorationsHint}" />
-
-        <Slider IsEnabled="{Binding $parent[Window].ExtendClientAreaToDecorationsHint}"
-                HorizontalAlignment="Left"
-                Width="201" Minimum="-1" Maximum="200"
-                Value="{Binding $parent[Window].ExtendClientAreaTitleBarHeightHint}" />
-
-        <CheckBox Content="Can Resize"
-                  IsChecked="{Binding $parent[Window].CanResize}" />
-
-        <CheckBox Content="Can Minimize"
-                  IsChecked="{Binding $parent[Window].CanMinimize}" />
-
-        <CheckBox Content="Can Maximize"
-                  IsChecked="{Binding $parent[Window].CanMaximize}"
-                  IsEnabled="{Binding $parent[Window].CanResize}" />
-    </StackPanel>
-</UserControl>

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

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

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

@@ -3,6 +3,7 @@
         <TargetFramework>net8.0</TargetFramework>
         <Nullable>enable</Nullable>
         <LangVersion>latest</LangVersion>
+        <AvaloniaUseCompiledBindingsByDefault>true</AvaloniaUseCompiledBindingsByDefault>
     </PropertyGroup>
 
     <ItemGroup>
@@ -12,19 +13,23 @@
     <ItemGroup>
         <PackageReference Include="Avalonia"/>
         <PackageReference Include="Avalonia.Controls.ColorPicker"/>
-        <PackageReference Include="Avalonia.Controls.DataGrid"/>
-        <!--Condition below is needed to remove AvaloniaUI.DiagnosticsSupport package from build output in Release configuration.-->
-        <PackageReference Include="AvaloniaUI.DiagnosticsSupport">
-            <IncludeAssets Condition="'$(Configuration)' != 'Debug'">None</IncludeAssets>
-            <PrivateAssets Condition="'$(Configuration)' != 'Debug'">All</PrivateAssets>
-        </PackageReference>
+<!--        <PackageReference Include="Avalonia.Controls.DataGrid"/>-->
+        <!--Condition below is needed to remove Avalonia.Diagnostics package from build output in Release configuration.-->
+<!--        <PackageReference Include="Avalonia.Diagnostics">-->
+<!--            <IncludeAssets Condition="'$(Configuration)' != 'Debug'">None</IncludeAssets>-->
+<!--            <PrivateAssets Condition="'$(Configuration)' != 'Debug'">All</PrivateAssets>-->
+<!--        </PackageReference>-->
         <PackageReference Include="CommunityToolkit.Mvvm"/>
     </ItemGroup>
 
     <ItemGroup>
         <ProjectReference Include="..\..\src\Semi.Avalonia\Semi.Avalonia.csproj"/>
         <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.DataGrid\Semi.Avalonia.DataGrid.csproj"/>-->
 <!--        <ProjectReference Include="..\..\src\Semi.Avalonia.TreeDataGrid\Semi.Avalonia.TreeDataGrid.csproj"/>-->
     </ItemGroup>
+
+    <ItemGroup>
+      <AvaloniaXaml Remove="Pages\VariablesDemo.axaml" />
+    </ItemGroup>
 </Project>

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

@@ -1,152 +0,0 @@
-<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"
-    xmlns:pages="clr-namespace:Semi.Avalonia.Demo.Pages"
-    x:DataType="viewModels:FunctionalColorGroupViewModel">
-    <ControlTheme x:Key="{x:Type controls:FunctionalColorGroupControl}" TargetType="controls:FunctionalColorGroupControl">
-        <Setter Property="Template">
-            <ControlTemplate TargetType="controls:FunctionalColorGroupControl">
-                <Grid RowDefinitions="Auto, *">
-                    <SelectableTextBlock
-                        Grid.Row="0"
-                        Margin="0,16,0,0"
-                        Classes="H3"
-                        Text="{TemplateBinding Title}"
-                        Theme="{DynamicResource TitleSelectableTextBlock}" />
-                    <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="300" Header="ResourceKey">
-                                        <DataGridTemplateColumn.CellTemplate>
-                                            <DataTemplate DataType="viewModels:ColorItemViewModel">
-                                                <SelectableTextBlock
-                                                    Margin="12,0"
-                                                    VerticalAlignment="Center"
-                                                    Text="{Binding ResourceKey}" />
-                                            </DataTemplate>
-                                        </DataGridTemplateColumn.CellTemplate>
-                                    </DataGridTemplateColumn>
-                                    <DataGridTemplateColumn Width="100" Header="Hex">
-                                        <DataGridTemplateColumn.CellTemplate>
-                                            <DataTemplate DataType="viewModels:ColorItemViewModel">
-                                                <SelectableTextBlock
-                                                    Margin="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"
-                                                    VerticalAlignment="Center"
-                                                    Text="{Binding Brush.Opacity}" />
-                                            </DataTemplate>
-                                        </DataGridTemplateColumn.CellTemplate>
-                                    </DataGridTemplateColumn>
-                                    <DataGridTextColumn
-                                        Width="*"
-                                        x:DataType="viewModels:ColorItemViewModel"
-                                        Binding="{Binding ColorDisplayName}"
-                                        CanUserSort="False"
-                                        Header="Description" />
-                                    <DataGridTemplateColumn Width="100" Header="CopyText">
-                                        <DataGridTemplateColumn.CellTemplate>
-                                            <DataTemplate DataType="viewModels:ColorItemViewModel">
-                                                <Button
-                                                    Command="{Binding $parent[pages:PaletteDemo].Copy}"
-                                                    CommandParameter="{Binding CopyText}"
-                                                    Theme="{DynamicResource  IconBorderlessButton}"
-                                                    Content="{StaticResource SemiIconCopy}" />
-                                            </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="300" Header="ResourceKey">
-                                        <DataGridTemplateColumn.CellTemplate>
-                                            <DataTemplate DataType="viewModels:ColorItemViewModel">
-                                                <SelectableTextBlock
-                                                    Margin="12,0"
-                                                    VerticalAlignment="Center"
-                                                    Text="{Binding ResourceKey}" />
-                                            </DataTemplate>
-                                        </DataGridTemplateColumn.CellTemplate>
-                                    </DataGridTemplateColumn>
-                                    <DataGridTemplateColumn Width="100" Header="Hex">
-                                        <DataGridTemplateColumn.CellTemplate>
-                                            <DataTemplate DataType="viewModels:ColorItemViewModel">
-                                                <SelectableTextBlock
-                                                    Margin="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"
-                                                    VerticalAlignment="Center"
-                                                    Text="{Binding Brush.Opacity}" />
-                                            </DataTemplate>
-                                        </DataGridTemplateColumn.CellTemplate>
-                                    </DataGridTemplateColumn>
-                                    <DataGridTextColumn
-                                        Width="*"
-                                        x:DataType="viewModels:ColorItemViewModel"
-                                        Binding="{Binding ColorDisplayName}"
-                                        CanUserSort="False"
-                                        Header="Description" />
-                                    <DataGridTemplateColumn Width="100" Header="CopyText">
-                                        <DataGridTemplateColumn.CellTemplate>
-                                            <DataTemplate DataType="viewModels:ColorItemViewModel">
-                                                <Button
-                                                    Command="{Binding $parent[pages:PaletteDemo].Copy}"
-                                                    CommandParameter="{Binding CopyText}"
-                                                    Theme="{DynamicResource  IconBorderlessButton}"
-                                                    Content="{StaticResource SemiIconCopy}" />
-                                            </DataTemplate>
-                                        </DataGridTemplateColumn.CellTemplate>
-                                    </DataGridTemplateColumn>
-                                </DataGrid.Columns>
-                            </DataGrid>
-                        </TabItem>
-                    </TabControl>
-                </Grid>
-            </ControlTemplate>
-        </Setter>
-    </ControlTheme>
-</ResourceDictionary>

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

@@ -1,110 +0,0 @@
-<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"
-    xmlns:pages="clr-namespace:Semi.Avalonia.Demo.Pages"
-    x:DataType="viewModels:ShadowGroupViewModel">
-    <ControlTheme x:Key="{x:Type controls:ShadowGroupControl}" TargetType="controls:ShadowGroupControl">
-        <Setter Property="Template">
-            <ControlTemplate TargetType="controls:ShadowGroupControl">
-                <Grid RowDefinitions="Auto, *">
-                    <SelectableTextBlock
-                        Grid.Row="0"
-                        Margin="0,16,0,0"
-                        Classes="H3"
-                        Text="{TemplateBinding Title}"
-                        Theme="{DynamicResource TitleSelectableTextBlock}" />
-                    <TabControl Grid.Row="1">
-                        <TabItem Header="Light">
-                            <DataGrid IsReadOnly="True" ItemsSource="{TemplateBinding LightShadows}">
-                                <DataGrid.Columns>
-                                    <DataGridTemplateColumn Width="300" Header="ResourceKey">
-                                        <DataGridTemplateColumn.CellTemplate>
-                                            <DataTemplate DataType="viewModels:ShadowItemViewModel">
-                                                <SelectableTextBlock
-                                                    Margin="12,0"
-                                                    VerticalAlignment="Center"
-                                                    Text="{Binding ResourceKey}" />
-                                            </DataTemplate>
-                                        </DataGridTemplateColumn.CellTemplate>
-                                    </DataGridTemplateColumn>
-                                    <DataGridTemplateColumn Width="300" Header="BoxShadows">
-                                        <DataGridTemplateColumn.CellTemplate>
-                                            <DataTemplate DataType="viewModels:ShadowItemViewModel">
-                                                <SelectableTextBlock
-                                                    Margin="12,0"
-                                                    VerticalAlignment="Center"
-                                                    Text="{Binding BoxShadowValue}" />
-                                            </DataTemplate>
-                                        </DataGridTemplateColumn.CellTemplate>
-                                    </DataGridTemplateColumn>
-                                    <DataGridTextColumn
-                                        Width="*"
-                                        x:DataType="viewModels:ShadowItemViewModel"
-                                        Binding="{Binding ShadowDisplayName}"
-                                        CanUserSort="False"
-                                        Header="Description" />
-                                    <DataGridTemplateColumn Width="100" Header="CopyText">
-                                        <DataGridTemplateColumn.CellTemplate>
-                                            <DataTemplate DataType="viewModels:ShadowItemViewModel">
-                                                <Button
-                                                    Command="{Binding $parent[pages:PaletteDemo].Copy}"
-                                                    CommandParameter="{Binding CopyText}"
-                                                    Theme="{DynamicResource  IconBorderlessButton}"
-                                                    Content="{StaticResource SemiIconCopy}" />
-                                            </DataTemplate>
-                                        </DataGridTemplateColumn.CellTemplate>
-                                    </DataGridTemplateColumn>
-                                </DataGrid.Columns>
-                            </DataGrid>
-                        </TabItem>
-                        <TabItem Header="Dark">
-                            <DataGrid IsReadOnly="True" ItemsSource="{TemplateBinding DarkShadows}">
-                                <DataGrid.Columns>
-                                    <DataGridTemplateColumn Width="300" Header="ResourceKey">
-                                        <DataGridTemplateColumn.CellTemplate>
-                                            <DataTemplate DataType="viewModels:ShadowItemViewModel">
-                                                <SelectableTextBlock
-                                                    Margin="12,0"
-                                                    VerticalAlignment="Center"
-                                                    Text="{Binding ResourceKey}" />
-                                            </DataTemplate>
-                                        </DataGridTemplateColumn.CellTemplate>
-                                    </DataGridTemplateColumn>
-                                    <DataGridTemplateColumn Width="300" Header="BoxShadows">
-                                        <DataGridTemplateColumn.CellTemplate>
-                                            <DataTemplate DataType="viewModels:ShadowItemViewModel">
-                                                <SelectableTextBlock
-                                                    Margin="12,0"
-                                                    VerticalAlignment="Center"
-                                                    Text="{Binding BoxShadowValue}" />
-                                            </DataTemplate>
-                                        </DataGridTemplateColumn.CellTemplate>
-                                    </DataGridTemplateColumn>
-                                    <DataGridTextColumn
-                                        Width="*"
-                                        x:DataType="viewModels:ShadowItemViewModel"
-                                        Binding="{Binding ShadowDisplayName}"
-                                        CanUserSort="False"
-                                        Header="Description" />
-                                    <DataGridTemplateColumn Width="100" Header="CopyText">
-                                        <DataGridTemplateColumn.CellTemplate>
-                                            <DataTemplate DataType="viewModels:ShadowItemViewModel">
-                                                <Button
-                                                    Command="{Binding $parent[pages:PaletteDemo].Copy}"
-                                                    CommandParameter="{Binding CopyText}"
-                                                    Theme="{DynamicResource  IconBorderlessButton}"
-                                                    Content="{StaticResource SemiIconCopy}" />
-                                            </DataTemplate>
-                                        </DataGridTemplateColumn.CellTemplate>
-                                    </DataGridTemplateColumn>
-                                </DataGrid.Columns>
-                            </DataGrid>
-                        </TabItem>
-                    </TabControl>
-                </Grid>
-            </ControlTemplate>
-        </Setter>
-    </ControlTheme>
-</ResourceDictionary>

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

@@ -2,8 +2,6 @@
     <ResourceDictionary.MergedDictionaries>
         <ResourceInclude Source="ColorDetailControl.axaml" />
         <ResourceInclude Source="ColorItemControl.axaml" />
-        <ResourceInclude Source="FunctionalColorGroupControl.axaml" />
-        <ResourceInclude Source="ShadowGroupControl.axaml" />
         <ResourceInclude Source="ToggleSwitch.axaml" />
     </ResourceDictionary.MergedDictionaries>
 </ResourceDictionary>

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

@@ -1,154 +0,0 @@
-using System;
-using System.Collections.Generic;
-using System.Collections.ObjectModel;
-using System.Linq;
-using Avalonia.Collections;
-using CommunityToolkit.Mvvm.ComponentModel;
-using CommunityToolkit.Mvvm.Input;
-
-namespace Semi.Avalonia.Demo.ViewModels;
-
-public class DataGridDemoViewModel : ObservableObject
-{
-    public ObservableCollection<Song> GridData1 { get; set; }
-
-    public DataGridCollectionView GridData2 { get; set; }
-
-    public ObservableCollection<SongViewModel> GridData3 { get; set; }
-
-    public RelayCommand AddCommand { get; set; }
-
-    public DataGridDemoViewModel()
-    {
-        GridData1 = new ObservableCollection<Song>(Song.Songs);
-        GridData2 = new DataGridCollectionView(Song.Songs);
-        GridData2.GroupDescriptions.Add(new DataGridPathGroupDescription("Album"));
-        GridData3 = new ObservableCollection<SongViewModel>(Song.Songs.Take(10).Select(a => new SongViewModel()
-        {
-            Title = a.Title,
-            Artist = a.Artist,
-            Album = a.Album,
-            CountOfComment = a.CountOfComment,
-            IsSelected = false
-        }));
-        AddCommand = new RelayCommand(Add);
-    }
-
-    private void Add()
-    {
-        GridData3.Add(new SongViewModel());
-    }
-}
-
-public class Song
-{
-    public string? Title { get; set; }
-    public string? Artist { get; set; }
-    public TimeSpan? Duration { get; set; }
-    public string? Album { get; set; }
-    public int CountOfComment { get; set; }
-    public string Url { get; set; }
-
-    public Song(string title, string artist, int m, int s, string album, int countOfComment, int netEaseId)
-    {
-        Title = title;
-        Artist = artist;
-        Duration = new TimeSpan(0, m, s);
-        Album = album;
-        CountOfComment = countOfComment;
-        Url = $"https://music.163.com/song?id={netEaseId}";
-    }
-
-    public static List<string> Albums =>
-    [
-        "A.S.I.A",
-        "饕餮人间",
-        "七步咙咚呛",
-        "大惊小怪",
-        "The ONE",
-        "以梦为马 (壮志骄阳版)",
-        "emo了",
-        "一眼万年",
-        "冲刺吧",
-        "爱的赏味期限",
-        "COSMIC ANTHEM / 手紙",
-        "世界晚安",
-        "明年也要好好长大",
-        "320万年前",
-        "W.O.R.L.D."
-    ];
-
-    public static List<Song> Songs =>
-    [
-        new("好肚有肚(feat.李玲玉)", "熊猫堂ProducePandas", 2, 50, "A.S.I.A", 730, 1487039339),
-        new("荒诞秀", "熊猫堂ProducePandas", 3, 15, "A.S.I.A", 639, 1487037601),
-        new("长大", "熊猫堂ProducePandas", 4, 6, "A.S.I.A", 1114, 1487037690),
-        new("招财猫(feat.纪粹希(G-Tracy))", "熊猫堂ProducePandas", 3, 37, "A.S.I.A", 361, 1487039632),
-        new("千转", "熊猫堂ProducePandas", 4, 0, "A.S.I.A", 1115, 1477312398),
-        new("辣辣辣", "熊猫堂ProducePandas", 3, 24, "A.S.I.A", 1873, 1465043716),
-        new("碎碎念", "熊猫堂ProducePandas", 3, 25, "A.S.I.A", 676, 1474142064),
-        new("盘他", "熊猫堂ProducePandas", 2, 16, "A.S.I.A", 365, 1481652786),
-        new("Na Na Na", "熊猫堂ProducePandas", 3, 26, "A.S.I.A", 312, 1469022662),
-        new("Indigo", "熊猫堂ProducePandas", 3, 15, "A.S.I.A", 137, 1487039517),
-        new("饕餮人间", "熊猫堂ProducePandas", 3, 20, "饕餮人间", 1295, 1499584605),
-        new("七步咙咚呛", "熊猫堂ProducePandas", 3, 10, "七步咙咚呛", 175, 1809095152),
-        new("大惊小怪", "熊猫堂ProducePandas", 3, 32, "大惊小怪", 10420, 1847477425),
-        new("工具人", "熊猫堂ProducePandas", 2, 46, "大惊小怪", 1135, 1847476499),
-        new("以梦为马", "熊猫堂ProducePandas", 4, 19, "大惊小怪", 18361, 1836034373),
-        new("以梦为马(Piano Version)", "熊猫堂ProducePandas", 3, 4, "大惊小怪", 570, 1847477423),
-        new("The ONE", "熊猫堂ProducePandas", 2, 58, "The ONE", 1508, 1864329424),
-        new("The ONE(日文版)", "熊猫堂ProducePandas", 2, 57, "The ONE", 385, 1864329429),
-        new("以梦为马 (壮志骄阳版)", "熊猫堂ProducePandas", 4, 19, "以梦为马 (壮志骄阳版)", 161, 1865138896),
-        new("New Horse", "熊猫堂ProducePandas", 2, 30, "emo了", 643, 1887021307),
-        new("不例外", "熊猫堂ProducePandas", 3, 31, "emo了", 1818, 1887022665),
-        new("满意", "熊猫堂ProducePandas", 4, 32, "emo了", 1081, 1882433472),
-        new("就算与全世界为敌也要跟你在一起", "熊猫堂ProducePandas", 3, 32, "emo了", 2119, 1881759960),
-        new("The ONE", "熊猫堂ProducePandas", 2, 58, "emo了", 67, 1887022648),
-        new("口香糖", "熊猫堂ProducePandas", 3, 10, "emo了", 2181, 1885502254),
-        new("Suuuuuuper Mario", "熊猫堂ProducePandas", 3, 32, "emo了", 1010, 1887021318),
-        new("饕餮人间", "熊猫堂ProducePandas", 3, 22, "emo了", 109, 1887021320),
-        new("以梦为马 (壮志骄阳版)", "熊猫堂ProducePandas", 4, 21, "emo了", 34, 1887022666),
-        new("The ONE(日文版)", "熊猫堂ProducePandas", 2, 57, "emo了", 27, 1887022646),
-        new("满意(DJheap九天版)", "熊猫堂ProducePandas", 4, 31, "emo了", 31, 1901605941),
-        new("一眼万年", "熊猫堂ProducePandas", 3, 54, "一眼万年", 20, 1922599361),
-        new("冲刺", "熊猫堂ProducePandas", 3, 49, "冲刺吧", 1006, 1932878194),
-        new("滴答滴", "熊猫堂ProducePandas", 2, 30, "爱的赏味期限", 86, 1957515790),
-        new("热带季风", "熊猫堂ProducePandas", 2, 45, "爱的赏味期限", 212, 1957514964),
-        new("渣", "熊猫堂ProducePandas", 3, 28, "爱的赏味期限", 22, 1957514965),
-        new("独特", "熊猫堂ProducePandas", 3, 33, "爱的赏味期限", 62, 1957514966),
-        new("雨后", "熊猫堂ProducePandas", 4, 15, "爱的赏味期限", 23, 1957514967),
-        new("然后然后", "熊猫堂ProducePandas", 3, 50, "爱的赏味期限", 108, 1957514968),
-        new("丢", "熊猫堂ProducePandas", 3, 26, "爱的赏味期限", 30, 1957515792),
-        new("热带疾风(FACEVOID桃心连哥 Remix)", "熊猫堂ProducePandas", 3, 23, "爱的赏味期限", 55, 1957515793),
-        new("COSMIC ANTHEM -Japanese Ver.-", "熊猫堂ProducePandas", 3, 11, "COSMIC ANTHEM / 手紙", 0, 1977171493),
-        new("手紙 (「長大-You Raise Me Up-」-Japanese Ver.-)", "熊猫堂ProducePandas", 4, 11, "COSMIC ANTHEM / 手紙", 0,
-            1977171494),
-        new("COSMIC ANTHEM -Chinese Ver.-", "熊猫堂ProducePandas", 3, 31, "COSMIC ANTHEM / 手紙", 0, 1977172202),
-        new("世界晚安", "熊猫堂ProducePandas", 2, 59, "世界晚安", 652, 1985063377),
-        new("世界晚安(泰文版)", "熊猫堂ProducePandas", 2, 59, "世界晚安", 134, 1987842504),
-        new("世界晚安(钢琴版)", "熊猫堂ProducePandas", 3, 2, "世界晚安", 76, 1990475933),
-        new("世界晚安(泰文钢琴版)", "熊猫堂ProducePandas", 3, 2, "世界晚安", 29, 1990475934),
-        new("世界晚安(DJ沈念版)", "熊猫堂ProducePandas", 3, 9, "世界晚安", 34, 2014263184),
-        new("世界晚安(钢琴配乐)", "熊猫堂ProducePandas", 2, 59, "世界晚安", 11, 2014263185),
-        new("明年也要好好长大", "熊猫堂ProducePandas", 3, 12, "明年也要好好长大", 0, 2010515162),
-        new("320万年前（DJ沈念版）", "熊猫堂ProducePandas", 3, 21, "320万年前", 8, 2055888636),
-        new("320万年前", "熊猫堂ProducePandas", 3, 7, "W.O.R.L.D.", 329, 2049770469),
-        new("隐德来希", "熊猫堂ProducePandas", 3, 3, "W.O.R.L.D.", 594, 2061317924),
-        new("孔明", "熊猫堂ProducePandas", 3, 59, "W.O.R.L.D.", 91, 2063175274),
-        new("锦鲤卟噜噜", "熊猫堂ProducePandas", 3, 5, "W.O.R.L.D.", 67, 2059208262),
-        new("指鹿为马", "熊猫堂ProducePandas", 3, 12, "W.O.R.L.D.", 74, 2063175272),
-        new("热带季风Remix", "熊猫堂ProducePandas", 3, 22, "W.O.R.L.D.", 23, 2063173319),
-        new("加州梦境", "熊猫堂ProducePandas", 2, 56, "W.O.R.L.D.", 1662, 2063173324),
-        new("渐近自由", "熊猫堂ProducePandas", 4, 19, "W.O.R.L.D.", 124, 2063173321),
-        new("世界所有的烂漫", "熊猫堂ProducePandas", 3, 30, "W.O.R.L.D.", 335, 2053388775)
-    ];
-}
-
-public partial class SongViewModel : ObservableObject
-{
-    [ObservableProperty] private string? _title;
-    [ObservableProperty] private string? _artist;
-    [ObservableProperty] private string? _album;
-    [ObservableProperty] private int _countOfComment;
-    [ObservableProperty] private bool? _isSelected;
-}

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

@@ -1,151 +0,0 @@
-using System;
-using System.Collections.Generic;
-using System.Globalization;
-using Avalonia;
-using Avalonia.Collections;
-using Avalonia.Controls;
-using Avalonia.Media;
-using CommunityToolkit.Mvvm.ComponentModel;
-using Semi.Avalonia.Tokens;
-
-namespace Semi.Avalonia.Demo.ViewModels;
-
-public partial class VariablesDemoViewModel : ObservableObject
-{
-    public DataGridCollectionView GridData { get; set; }
-    [ObservableProperty] private string _searchText = string.Empty;
-
-    public VariablesDemoViewModel()
-    {
-        IResourceDictionary dictionary = new Variables();
-        foreach (var token in Tokens)
-        {
-            if (token.ResourceKey is not null && dictionary.TryGetValue(token.ResourceKey, out var value))
-            {
-                token.Type = value?.GetType();
-                token.Value = GetValueString(value);
-            }
-        }
-
-        GridData = new DataGridCollectionView(Tokens);
-        GridData.GroupDescriptions.Add(new DataGridPathGroupDescription(nameof(VariableItem.Category)));
-    }
-
-    private static string? GetValueString(object? value)
-    {
-        if (value is null) return string.Empty;
-
-        return value switch
-        {
-            double d => d.ToString(CultureInfo.InvariantCulture),
-            CornerRadius c => c.IsUniform ? $"{c.TopLeft}" : c.ToString(),
-            Thickness t => t.IsUniform ? $"{t.Left}" : t.ToString(),
-            FontWeight fontWeight => Convert.ToInt32(fontWeight).ToString(),
-            FontFamily fontFamily => fontFamily.FamilyNames.ToString(),
-            _ => value.ToString()
-        };
-    }
-
-    partial void OnSearchTextChanged(string value)
-    {
-        if (string.IsNullOrWhiteSpace(value))
-        {
-            GridData.Filter = _ => true;
-            GridData.Refresh();
-            return;
-        }
-
-        var search = value.Trim();
-        GridData.Filter = item =>
-        {
-            if (item is not VariableItem variableItem) return false;
-            return (variableItem.Category?.Contains(search, StringComparison.InvariantCultureIgnoreCase) ?? false) ||
-                   (variableItem.ResourceKey?.Contains(search, StringComparison.InvariantCultureIgnoreCase) ?? false) ||
-                   (variableItem.Value?.Contains(search, StringComparison.InvariantCultureIgnoreCase) ?? false) ||
-                   (variableItem.Type?.Name.Contains(search, StringComparison.InvariantCultureIgnoreCase) ?? false) ||
-                   (variableItem.Description?.Contains(search, StringComparison.InvariantCultureIgnoreCase) ?? false);
-        };
-        GridData.Refresh();
-    }
-
-    private static List<VariableItem> Tokens { get; set; } =
-    [
-        new("Height", "SemiHeightControlSmall"),
-        new("Height", "SemiHeightControlDefault"),
-        new("Height", "SemiHeightControlLarge"),
-        new("Icon Size", "SemiWidthIconExtraSmall"),
-        new("Icon Size", "SemiWidthIconSmall"),
-        new("Icon Size", "SemiWidthIconMedium"),
-        new("Icon Size", "SemiWidthIconLarge"),
-        new("Icon Size", "SemiWidthIconExtraLarge"),
-        new("Border CornerRadius Spacing", "SemiBorderRadiusSpacingExtraSmall"),
-        new("Border CornerRadius Spacing", "SemiBorderRadiusSpacingSmall"),
-        new("Border CornerRadius Spacing", "SemiBorderRadiusSpacingMedium"),
-        new("Border CornerRadius Spacing", "SemiBorderRadiusSpacingLarge"),
-        new("Border CornerRadius Spacing", "SemiBorderRadiusSpacingFull"),
-        new("Border CornerRadius", "SemiBorderRadiusExtraSmall"),
-        new("Border CornerRadius", "SemiBorderRadiusSmall"),
-        new("Border CornerRadius", "SemiBorderRadiusMedium"),
-        new("Border CornerRadius", "SemiBorderRadiusLarge"),
-        new("Border CornerRadius", "SemiBorderRadiusFull"),
-        new("Border Spacing", "SemiBorderSpacing"),
-        new("Border Spacing", "SemiBorderSpacingControl"),
-        new("Border Spacing", "SemiBorderSpacingControlFocus"),
-        new("Border Thickness", "SemiBorderThickness"),
-        new("Border Thickness", "SemiBorderThicknessControl"),
-        new("Border Thickness", "SemiBorderThicknessControlFocus"),
-        new("Spacing", "SemiSpacingNone"),
-        new("Spacing", "SemiSpacingSuperTight"),
-        new("Spacing", "SemiSpacingExtraTight"),
-        new("Spacing", "SemiSpacingTight"),
-        new("Spacing", "SemiSpacingBaseTight"),
-        new("Spacing", "SemiSpacingBase"),
-        new("Spacing", "SemiSpacingBaseLoose"),
-        new("Spacing", "SemiSpacingLoose"),
-        new("Spacing", "SemiSpacingExtraLoose"),
-        new("Spacing", "SemiSpacingSuperLoose"),
-        new("Thickness", "SemiThicknessNone"),
-        new("Thickness", "SemiThicknessSuperTight"),
-        new("Thickness", "SemiThicknessExtraTight"),
-        new("Thickness", "SemiThicknessTight"),
-        new("Thickness", "SemiThicknessBaseTight"),
-        new("Thickness", "SemiThicknessBase"),
-        new("Thickness", "SemiThicknessBaseLoose"),
-        new("Thickness", "SemiThicknessLoose"),
-        new("Thickness", "SemiThicknessExtraLoose"),
-        new("Thickness", "SemiThicknessSuperLoose"),
-        new("FontSize", "SemiFontSizeSmall"),
-        new("FontSize", "SemiFontSizeRegular"),
-        new("FontSize", "SemiFontSizeHeader6"),
-        new("FontSize", "SemiFontSizeHeader5"),
-        new("FontSize", "SemiFontSizeHeader4"),
-        new("FontSize", "SemiFontSizeHeader3"),
-        new("FontSize", "SemiFontSizeHeader2"),
-        new("FontSize", "SemiFontSizeHeader1"),
-        new("FontWeight", "SemiFontWeightLight"),
-        new("FontWeight", "SemiFontWeightRegular"),
-        new("FontWeight", "SemiFontWeightBold"),
-        new("FontFamily", "SemiFontFamilyRegular"),
-    ];
-}
-
-public class VariableItem()
-{
-    public string? Category { get; set; }
-    public string? ResourceKey { get; set; }
-    public Type? Type { get; set; }
-    public string? Value { get; set; }
-    public string? Description { get; set; }
-
-    public VariableItem(string category, string resourceKey, string description = "") : this()
-    {
-        Category = category;
-        ResourceKey = resourceKey;
-        Description = description;
-    }
-
-    public string CopyText =>
-        $"""
-         <StaticResource x:Key="" ResourceKey="{ResourceKey}" />
-         """;
-}

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

@@ -16,9 +16,9 @@
             <Setter Property="Template">
                 <ControlTemplate TargetType="TabItem">
                     <TextBlock
-                        Margin="4"
-                        FontSize="12"
                         FontWeight="Bold"
+                        FontSize="12"
+                        Margin="4"
                         Text="{TemplateBinding Header}" />
                 </ControlTemplate>
             </Setter>
@@ -37,44 +37,48 @@
                 <StackPanel Orientation="Horizontal" Spacing="8">
                     <ToggleSwitch
                         Name="ExpandButton"
-                        Content="{StaticResource SemiIconSidebar}"
-                        Theme="{DynamicResource IconBorderlessToggleSwitch}" />
+                        Theme="{DynamicResource IconBorderlessToggleSwitch}"
+                        Content="{StaticResource SemiIconSidebar}" />
                     <SelectableTextBlock
                         VerticalAlignment="Center"
                         Classes="H6"
                         Text="Semi Avalonia"
                         Theme="{DynamicResource TitleSelectableTextBlock}" />
-                    <SelectableTextBlock VerticalAlignment="Center" Text="/" />
+                    <SelectableTextBlock
+                        VerticalAlignment="Center"
+                        Text="/" />
                     <SelectableTextBlock
                         VerticalAlignment="Center"
                         Classes="Secondary"
                         Text="{ReflectionBinding #tab.SelectedItem.Header}" />
                 </StackPanel>
-                <StackPanel HorizontalAlignment="Right" Orientation="Horizontal">
+                <StackPanel Orientation="Horizontal" HorizontalAlignment="Right">
                     <Button
+                        Theme="{DynamicResource IconBorderlessButton}"
                         Command="{Binding OpenUrlCommand}"
                         CommandParameter="{Binding DocumentationUrl}"
-                        Content="{StaticResource SemiIconGlobe}"
-                        Theme="{DynamicResource IconBorderlessButton}" />
+                        Content="{StaticResource SemiIconGlobe}" />
 
                     <Button
+                        Theme="{DynamicResource IconBorderlessButton}"
                         Command="{Binding OpenUrlCommand}"
                         CommandParameter="{Binding RepoUrl}"
-                        Content="{StaticResource SemiIconGithubLogo}"
-                        Theme="{DynamicResource IconBorderlessButton}" />
+                        Content="{StaticResource SemiIconGithubLogo}" />
 
                     <ToggleSwitch
+                        Theme="{DynamicResource IconBorderlessToggleSwitch}"
                         Command="{Binding ToggleThemeCommand}"
-                        OffContent="{StaticResource SemiIconSun}"
                         OnContent="{StaticResource SemiIconMoon}"
-                        Theme="{DynamicResource IconBorderlessToggleSwitch}" />
+                        OffContent="{StaticResource SemiIconSun}" />
 
-                    <Button Content="{StaticResource SemiIconMenu}" Theme="{DynamicResource IconBorderlessButton}">
+                    <Button
+                        Theme="{DynamicResource IconBorderlessButton}"
+                        Content="{StaticResource SemiIconMenu}">
                         <Button.Flyout>
-                            <MenuFlyout ItemsSource="{Binding MenuItems}" Placement="Bottom" />
+                            <MenuFlyout Placement="Bottom" ItemsSource="{Binding MenuItems}" />
                         </Button.Flyout>
                         <Button.Styles>
-                            <Style x:DataType="views:MenuItemViewModel" Selector="MenuItem">
+                            <Style Selector="MenuItem" x:DataType="views:MenuItemViewModel">
                                 <Setter Property="Header" Value="{Binding Header}" />
                                 <Setter Property="ItemsSource" Value="{Binding Items}" />
                                 <Setter Property="Command" Value="{Binding Command}" />
@@ -90,8 +94,8 @@
             Grid.Row="1"
             Margin="8"
             Padding="20,0,0,0"
-            Classes.Dismiss="{Binding #ExpandButton.IsChecked}"
             TabStripPlacement="Left"
+            Classes.Dismiss="{Binding #ExpandButton.IsChecked}"
             Theme="{DynamicResource ScrollLineTabControl}">
             <TabControl.Styles>
                 <Style Selector=".Dismiss /template/ ScrollViewer#PART_ScrollViewer">
@@ -109,30 +113,36 @@
             <TabItem Header="About Us">
                 <pages:AboutUs />
             </TabItem>
-            <TabItem Header="Resource Browser" Theme="{DynamicResource CategoryTabItem}" />
-            <TabItem Header="Palette">
-                <pages:PaletteDemo />
-            </TabItem>
-            <TabItem Header="HighContrastTheme">
-                <pages:HighContrastDemo />
-            </TabItem>
-            <TabItem Header="Variables">
-                <pages:VariablesDemo />
-            </TabItem>
+            <TabItem
+                Theme="{DynamicResource CategoryTabItem}"
+                Header="Resource Browser" />
+            <!-- <TabItem Header="Palette"> -->
+            <!--     <pages:PaletteDemo /> -->
+            <!-- </TabItem> -->
+            <!-- <TabItem Header="HighContrastTheme"> -->
+            <!--     <pages:HighContrastDemo /> -->
+            <!-- </TabItem> -->
+            <!-- <TabItem Header="Variables"> -->
+            <!--     <pages:VariablesDemo /> -->
+            <!-- </TabItem> -->
             <TabItem Header="Icon">
                 <pages:IconDemo />
             </TabItem>
-            <TabItem Header="Separate Pack" Theme="{DynamicResource CategoryTabItem}" />
+            <TabItem
+                Theme="{DynamicResource CategoryTabItem}"
+                Header="Separate Pack" />
             <TabItem Header="ColorPicker">
                 <pages:ColorPickerDemo />
             </TabItem>
-            <TabItem Header="DataGrid">
-                <pages:DataGridDemo />
-            </TabItem>
+            <!-- <TabItem Header="DataGrid"> -->
+            <!--     <pages:DataGridDemo /> -->
+            <!-- </TabItem> -->
             <!-- <TabItem Header="TreeDataGrid"> -->
             <!--     <pages:TreeDataGridDemo /> -->
             <!-- </TabItem> -->
-            <TabItem Header="Basic" Theme="{DynamicResource CategoryTabItem}" />
+            <TabItem
+                Theme="{DynamicResource CategoryTabItem}"
+                Header="Basic" />
             <TabItem Header="TextBlock">
                 <pages:TextBlockDemo />
             </TabItem>
@@ -145,7 +155,9 @@
             <TabItem Header="PathIcon">
                 <pages:PathIconDemo />
             </TabItem>
-            <TabItem Header="Button" Theme="{DynamicResource CategoryTabItem}" />
+            <TabItem
+                Theme="{DynamicResource CategoryTabItem}"
+                Header="Button" />
             <TabItem Header="Button">
                 <pages:ButtonDemo />
             </TabItem>
@@ -161,7 +173,9 @@
             <TabItem Header="ToggleSwitch">
                 <pages:ToggleSwitchDemo />
             </TabItem>
-            <TabItem Header="Input" Theme="{DynamicResource CategoryTabItem}" />
+            <TabItem
+                Theme="{DynamicResource CategoryTabItem}"
+                Header="Input" />
             <TabItem Header="TextBox">
                 <pages:TextBoxDemo />
             </TabItem>
@@ -183,7 +197,9 @@
             <TabItem Header="ManagedFileChooser">
                 <pages:ManagedFileChooserDemo />
             </TabItem>
-            <TabItem Header="Date/Time" Theme="{DynamicResource CategoryTabItem}" />
+            <TabItem
+                Theme="{DynamicResource CategoryTabItem}"
+                Header="Date/Time" />
             <TabItem Header="Calendar">
                 <pages:CalendarDemo />
             </TabItem>
@@ -196,22 +212,9 @@
             <TabItem Header="TimePicker">
                 <pages:TimePickerDemo />
             </TabItem>
-            <TabItem Header="Navigation" Theme="{DynamicResource CategoryTabItem}" />
-            <TabItem Header="ContentPage">
-                <pages:ContentPageDemo />
-            </TabItem>
-            <TabItem Header="CarouselPage">
-                <pages:CarouselPageDemo />
-            </TabItem>
-            <TabItem Header="DrawerPage">
-                <pages:DrawerPageDemo />
-            </TabItem>
-            <TabItem Header="NavigationPage">
-                <pages:NavigationPageDemo />
-            </TabItem>
-            <TabItem Header="TabbedPage">
-                <pages:TabbedPageDemo />
-            </TabItem>
+            <TabItem
+                Theme="{DynamicResource CategoryTabItem}"
+                Header="Navigation" />
             <TabItem Header="TabControl">
                 <pages:TabControlDemo />
             </TabItem>
@@ -221,13 +224,12 @@
             <TabItem Header="TreeView">
                 <pages:TreeViewDemo />
             </TabItem>
-            <TabItem Header="Show" Theme="{DynamicResource CategoryTabItem}" />
+            <TabItem
+                Theme="{DynamicResource CategoryTabItem}"
+                Header="Show" />
             <TabItem Header="Carousel">
                 <pages:CarouselDemo />
             </TabItem>
-            <TabItem Header="PipsPager">
-                <pages:PipsPagerDemo />
-            </TabItem>
             <TabItem Header="Expander">
                 <pages:ExpanderDemo />
             </TabItem>
@@ -249,7 +251,9 @@
             <TabItem Header="ToolTip">
                 <pages:ToolTipDemo />
             </TabItem>
-            <TabItem Header="Feedback" Theme="{DynamicResource CategoryTabItem}" />
+            <TabItem
+                Theme="{DynamicResource CategoryTabItem}"
+                Header="Feedback" />
             <TabItem Header="DataValidationErrors">
                 <pages:DataValidationErrorsDemo />
             </TabItem>
@@ -262,10 +266,9 @@
             <TabItem Header="RefreshContainer">
                 <pages:RefreshContainerDemo />
             </TabItem>
-            <TabItem Header="Other" Theme="{DynamicResource CategoryTabItem}" />
-            <TabItem Header="CommandBar">
-                <pages:CommandBarDemo />
-            </TabItem>
+            <TabItem
+                Theme="{DynamicResource CategoryTabItem}"
+                Header="Other" />
             <TabItem Header="GridSplitter">
                 <pages:GridSplitterDemo />
             </TabItem>
@@ -278,9 +281,6 @@
             <TabItem Header="ThemeVariantScope">
                 <pages:ThemeVariantDemo />
             </TabItem>
-            <TabItem Header="WindowCustomizationsPage">
-                <pages:WindowCustomizationsPage />
-            </TabItem>
         </TabControl>
     </Grid>
 </UserControl>

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

@@ -5,11 +5,10 @@
     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
     xmlns:views="clr-namespace:Semi.Avalonia.Demo.Views"
-    Title="Semi Avalonia Demo"
+    Title="Semi.Avalonia.Demo"
     d:DesignHeight="450"
     d:DesignWidth="800"
-    ExtendClientAreaToDecorationsHint="True"
     Icon="/Assets/irihi.ico"
     mc:Ignorable="d">
-    <views:MainView Margin="{Binding $parent[Window].WindowDecorationMargin}" />
+    <views:MainView />
 </Window>

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

@@ -1,38 +1,11 @@
 using Avalonia.Controls;
-using Avalonia.Input;
 
 namespace Semi.Avalonia.Demo.Views;
 
 public partial class MainWindow : Window
 {
-    private WindowState _stateBeforeFullScreen = WindowState.Normal;
-
     public MainWindow()
     {
         InitializeComponent();
-        KeyDown += FullScreenKeyDown;
-    }
-
-    private void FullScreenKeyDown(object? sender, KeyEventArgs e)
-    {
-        if (e.Key == Key.F11)
-        {
-            
-            ToggleFullScreen();
-            e.Handled = true;
-        }
-    }
-
-    private void ToggleFullScreen()
-    {
-        if (WindowState is not WindowState.FullScreen)
-        {
-            _stateBeforeFullScreen = WindowState;
-            WindowState = WindowState.FullScreen;
-        }
-        else
-        {
-            WindowState = _stateBeforeFullScreen;
-        }
     }
 }

src/Directory.Build.props

@@ -2,6 +2,7 @@
     <PropertyGroup>
         <Nullable>enable</Nullable>
         <LangVersion>latest</LangVersion>
+        <AvaloniaUseCompiledBindingsByDefault>true</AvaloniaUseCompiledBindingsByDefault>
     </PropertyGroup>
 
     <PropertyGroup Condition="$([MSBuild]::IsTargetFrameworkCompatible('$(TargetFramework)', 'net8.0'))">

src/Directory.Packages.props

@@ -1,14 +1,14 @@
 <Project>
     <PropertyGroup>
         <ManagePackageVersionsCentrally>true</ManagePackageVersionsCentrally>
-        <AvaloniaVersion>12.0.0</AvaloniaVersion>
-        <DataGridVersion>12.0.0</DataGridVersion>
+        <AvaloniaVersion>12.0.999-cibuild0061987-alpha</AvaloniaVersion>
+        <DataGridVersion>11.3.7</DataGridVersion>
     </PropertyGroup>
     <ItemGroup>
         <PackageVersion Include="Avalonia" Version="$(AvaloniaVersion)"/>
         <PackageVersion Include="Avalonia.Controls.ColorPicker" Version="$(AvaloniaVersion)"/>
         <PackageVersion Include="Avalonia.Controls.DataGrid" Version="$(DataGridVersion)"/>
         <PackageVersion Include="Avalonia.Controls.TreeDataGrid" Version="11.1.1"/>
-        <PackageVersion Include="Irihi.Avalonia.Shared" Version="0.4.0"/>
+        <PackageVersion Include="Irihi.Avalonia.Shared" Version="0.4.0-nightly-20260206184422"/>
     </ItemGroup>
 </Project>

src/Semi.Avalonia.ColorPicker/ColorPickerSemiTheme.axaml

@@ -6,7 +6,6 @@
         <ResourceDictionary>
             <ResourceDictionary.ThemeDictionaries>
                 <ResourceInclude x:Key="Default" Source="Light.axaml" />
-                <ResourceInclude x:Key="Light" Source="Light.axaml" />
                 <ResourceInclude x:Key="Dark" Source="Dark.axaml" />
             </ResourceDictionary.ThemeDictionaries>
             <ResourceDictionary.MergedDictionaries>

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

@@ -2,48 +2,38 @@
     xmlns="https://github.com/avaloniaui"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
     xmlns:iri="https://irihi.tech/shared"
-    xmlns:semi="https://irihi.tech/semi">
-    <Design.PreviewWith>
-        <StackPanel Width="500" Height="500">
-            <ColorPicker Name="cp" Color="#AAAAAAAA" IsAlphaVisible="True" IsAlphaEnabled="True" />
-            <ColorPicker Theme="{DynamicResource SimpleColorPicker}" Color="{Binding #cp.Color}" IsAlphaEnabled="{Binding #cp.IsAlphaEnabled}" IsAlphaVisible="{Binding #cp.IsAlphaVisible}" />
-            <ColorPicker Theme="{DynamicResource HexSimpleColorPicker}" Color="{Binding #cp.Color}" IsAlphaEnabled="{Binding #cp.IsAlphaEnabled}" IsAlphaVisible="{Binding #cp.IsAlphaVisible}" />
-            <ColorView Color="{Binding #cp.Color}" IsAlphaEnabled="{Binding #cp.IsAlphaEnabled}" IsAlphaVisible="{Binding #cp.IsAlphaVisible}" />
-        </StackPanel>
-    </Design.PreviewWith>
+    xmlns:converters="using:Avalonia.Controls.Converters">
+    <converters:ToBrushConverter x:Key="ToBrushConverter" />
 
     <ControlTheme x:Key="{x:Type ColorPicker}" TargetType="ColorPicker">
-        <!-- Alpha position should match CSS (and default slider order) instead of XAML/WinUI -->
-        <Setter Property="HexInputAlphaPosition" Value="Trailing" />
+        <Setter Property="MinWidth" Value="64" />
         <Setter Property="HorizontalAlignment" Value="Center" />
-        <Setter Property="Padding" Value="0 0 10 0" />
         <Setter Property="MinHeight" Value="{DynamicResource ColorPickerMinHeight}" />
         <Setter Property="CornerRadius" Value="{DynamicResource ColorPickerCornerRadius}" />
-        <Setter Property="Palette" Value="{DynamicResource SemiColorPalette}" />
         <Setter Property="Content">
             <Template>
                 <Panel>
                     <Border
                         Margin="1,1,0,1"
-                        Width="{Binding $self.Bounds.Height}"
                         Background="{DynamicResource ColorControlCheckeredBackgroundBrush}"
                         CornerRadius="{TemplateBinding CornerRadius, Converter={iri:CornerRadiusMixerConverter Left}}" />
                     <Border
                         Margin="1,1,0,1"
-                        Width="{Binding $self.Bounds.Height}"
                         Background="{TemplateBinding HsvColor, Converter={StaticResource ToBrushConverter}}"
                         CornerRadius="{TemplateBinding CornerRadius, Converter={iri:CornerRadiusMixerConverter Left}}" />
                 </Panel>
             </Template>
         </Setter>
+        <Setter Property="Palette">
+            <FluentColorPalette />
+        </Setter>
         <Setter Property="Template">
-            <ControlTemplate TargetType="ColorPicker">
+            <ControlTemplate TargetType="{x:Type ColorPicker}">
                 <DropDownButton
                     Width="{TemplateBinding Width}"
                     Height="{TemplateBinding Height}"
                     MinWidth="{TemplateBinding MinWidth}"
                     MinHeight="{TemplateBinding MinHeight}"
-                    Padding="{TemplateBinding Padding}"
                     HorizontalAlignment="{TemplateBinding HorizontalAlignment}"
                     VerticalAlignment="{TemplateBinding VerticalAlignment}"
                     HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
@@ -59,9 +49,7 @@
                         </Style>
                     </DropDownButton.Styles>
                     <DropDownButton.Flyout>
-                        <Flyout
-                            FlyoutPresenterClasses="nopadding"
-                            Placement="{DynamicResource ColorPickerFlyoutPlacement}">
+                        <Flyout FlyoutPresenterClasses="nopadding" Placement="{DynamicResource ColorPickerFlyoutPlacement}">
 
                             <!--
                                 The following is copy-pasted from the ColorView's control template.
@@ -69,6 +57,7 @@
                                 Note the only changes are resources specific to the ColorPicker.
                             -->
                             <Grid
+                                Name="RootGrid"
                                 Width="300"
                                 Height="300"
                                 RowDefinitions="*,Auto">
@@ -92,7 +81,7 @@
                                     Padding="0"
                                     VerticalAlignment="Stretch"
                                     HorizontalContentAlignment="Stretch"
-                                    SelectedIndex="{TemplateBinding SelectedIndex, Mode=TwoWay}">
+                                    SelectedIndex="{Binding SelectedIndex, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}">
                                     <TabControl.Styles>
                                         <Style Selector="TabItem">
                                             <Setter Property="MinHeight" Value="32" />
@@ -127,11 +116,11 @@
                                                 HorizontalAlignment="Center"
                                                 VerticalAlignment="Stretch"
                                                 AutomationProperties.Name="Third Component"
-                                                ColorComponent="{Binding #ColorSpectrum.ThirdComponent}"
+                                                ColorComponent="{Binding ThirdComponent, ElementName=ColorSpectrum}"
                                                 ColorModel="Hsva"
-                                                HsvColor="{Binding #ColorSpectrum.HsvColor}"
-                                                IsAlphaVisible="False"
-                                                IsPerceptive="True"
+                                                HsvColor="{Binding HsvColor, ElementName=ColorSpectrum}"
+                                                IsAlphaVisible="True"
+                                                IsPerceptive="False"
                                                 IsVisible="{TemplateBinding IsColorSpectrumSliderVisible}"
                                                 Orientation="Vertical" />
                                             <ColorSpectrum
@@ -140,7 +129,7 @@
                                                 HorizontalAlignment="Stretch"
                                                 VerticalAlignment="Stretch"
                                                 Components="{TemplateBinding ColorSpectrumComponents}"
-                                                HsvColor="{TemplateBinding HsvColor, Mode=TwoWay}"
+                                                HsvColor="{Binding HsvColor, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}"
                                                 MaxHue="{TemplateBinding MaxHue}"
                                                 MaxSaturation="{TemplateBinding MaxSaturation}"
                                                 MaxValue="{TemplateBinding MaxValue}"
@@ -157,10 +146,14 @@
                                                 AutomationProperties.Name="Alpha Component"
                                                 ColorComponent="Alpha"
                                                 ColorModel="Hsva"
-                                                HsvColor="{Binding #ColorSpectrum.HsvColor}"
-                                                IsVisible="{TemplateBinding IsAlphaVisible}"
+                                                HsvColor="{Binding HsvColor, ElementName=ColorSpectrum}"
                                                 IsEnabled="{TemplateBinding IsAlphaEnabled}"
                                                 Orientation="Vertical">
+                                                <ColorSlider.IsVisible>
+                                                    <MultiBinding Converter="{x:Static BoolConverters.And}">
+                                                        <Binding Path="IsAlphaVisible" RelativeSource="{RelativeSource TemplatedParent}" />
+                                                    </MultiBinding>
+                                                </ColorSlider.IsVisible>
                                             </ColorSlider>
                                         </Grid>
                                     </TabItem>
@@ -175,13 +168,13 @@
                                         <ListBox
                                             Margin="12"
                                             VerticalAlignment="Stretch"
-                                            ItemContainerTheme="{StaticResource ColorViewPaletteListBoxItemTheme}"
+                                            ItemContainerTheme="{DynamicResource ColorViewPaletteListBoxItemTheme}"
                                             ItemsSource="{TemplateBinding PaletteColors}"
-                                            SelectedItem="{TemplateBinding Color, Mode=TwoWay, Converter={StaticResource DoNothingForNullConverter}}"
-                                            Theme="{StaticResource ColorViewPaletteListBoxTheme}"
+                                            SelectedItem="{Binding Color, RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource DoNothingForNullConverter}, Mode=TwoWay}"
+                                            Theme="{DynamicResource ColorViewPaletteListBoxTheme}"
                                             UseLayoutRounding="False">
                                             <ListBox.ItemTemplate>
-                                                <DataTemplate DataType="Color">
+                                                <DataTemplate DataType="{x:Type Color}">
                                                     <Border
                                                         HorizontalAlignment="Stretch"
                                                         VerticalAlignment="Stretch"
@@ -212,11 +205,7 @@
                                             Margin="12"
                                             ColumnDefinitions="Auto,*"
                                             RowDefinitions="Auto,24,*,*,*,*,12"
-                                            UseLayoutRounding="False">
-                                            <Grid.Resources>
-                                                <Thickness x:Key="TextBoxContentPadding">8 0</Thickness>
-                                                <Thickness x:Key="TextBoxInnerLeftContentPadding">0 0 8 0</Thickness>
-                                            </Grid.Resources>
+                                            Tag="{TemplateBinding ColorModel}">
                                             <Grid.Styles>
                                                 <Style Selector="NumericUpDown">
                                                     <Setter Property="InnerLeftContent">
@@ -225,6 +214,34 @@
                                                         </Template>
                                                     </Setter>
                                                 </Style>
+                                                <Style Selector="Grid[Tag=Rgba]">
+                                                    <Style Selector="^ NumericUpDown#Component1NumericUpDown">
+                                                        <Setter Property="Tag" Value="R" />
+                                                    </Style>
+                                                    <Style Selector="^ NumericUpDown#Component2NumericUpDown">
+                                                        <Setter Property="Tag" Value="G" />
+                                                    </Style>
+                                                    <Style Selector="^ NumericUpDown#Component3NumericUpDown">
+                                                        <Setter Property="Tag" Value="B" />
+                                                    </Style>
+                                                    <Style Selector="^ NumericUpDown#AlphaComponentNumericUpDown">
+                                                        <Setter Property="Tag" Value="A" />
+                                                    </Style>
+                                                </Style>
+                                                <Style Selector="Grid[Tag=Hsva]">
+                                                    <Style Selector="^ NumericUpDown#Component1NumericUpDown">
+                                                        <Setter Property="Tag" Value="H" />
+                                                    </Style>
+                                                    <Style Selector="^ NumericUpDown#Component2NumericUpDown">
+                                                        <Setter Property="Tag" Value="S" />
+                                                    </Style>
+                                                    <Style Selector="^ NumericUpDown#Component3NumericUpDown">
+                                                        <Setter Property="Tag" Value="V" />
+                                                    </Style>
+                                                    <Style Selector="^ NumericUpDown#AlphaComponentNumericUpDown">
+                                                        <Setter Property="Tag" Value="A" />
+                                                    </Style>
+                                                </Style>
                                             </Grid.Styles>
                                             <!--  Top color model & Hex input  -->
                                             <Grid
@@ -246,9 +263,9 @@
                                                             Content="RGB"
                                                             CornerRadius="3,0,0,3"
                                                             IsChecked="{TemplateBinding ColorModel,
-                                                                Converter={StaticResource EnumToBoolConverter},
-                                                                ConverterParameter={x:Static ColorModel.Rgba},
-                                                                Mode=TwoWay}"
+                                                            Converter={StaticResource EnumToBoolConverter},
+                                                            ConverterParameter={x:Static ColorModel.Rgba},
+                                                            Mode=TwoWay}"
                                                             Theme="{DynamicResource ColorViewRadioButton}" />
                                                         <RadioButton
                                                             Name="HsvRadioButton"
@@ -258,9 +275,9 @@
                                                             Content="HSV"
                                                             CornerRadius="0,3,3,0"
                                                             IsChecked="{TemplateBinding ColorModel,
-                                                                Converter={StaticResource EnumToBoolConverter},
-                                                                ConverterParameter={x:Static ColorModel.Hsva},
-                                                                Mode=TwoWay}"
+                                                            Converter={StaticResource EnumToBoolConverter},
+                                                            ConverterParameter={x:Static ColorModel.Hsva},
+                                                            Mode=TwoWay}"
                                                             Theme="{DynamicResource ColorViewRadioButton}" />
                                                     </Grid>
                                                 </Border>
@@ -285,11 +302,11 @@
                                                 AllowSpin="True"
                                                 Classes="Small"
                                                 IsVisible="{TemplateBinding IsComponentTextInputVisible}"
-                                                Maximum="{Binding #Component1Slider.Maximum}"
-                                                Minimum="{Binding #Component1Slider.Minimum}"
+                                                Maximum="{Binding Maximum, ElementName=Component1Slider}"
+                                                Minimum="{Binding Minimum, ElementName=Component1Slider}"
                                                 NumberFormat="{StaticResource ColorViewComponentNumberFormat}"
                                                 ShowButtonSpinner="False"
-                                                Value="{Binding #Component1Slider.Value,Converter={StaticResource DoNothingForNullConverter}}" />
+                                                Value="{Binding Value, ElementName=Component1Slider}" />
                                             <ColorSlider
                                                 Name="Component1Slider"
                                                 Grid.Row="2"
@@ -298,7 +315,7 @@
                                                 VerticalAlignment="Center"
                                                 ColorComponent="Component1"
                                                 ColorModel="{TemplateBinding ColorModel,Mode=OneWay}"
-                                                HsvColor="{TemplateBinding HsvColor, Mode=TwoWay}"
+                                                HsvColor="{Binding HsvColor, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}"
                                                 IsRoundingEnabled="True"
                                                 IsSnapToTickEnabled="True"
                                                 IsVisible="{TemplateBinding IsComponentSliderVisible}"
@@ -315,11 +332,11 @@
                                                 AllowSpin="True"
                                                 Classes="Small"
                                                 IsVisible="{TemplateBinding IsComponentTextInputVisible}"
-                                                Maximum="{Binding #Component2Slider.Maximum}"
-                                                Minimum="{Binding #Component2Slider.Minimum}"
+                                                Maximum="{Binding Maximum, ElementName=Component2Slider}"
+                                                Minimum="{Binding Minimum, ElementName=Component2Slider}"
                                                 NumberFormat="{StaticResource ColorViewComponentNumberFormat}"
                                                 ShowButtonSpinner="False"
-                                                Value="{Binding #Component2Slider.Value,Converter={StaticResource DoNothingForNullConverter}}" />
+                                                Value="{Binding Value, ElementName=Component2Slider}" />
                                             <ColorSlider
                                                 Name="Component2Slider"
                                                 Grid.Row="3"
@@ -328,7 +345,7 @@
                                                 VerticalAlignment="Center"
                                                 ColorComponent="Component2"
                                                 ColorModel="{TemplateBinding ColorModel,Mode=OneWay}"
-                                                HsvColor="{TemplateBinding HsvColor, Mode=TwoWay}"
+                                                HsvColor="{Binding HsvColor, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}"
                                                 IsRoundingEnabled="True"
                                                 IsSnapToTickEnabled="True"
                                                 IsVisible="{TemplateBinding IsComponentSliderVisible}"
@@ -345,11 +362,11 @@
                                                 AllowSpin="True"
                                                 Classes="Small"
                                                 IsVisible="{TemplateBinding IsComponentTextInputVisible}"
-                                                Maximum="{Binding #Component3Slider.Maximum}"
-                                                Minimum="{Binding #Component3Slider.Minimum}"
+                                                Maximum="{Binding Maximum, ElementName=Component3Slider}"
+                                                Minimum="{Binding Minimum, ElementName=Component3Slider}"
                                                 NumberFormat="{StaticResource ColorViewComponentNumberFormat}"
                                                 ShowButtonSpinner="False"
-                                                Value="{Binding #Component3Slider.Value,Converter={StaticResource DoNothingForNullConverter}}" />
+                                                Value="{Binding Value, ElementName=Component3Slider}" />
                                             <ColorSlider
                                                 Name="Component3Slider"
                                                 Grid.Row="4"
@@ -358,7 +375,7 @@
                                                 VerticalAlignment="Center"
                                                 ColorComponent="Component3"
                                                 ColorModel="{TemplateBinding ColorModel,Mode=OneWay}"
-                                                HsvColor="{TemplateBinding HsvColor, Mode=TwoWay}"
+                                                HsvColor="{Binding HsvColor, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}"
                                                 IsRoundingEnabled="True"
                                                 IsSnapToTickEnabled="True"
                                                 IsVisible="{TemplateBinding IsComponentSliderVisible}"
@@ -375,15 +392,15 @@
                                                 AllowSpin="True"
                                                 Classes="Small"
                                                 IsEnabled="{TemplateBinding IsAlphaEnabled}"
-                                                Maximum="{Binding #AlphaComponentSlider.Maximum}"
-                                                Minimum="{Binding #AlphaComponentSlider.Minimum}"
+                                                Maximum="{Binding Maximum, ElementName=AlphaComponentSlider}"
+                                                Minimum="{Binding Minimum, ElementName=AlphaComponentSlider}"
                                                 NumberFormat="{StaticResource ColorViewComponentNumberFormat}"
                                                 ShowButtonSpinner="False"
-                                                Value="{Binding #AlphaComponentSlider.Value,Converter={StaticResource DoNothingForNullConverter}}">
+                                                Value="{Binding Value, ElementName=AlphaComponentSlider}">
                                                 <NumericUpDown.IsVisible>
                                                     <MultiBinding Converter="{x:Static BoolConverters.And}">
-                                                        <TemplateBinding Property="IsAlphaVisible" />
-                                                        <TemplateBinding Property="IsComponentTextInputVisible" />
+                                                        <Binding Path="IsAlphaVisible" RelativeSource="{RelativeSource TemplatedParent}" />
+                                                        <Binding Path="IsComponentTextInputVisible" RelativeSource="{RelativeSource TemplatedParent}" />
                                                     </MultiBinding>
                                                 </NumericUpDown.IsVisible>
                                             </NumericUpDown>
@@ -395,7 +412,7 @@
                                                 VerticalAlignment="Center"
                                                 ColorComponent="Alpha"
                                                 ColorModel="{TemplateBinding ColorModel,Mode=OneWay}"
-                                                HsvColor="{TemplateBinding HsvColor, Mode=TwoWay}"
+                                                HsvColor="{Binding HsvColor, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}"
                                                 IsEnabled="{TemplateBinding IsAlphaEnabled}"
                                                 IsRoundingEnabled="True"
                                                 IsSnapToTickEnabled="True"
@@ -403,8 +420,8 @@
                                                 TickFrequency="1">
                                                 <ColorSlider.IsVisible>
                                                     <MultiBinding Converter="{x:Static BoolConverters.And}">
-                                                        <TemplateBinding Property="IsAlphaVisible" />
-                                                        <TemplateBinding Property="IsComponentSliderVisible" />
+                                                        <Binding Path="IsAlphaVisible" RelativeSource="{RelativeSource TemplatedParent}" />
+                                                        <Binding Path="IsComponentSliderVisible" RelativeSource="{RelativeSource TemplatedParent}" />
                                                     </MultiBinding>
                                                 </ColorSlider.IsVisible>
                                             </ColorSlider>
@@ -412,11 +429,11 @@
                                     </TabItem>
                                 </TabControl>
                                 <!--  Previewer  -->
-                                <!-- Note that the drop shadow is allowed to extend past the control bounds -->
+                                <!--  Note that top/bottom margins have -5 to remove for drop shadow padding  -->
                                 <ColorPreviewer
                                     Grid.Row="1"
-                                    Margin="12,0,12,12"
-                                    HsvColor="{TemplateBinding HsvColor, Mode=TwoWay}"
+                                    Margin="12,-5,12,7"
+                                    HsvColor="{Binding HsvColor, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}"
                                     IsAccentColorsVisible="{TemplateBinding IsAccentColorsVisible}"
                                     IsVisible="{TemplateBinding IsColorPreviewVisible}" />
                             </Grid>
@@ -425,33 +442,9 @@
                 </DropDownButton>
             </ControlTemplate>
         </Setter>
-        <Style Selector="^[ColorModel=Rgba]">
-            <Style Selector="^ /template/ NumericUpDown#Component1NumericUpDown">
-                <Setter Property="Tag" Value="R" />
-            </Style>
-            <Style Selector="^ /template/ NumericUpDown#Component2NumericUpDown">
-                <Setter Property="Tag" Value="G" />
-            </Style>
-            <Style Selector="^ /template/ NumericUpDown#Component3NumericUpDown">
-                <Setter Property="Tag" Value="B" />
-            </Style>
-            <Style Selector="^ /template/ NumericUpDown#AlphaComponentNumericUpDown">
-                <Setter Property="Tag" Value="A" />
-            </Style>
-        </Style>
-        <Style Selector="^[ColorModel=Hsva]">
-            <Style Selector="^ /template/ NumericUpDown#Component1NumericUpDown">
-                <Setter Property="Tag" Value="H" />
-            </Style>
-            <Style Selector="^ /template/ NumericUpDown#Component2NumericUpDown">
-                <Setter Property="Tag" Value="S" />
-            </Style>
-            <Style Selector="^ /template/ NumericUpDown#Component3NumericUpDown">
-                <Setter Property="Tag" Value="V" />
-            </Style>
-            <Style Selector="^ /template/ NumericUpDown#AlphaComponentNumericUpDown">
-                <Setter Property="Tag" Value="A" />
-            </Style>
+
+        <Style Selector="^ /template/ DropDownButton">
+            <Setter Property="Padding" Value="0 0 10 0" />
         </Style>
     </ControlTheme>
 
@@ -459,34 +452,38 @@
         x:Key="HexColorPicker"
         BasedOn="{StaticResource {x:Type ColorPicker}}"
         TargetType="ColorPicker">
-        <Setter Property="MinWidth" Value="180" />
-        <Setter Property="Content" Value="{StaticResource HexColorPickerTemplate}" />
+        <Setter Property="MinWidth" Value="200" />
+        <Setter Property="Content">
+            <Template>
+                <Grid ColumnDefinitions="Auto, *">
+                    <Border
+                        Grid.Column="0"
+                        Width="{Binding $self.Bounds.Height}"
+                        Margin="1,1,0,1"
+                        HorizontalAlignment="Stretch"
+                        VerticalAlignment="Stretch"
+                        Background="{DynamicResource ColorControlCheckeredBackgroundBrush}"
+                        CornerRadius="{TemplateBinding CornerRadius}" />
+                    <Border
+                        Grid.Column="0"
+                        Width="{Binding $self.Bounds.Height}"
+                        Margin="1,1,0,1"
+                        HorizontalAlignment="Stretch"
+                        VerticalAlignment="Stretch"
+                        Background="{TemplateBinding HsvColor,Converter={StaticResource ToBrushConverter}}"
+                        CornerRadius="{TemplateBinding CornerRadius}" />
+                    <TextBlock
+                        Grid.Column="1"
+                        Margin="8,0,0,0"
+                        HorizontalAlignment="Left"
+                        VerticalAlignment="Center"
+                        FontWeight="Regular"
+                        Foreground="{DynamicResource TextBlockDefaultForeground}"
+                        Text="{Binding $parent[ColorPicker].Color}" />
+                </Grid>
+            </Template>
+        </Setter>
     </ControlTheme>
-    <Template x:Key="HexColorPickerTemplate">
-        <Grid ColumnDefinitions="Auto, *">
-            <Border
-                Grid.Column="0"
-                Width="{Binding $self.Bounds.Height}"
-                Margin="1,1,0,1"
-                Background="{DynamicResource ColorControlCheckeredBackgroundBrush}"
-                CornerRadius="{Binding $parent[ColorPicker].CornerRadius}" />
-            <Border
-                Grid.Column="0"
-                Width="{Binding $self.Bounds.Height}"
-                Margin="1,1,0,1"
-                Background="{Binding $parent[ColorPicker].HsvColor,Converter={StaticResource ToBrushConverter}}"
-                CornerRadius="{Binding $parent[ColorPicker].CornerRadius}" />
-            <TextBlock
-                Grid.Column="1"
-                Margin="8,0,0,0"
-                HorizontalAlignment="Left"
-                VerticalAlignment="Center"
-                Foreground="{DynamicResource TextBlockDefaultForeground}">
-                <Run Text="#" />
-                <Run Text="{Binding $parent[ColorPicker].Color, Converter={StaticResource ColorToHexConverter}}" />
-            </TextBlock>
-        </Grid>
-    </Template>
 
     <ControlTheme
         x:Key="SimpleColorPicker"
@@ -494,13 +491,12 @@
         TargetType="ColorPicker">
         <Setter Property="ColorSpectrumComponents" Value="SaturationValue" />
         <Setter Property="Template">
-            <ControlTemplate TargetType="ColorPicker">
+            <ControlTemplate TargetType="{x:Type ColorPicker}">
                 <DropDownButton
                     Width="{TemplateBinding Width}"
                     Height="{TemplateBinding Height}"
                     MinWidth="{TemplateBinding MinWidth}"
                     MinHeight="{TemplateBinding MinHeight}"
-                    Padding="{TemplateBinding Padding}"
                     HorizontalAlignment="{TemplateBinding HorizontalAlignment}"
                     VerticalAlignment="{TemplateBinding VerticalAlignment}"
                     HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
@@ -515,16 +511,14 @@
                         </Style>
                     </DropDownButton.Styles>
                     <DropDownButton.Flyout>
-                        <Flyout
-                            FlyoutPresenterClasses="nopadding"
-                            Placement="{DynamicResource SimpleColorPickerFlyoutPlacement}">
-                            
+                        <Flyout FlyoutPresenterClasses="nopadding" Placement="{DynamicResource SimpleColorPickerFlyoutPlacement}">
+
                             <!--
                                 The following is copy-pasted from the ColorView's control template.
                                 It MUST always be kept in sync with the ColorView (which is master).
                                 Note the only changes are resources specific to the ColorPicker.
                             -->
-                            <Grid>
+                            <Grid Width="280">
                                 <Grid.RowDefinitions>
                                     <RowDefinition Height="*" MinHeight="280" />
                                     <RowDefinition Height="Auto" />
@@ -540,7 +534,6 @@
                                         Name="ColorSpectrum"
                                         HorizontalAlignment="Stretch"
                                         VerticalAlignment="Stretch"
-                                        CornerRadius="8 8 0 0"
                                         Components="{TemplateBinding ColorSpectrumComponents}"
                                         HsvColor="{TemplateBinding HsvColor, Mode=TwoWay}"
                                         MaxHue="{TemplateBinding MaxHue}"
@@ -591,43 +584,35 @@
                                         CornerRadius="4" />
                                     <Panel
                                         Name="PART_TextBoxPanel"
-                                        Width="116"
+                                        Width="106"
                                         Margin="4 0 0 0"
                                         HorizontalAlignment="Stretch"
                                         VerticalAlignment="Center">
                                         <TextBox
                                             Name="PART_HexTextBox"
-                                            AutomationProperties.Name="Hexadecimal Color"
                                             Classes="Small"
-                                            CornerRadius="3 0 0 3"
                                             InnerLeftContent="#"
-                                            IsVisible="{Binding #ColorModelComboBox.SelectedValue, Converter={x:Static ObjectConverters.Equal}, ConverterParameter=Hex}"
-                                            MaxLength="8">
-                                            <TextBox.Resources>
-                                                <Thickness x:Key="TextBoxInnerLeftContentPadding">0 0 4 0</Thickness>
-                                            </TextBox.Resources>
-                                        </TextBox>
+                                            IsVisible="{Binding #ColorModelComboBox.SelectedValue, Converter={StaticResource ToColorModel}, ConverterParameter=Hex}"
+                                            Text="{TemplateBinding Color, Converter={StaticResource ColorToHexConverter}, Mode=TwoWay}"
+                                            MaxLength="8" />
                                         <TextBox
                                             Name="PART_RgbaTextBox"
                                             Classes="Small"
-                                            CornerRadius="3 0 0 3"
-                                            IsVisible="{Binding #ColorModelComboBox.SelectedValue, Converter={x:Static ObjectConverters.Equal}, ConverterParameter={x:Static ColorModel.Rgba}}"
-                                            Text="{TemplateBinding Color, Converter={semi:ColorToTextConverter}, Mode=TwoWay}" />
+                                            IsVisible="{Binding #ColorModelComboBox.SelectedValue, Converter={StaticResource ToColorModel}, ConverterParameter=Rgba}"
+                                            Text="{TemplateBinding Color, Converter={StaticResource ColorToTextConverter}, Mode=TwoWay}" />
                                         <TextBox
                                             Name="PART_HsvaTextBox"
                                             Classes="Small"
-                                            CornerRadius="3 0 0 3"
-                                            IsVisible="{Binding #ColorModelComboBox.SelectedValue, Converter={x:Static ObjectConverters.Equal}, ConverterParameter={x:Static ColorModel.Hsva}}"
-                                            Text="{TemplateBinding HsvColor, Converter={semi:HsvColorToTextConverter}, Mode=TwoWay}" />
+                                            IsVisible="{Binding #ColorModelComboBox.SelectedValue, Converter={StaticResource ToColorModel}, ConverterParameter=Hsva}"
+                                            Text="{TemplateBinding HsvColor, Converter={StaticResource HsvColorToTextConverter}, Mode=TwoWay}" />
                                     </Panel>
 
                                     <NumericUpDown
                                         Name="AlphaComponentNumericUpDown"
-                                        Width="60"
+                                        Width="70"
                                         HorizontalAlignment="Right"
                                         VerticalAlignment="Center"
                                         AllowSpin="True"
-                                        CornerRadius="0"
                                         Classes="Small"
                                         IsEnabled="{TemplateBinding IsAlphaEnabled}"
                                         Maximum="{Binding #ColorSpectrumAlphaSlider.Maximum}"
@@ -636,21 +621,14 @@
                                         ShowButtonSpinner="False"
                                         InnerRightContent="%"
                                         IsVisible="{TemplateBinding IsAlphaVisible}"
-                                        Value="{Binding #ColorSpectrumAlphaSlider.Value,Converter={StaticResource DoNothingForNullConverter}}">
-                                        <NumericUpDown.Resources>
-                                            <Thickness x:Key="TextBoxContentPadding">12 0 4 0</Thickness>
-                                            <Thickness x:Key="TextBoxInnerRightContentPadding">4 0 0 0</Thickness>
-                                        </NumericUpDown.Resources>
-                                    </NumericUpDown>
+                                        Value="{Binding #ColorSpectrumAlphaSlider.Value}" />
                                     <ComboBox
                                         Name="ColorModelComboBox"
                                         Width="80"
-                                        CornerRadius="0 3 3 0"
                                         VerticalAlignment="Center"
                                         Classes="Small"
                                         SelectedValue="Hex">
-                                        <x:String>Hex</x:String>
-                                        <ColorModel>Rgba</ColorModel>
+                                        Hex<ColorModel>Rgba</ColorModel>
                                         <ColorModel>Hsva</ColorModel>
                                     </ComboBox>
                                 </StackPanel>
@@ -669,8 +647,37 @@
         x:Key="HexSimpleColorPicker"
         BasedOn="{StaticResource SimpleColorPicker}"
         TargetType="ColorPicker">
-        <Setter Property="MinWidth" Value="180" />
-        <Setter Property="Content" Value="{StaticResource HexColorPickerTemplate}" />
+        <Setter Property="MinWidth" Value="200" />
+        <Setter Property="Content">
+            <Template>
+                <Grid ColumnDefinitions="Auto, *">
+                    <Border
+                        Grid.Column="0"
+                        Width="{Binding $self.Bounds.Height}"
+                        Margin="1,1,0,1"
+                        HorizontalAlignment="Stretch"
+                        VerticalAlignment="Stretch"
+                        Background="{DynamicResource ColorControlCheckeredBackgroundBrush}"
+                        CornerRadius="{TemplateBinding CornerRadius}" />
+                    <Border
+                        Grid.Column="0"
+                        Width="{Binding $self.Bounds.Height}"
+                        Margin="1,1,0,1"
+                        HorizontalAlignment="Stretch"
+                        VerticalAlignment="Stretch"
+                        Background="{TemplateBinding HsvColor,Converter={StaticResource ToBrushConverter}}"
+                        CornerRadius="{TemplateBinding CornerRadius}" />
+                    <TextBlock
+                        Grid.Column="1"
+                        Margin="8,0,0,0"
+                        HorizontalAlignment="Left"
+                        VerticalAlignment="Center"
+                        FontWeight="Regular"
+                        Foreground="{DynamicResource TextBlockDefaultForeground}"
+                        Text="{Binding $parent[ColorPicker].Color}" />
+                </Grid>
+            </Template>
+        </Setter>
     </ControlTheme>
 
 </ResourceDictionary>

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

@@ -1,13 +1,15 @@
 <ResourceDictionary
     xmlns="https://github.com/avaloniaui"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-    xmlns:iri="https://irihi.tech/shared">
+    xmlns:iri="https://irihi.tech/shared"
+    xmlns:pc="using:Avalonia.Controls.Primitives.Converters">
+    <pc:AccentColorConverter x:Key="AccentColorConverter" />
 
     <ControlTheme x:Key="{x:Type ColorPreviewer}" TargetType="ColorPreviewer">
         <Setter Property="Height" Value="{DynamicResource ColorPreviewerHeight}" />
         <Setter Property="CornerRadius" Value="{DynamicResource ColorPreviewerCornerRadius}" />
         <Setter Property="Template">
-            <ControlTemplate TargetType="ColorPreviewer">
+            <ControlTemplate TargetType="{x:Type ColorPreviewer}">
                 <Panel>
                     <!--  Preview color with accents to the left and right  -->
                     <Grid ColumnDefinitions="Auto,*,Auto" IsVisible="{TemplateBinding IsAccentColorsVisible}">

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

@@ -1,6 +1,9 @@
 <ResourceDictionary
     xmlns="https://github.com/avaloniaui"
-    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:converters="using:Avalonia.Controls.Converters">
+    <converters:CornerRadiusToDoubleConverter x:Key="TopLeftCornerRadiusConverter" Corner="TopLeft" />
+    <converters:CornerRadiusToDoubleConverter x:Key="BottomRightCornerRadiusConverter" Corner="BottomRight" />
 
     <ControlTheme x:Key="ColorSliderThumbTheme" TargetType="Thumb">
         <Setter Property="Background" Value="Transparent" />
@@ -9,7 +12,7 @@
         <Setter Property="BorderThickness" Value="{DynamicResource ColorSliderThumbBorderBrush}" />
         <Setter Property="CornerRadius" Value="{DynamicResource ColorSliderThumbCornerRadius}" />
         <Setter Property="Template">
-            <ControlTemplate TargetType="Thumb">
+            <ControlTemplate>
                 <Border
                     Margin="1"
                     Background="{TemplateBinding Background}"
@@ -27,30 +30,33 @@
             <Setter Property="CornerRadius" Value="{DynamicResource ColorSliderCornerRadius}" />
             <Setter Property="Height" Value="{DynamicResource ColorSliderWidth}" />
             <Setter Property="Template">
-                <ControlTemplate TargetType="ColorSlider">
+                <ControlTemplate TargetType="{x:Type ColorSlider}">
                     <Border
                         BorderBrush="{TemplateBinding BorderBrush}"
                         BorderThickness="{TemplateBinding BorderThickness}"
                         CornerRadius="{TemplateBinding CornerRadius}">
                         <Grid Margin="{TemplateBinding Padding}">
-                            <Border
-                                HorizontalAlignment="Stretch"
-                                VerticalAlignment="Center"
+                            <Rectangle
+                                Width="{Binding #PART_Track.Bounds.Width}"
                                 Height="{Binding #PART_Track.Bounds.Height}"
-                                Background="{StaticResource ColorControlCheckeredBackgroundBrush}"
-                                CornerRadius="{DynamicResource ColorSliderCornerRadius}" />
-                            <Border
                                 HorizontalAlignment="Stretch"
-                                VerticalAlignment="Center"
+                                VerticalAlignment="Stretch"
+                                Fill="{DynamicResource ColorControlCheckeredBackgroundBrush}"
+                                RadiusX="{TemplateBinding CornerRadius,Converter={StaticResource TopLeftCornerRadiusConverter}}"
+                                RadiusY="{TemplateBinding CornerRadius,Converter={StaticResource BottomRightCornerRadiusConverter}}" />
+                            <Rectangle
+                                Width="{Binding #PART_Track.Bounds.Width}"
                                 Height="{Binding #PART_Track.Bounds.Height}"
-                                Background="{TemplateBinding Background}"
-                                CornerRadius="{DynamicResource ColorSliderCornerRadius}" />
-
+                                HorizontalAlignment="Stretch"
+                                VerticalAlignment="Stretch"
+                                Fill="{TemplateBinding Background}"
+                                RadiusX="{TemplateBinding CornerRadius,Converter={StaticResource TopLeftCornerRadiusConverter}}"
+                                RadiusY="{TemplateBinding CornerRadius,Converter={StaticResource BottomRightCornerRadiusConverter}}" />
                             <Track
                                 Name="PART_Track"
                                 Height="12"
                                 HorizontalAlignment="Stretch"
-                                VerticalAlignment="Center"
+                                VerticalAlignment="Stretch"
                                 IsDirectionReversed="{TemplateBinding IsDirectionReversed}"
                                 Maximum="{TemplateBinding Maximum}"
                                 Minimum="{TemplateBinding Minimum}"
@@ -95,7 +101,7 @@
                                     Width="{TemplateBinding Height}"
                                     Height="{TemplateBinding Height}"
                                     DataContext="{TemplateBinding Value}"
-                                    Theme="{DynamicResource ColorSliderThumbTheme}" />
+                                    Theme="{StaticResource ColorSliderThumbTheme}" />
                             </Track>
                         </Grid>
                     </Border>
@@ -108,28 +114,32 @@
             <Setter Property="CornerRadius" Value="{DynamicResource ColorSliderCornerRadius}" />
             <Setter Property="Width" Value="{DynamicResource ColorSliderWidth}" />
             <Setter Property="Template">
-                <ControlTemplate TargetType="ColorSlider">
+                <ControlTemplate TargetType="{x:Type ColorSlider}">
                     <Border
                         BorderBrush="{TemplateBinding BorderBrush}"
                         BorderThickness="{TemplateBinding BorderThickness}"
                         CornerRadius="{TemplateBinding CornerRadius}">
                         <Grid Margin="{TemplateBinding Padding}">
-                            <Border
-                                HorizontalAlignment="Center"
-                                VerticalAlignment="Stretch"
+                            <Rectangle
                                 Width="{Binding #PART_Track.Bounds.Width}"
-                                Background="{StaticResource ColorControlCheckeredBackgroundBrush}"
-                                CornerRadius="{DynamicResource ColorSliderCornerRadius}" />
-                            <Border
-                                HorizontalAlignment="Center"
+                                Height="{Binding #PART_Track.Bounds.Height}"
+                                HorizontalAlignment="Stretch"
                                 VerticalAlignment="Stretch"
+                                Fill="{DynamicResource ColorControlCheckeredBackgroundBrush}"
+                                RadiusX="{TemplateBinding CornerRadius,Converter={StaticResource TopLeftCornerRadiusConverter}}"
+                                RadiusY="{TemplateBinding CornerRadius,Converter={StaticResource BottomRightCornerRadiusConverter}}" />
+                            <Rectangle
                                 Width="{Binding #PART_Track.Bounds.Width}"
-                                Background="{TemplateBinding Background}"
-                                CornerRadius="{DynamicResource ColorSliderCornerRadius}" />
+                                Height="{Binding #PART_Track.Bounds.Height}"
+                                HorizontalAlignment="Stretch"
+                                VerticalAlignment="Stretch"
+                                Fill="{TemplateBinding Background}"
+                                RadiusX="{TemplateBinding CornerRadius,Converter={StaticResource TopLeftCornerRadiusConverter}}"
+                                RadiusY="{TemplateBinding CornerRadius,Converter={StaticResource BottomRightCornerRadiusConverter}}" />
                             <Track
                                 Name="PART_Track"
                                 Width="12"
-                                HorizontalAlignment="Center"
+                                HorizontalAlignment="Stretch"
                                 VerticalAlignment="Stretch"
                                 IsDirectionReversed="{TemplateBinding IsDirectionReversed}"
                                 Maximum="{TemplateBinding Maximum}"
@@ -175,7 +185,7 @@
                                     Width="{TemplateBinding Width}"
                                     Height="{TemplateBinding Width}"
                                     DataContext="{TemplateBinding Value}"
-                                    Theme="{DynamicResource ColorSliderThumbTheme}" />
+                                    Theme="{StaticResource ColorSliderThumbTheme}" />
                             </Track>
                         </Grid>
                     </Border>

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

@@ -1,11 +1,15 @@
 <ResourceDictionary
     xmlns="https://github.com/avaloniaui"
-    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:converters="using:Avalonia.Controls.Converters">
+    <converters:EnumToBoolConverter x:Key="EnumToBoolConverter" />
+    <converters:CornerRadiusToDoubleConverter x:Key="TopLeftCornerRadiusConverter" Corner="TopLeft" />
+    <converters:CornerRadiusToDoubleConverter x:Key="BottomRightCornerRadiusConverter" Corner="BottomRight" />
 
     <ControlTheme x:Key="{x:Type ColorSpectrum}" TargetType="ColorSpectrum">
         <Setter Property="CornerRadius" Value="{DynamicResource ColorSpectrumCornerRadius}" />
         <Setter Property="Template">
-            <ControlTemplate TargetType="ColorSpectrum">
+            <ControlTemplate TargetType="{x:Type ColorSpectrum}">
                 <Panel
                     Name="PART_LayoutRoot"
                     HorizontalAlignment="Stretch"
@@ -21,27 +25,27 @@
                             VerticalAlignment="Stretch"
                             IsHitTestVisible="False"
                             IsVisible="{TemplateBinding Shape,
-                            Converter={x:Static ObjectConverters.Equal},
+                            Converter={StaticResource EnumToBoolConverter},
                             ConverterParameter={x:Static ColorSpectrumShape.Box}}"
-                            RadiusX="{Binding CornerRadius.TopLeft,RelativeSource={RelativeSource TemplatedParent}}"
-                            RadiusY="{Binding CornerRadius.BottomRight,RelativeSource={RelativeSource TemplatedParent}}" />
+                            RadiusX="{TemplateBinding CornerRadius,Converter={StaticResource TopLeftCornerRadiusConverter}}"
+                            RadiusY="{TemplateBinding CornerRadius,Converter={StaticResource BottomRightCornerRadiusConverter}}" />
                         <Rectangle
                             Name="PART_SpectrumOverlayRectangle"
                             HorizontalAlignment="Stretch"
                             VerticalAlignment="Stretch"
                             IsHitTestVisible="False"
                             IsVisible="{TemplateBinding Shape,
-                            Converter={x:Static ObjectConverters.Equal},
+                            Converter={StaticResource EnumToBoolConverter},
                             ConverterParameter={x:Static ColorSpectrumShape.Box}}"
-                            RadiusX="{Binding CornerRadius.TopLeft,RelativeSource={RelativeSource TemplatedParent}}"
-                            RadiusY="{Binding CornerRadius.BottomRight,RelativeSource={RelativeSource TemplatedParent}}" />
+                            RadiusX="{TemplateBinding CornerRadius,Converter={StaticResource TopLeftCornerRadiusConverter}}"
+                            RadiusY="{TemplateBinding CornerRadius,Converter={StaticResource BottomRightCornerRadiusConverter}}" />
                         <Ellipse
                             Name="PART_SpectrumEllipse"
                             HorizontalAlignment="Stretch"
                             VerticalAlignment="Stretch"
                             IsHitTestVisible="False"
                             IsVisible="{TemplateBinding Shape,
-                            Converter={x:Static ObjectConverters.Equal},
+                            Converter={StaticResource EnumToBoolConverter},
                             ConverterParameter={x:Static ColorSpectrumShape.Ring}}" />
                         <Ellipse
                             Name="PART_SpectrumOverlayEllipse"
@@ -49,7 +53,7 @@
                             VerticalAlignment="Stretch"
                             IsHitTestVisible="False"
                             IsVisible="{TemplateBinding Shape,
-                            Converter={x:Static ObjectConverters.Equal},
+                            Converter={StaticResource EnumToBoolConverter},
                             ConverterParameter={x:Static ColorSpectrumShape.Ring}}" />
                         <Canvas
                             Name="PART_InputTarget"
@@ -85,17 +89,17 @@
                             VerticalAlignment="Stretch"
                             IsHitTestVisible="False"
                             IsVisible="{TemplateBinding Shape,
-                            Converter={x:Static ObjectConverters.Equal},
+                            Converter={StaticResource EnumToBoolConverter},
                             ConverterParameter={x:Static ColorSpectrumShape.Box}}"
-                            RadiusX="{Binding CornerRadius.TopLeft,RelativeSource={RelativeSource TemplatedParent}}"
-                            RadiusY="{Binding CornerRadius.BottomRight,RelativeSource={RelativeSource TemplatedParent}}" />
+                            RadiusX="{TemplateBinding CornerRadius,Converter={StaticResource TopLeftCornerRadiusConverter}}"
+                            RadiusY="{TemplateBinding CornerRadius,Converter={StaticResource BottomRightCornerRadiusConverter}}" />
                         <Ellipse
                             Name="BorderEllipse"
                             HorizontalAlignment="Stretch"
                             VerticalAlignment="Stretch"
                             IsHitTestVisible="False"
                             IsVisible="{TemplateBinding Shape,
-                            Converter={x:Static ObjectConverters.Equal},
+                            Converter={StaticResource EnumToBoolConverter},
                             ConverterParameter={x:Static ColorSpectrumShape.Ring}}" />
                     </Panel>
                 </Panel>

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

@@ -1,23 +1,28 @@
 <ResourceDictionary
     xmlns="https://github.com/avaloniaui"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-    xmlns:semi="https://irihi.tech/semi">
+    xmlns:converters="using:Avalonia.Controls.Converters"
+    xmlns:globalization="using:System.Globalization"
+    xmlns:pc="using:Avalonia.Controls.Primitives.Converters"
+    xmlns:cvts="clr-namespace:Semi.Avalonia.ColorPicker.Converters">
+    <pc:ContrastBrushConverter x:Key="ContrastBrushConverter" />
+    <converters:ColorToDisplayNameConverter x:Key="ColorToDisplayNameConverter" />
+    <converters:ColorToHexConverter x:Key="ColorToHexConverter" />
+    <converters:DoNothingForNullConverter x:Key="DoNothingForNullConverter" />
+    <converters:EnumToBoolConverter x:Key="EnumToBoolConverter" />
+    <converters:ToBrushConverter x:Key="ToBrushConverter" />
+    <cvts:HsvColorToTextConverter x:Key="HsvColorToTextConverter" />
+    <cvts:ColorToTextConverter x:Key="ColorToTextConverter" />
+    <cvts:ToColorModel x:Key="ToColorModel" />
+    <globalization:NumberFormatInfo x:Key="ColorViewComponentNumberFormat" NumberDecimalDigits="0" />
 
     <Design.PreviewWith>
-        <StackPanel>
-            <ColorView
-                SelectedIndex="2"
-                IsAlphaVisible="True"
-                IsAlphaEnabled="True"
-                ColorModel="Hsva"
-                HsvColor="hsv(120,7%,90%)" />
-            <ColorView
-                Theme="{DynamicResource SimpleColorView}"
-                IsAlphaVisible="True"
-                IsAlphaEnabled="True"
-                ColorModel="Hsva"
-                HsvColor="hsv(120,7%,90%)" />
-        </StackPanel>
+        <ColorView
+            Theme="{StaticResource SimpleColorView}"
+            IsAlphaVisible="True"
+            IsAlphaEnabled="True"
+            ColorModel="Hsva"
+            HsvColor="hsv(120,7%,90%)" />
     </Design.PreviewWith>
 
     <VisualBrush
@@ -27,12 +32,16 @@
         TileMode="Tile">
         <VisualBrush.Visual>
             <Image Width="8" Height="8">
-                <DrawingImage>
-                    <DrawingGroup>
-                        <GeometryDrawing Brush="Transparent" Geometry="M0 0H2V2H0Z" />
-                        <GeometryDrawing Brush="#19808080" Geometry="M0 1H2V2H1V0H0Z" />
-                    </DrawingGroup>
-                </DrawingImage>
+                <Image.Source>
+                    <DrawingImage>
+                        <DrawingImage.Drawing>
+                            <DrawingGroup>
+                                <GeometryDrawing Brush="Transparent" Geometry="M0,0 L2,0 2,2, 0,2Z" />
+                                <GeometryDrawing Brush="#19808080" Geometry="M0,1 L2,1 2,2, 1,2 1,0 0,0Z" />
+                            </DrawingGroup>
+                        </DrawingImage.Drawing>
+                    </DrawingImage>
+                </Image.Source>
             </Image>
         </VisualBrush.Visual>
     </VisualBrush>
@@ -52,11 +61,11 @@
                     CornerRadius="{TemplateBinding CornerRadius}">
                     <ScrollViewer
                         Name="PART_ScrollViewer"
-                        AllowAutoHide="{TemplateBinding ScrollViewer.AllowAutoHide}"
-                        HorizontalScrollBarVisibility="{TemplateBinding ScrollViewer.HorizontalScrollBarVisibility}"
-                        IsScrollChainingEnabled="{TemplateBinding ScrollViewer.IsScrollChainingEnabled}"
-                        IsDeferredScrollingEnabled="{TemplateBinding ScrollViewer.IsDeferredScrollingEnabled}"
-                        VerticalScrollBarVisibility="{TemplateBinding ScrollViewer.VerticalScrollBarVisibility}">
+                        AllowAutoHide="{TemplateBinding (ScrollViewer.AllowAutoHide)}"
+                        HorizontalScrollBarVisibility="{TemplateBinding (ScrollViewer.HorizontalScrollBarVisibility)}"
+                        IsScrollChainingEnabled="{TemplateBinding (ScrollViewer.IsScrollChainingEnabled)}"
+                        IsDeferredScrollingEnabled="{TemplateBinding (ScrollViewer.IsDeferredScrollingEnabled)}"
+                        VerticalScrollBarVisibility="{TemplateBinding (ScrollViewer.VerticalScrollBarVisibility)}">
                         <ItemsPresenter
                             Name="PART_ItemsPresenter"
                             Margin="{TemplateBinding Padding}"
@@ -73,8 +82,8 @@
         <Setter Property="HorizontalContentAlignment" Value="Stretch" />
         <Setter Property="VerticalContentAlignment" Value="Stretch" />
         <Setter Property="Template">
-            <ControlTemplate TargetType="ListBoxItem">
-                <Panel UseLayoutRounding="False">
+            <ControlTemplate TargetType="{x:Type ListBoxItem}">
+                <Grid UseLayoutRounding="False">
                     <ContentPresenter
                         Name="PART_ContentPresenter"
                         Padding="{TemplateBinding Padding}"
@@ -92,7 +101,7 @@
                         VerticalAlignment="Stretch"
                         IsHitTestVisible="False"
                         StrokeThickness="1" />
-                </Panel>
+                </Grid>
             </ControlTemplate>
         </Setter>
 
@@ -132,14 +141,12 @@
                     Content="{TemplateBinding Content}"
                     ContentTemplate="{TemplateBinding ContentTemplate}"
                     CornerRadius="{TemplateBinding CornerRadius}"
+                    RecognizesAccessKey="True"
                     TextElement.FontSize="{TemplateBinding FontSize}"
                     TextElement.FontWeight="{TemplateBinding FontWeight}"
                     UseLayoutRounding="False" />
             </ControlTemplate>
         </Setter>
-        <Style Selector="^ /template/ ContentPresenter#PART_ContentPresenter">
-            <Setter Property="RecognizesAccessKey" Value="True" />
-        </Style>
         <Style Selector="^:checked">
             <Setter Property="Background" Value="{DynamicResource ColorViewRadioButtonCheckedBackground}" />
             <Setter Property="Foreground" Value="{DynamicResource ColorViewRadioButtonCheckedForeground}" />
@@ -161,14 +168,14 @@
     </ControlTheme>
 
     <ControlTheme x:Key="{x:Type ColorView}" TargetType="ColorView">
-        <!-- Alpha position should match CSS (and default slider order) instead of XAML/WinUI -->
-        <Setter Property="HexInputAlphaPosition" Value="Trailing" />
         <Setter Property="CornerRadius" Value="{DynamicResource ControlCornerRadius}" />
         <Setter Property="Width" Value="300" />
         <Setter Property="Height" Value="300" />
-        <Setter Property="Palette" Value="{DynamicResource SemiColorPalette}" />
+        <Setter Property="Palette">
+            <FluentColorPalette />
+        </Setter>
         <Setter Property="Template">
-            <ControlTemplate TargetType="ColorView">
+            <ControlTemplate TargetType="{x:Type ColorView}">
                 <Grid RowDefinitions="*,Auto">
                     <!--  Backgrounds  -->
                     <!--  TODO: Background="{DynamicResource ColorViewTabBackgroundBrush}"  -->
@@ -190,7 +197,7 @@
                         Padding="0"
                         VerticalAlignment="Stretch"
                         HorizontalContentAlignment="Stretch"
-                        SelectedIndex="{TemplateBinding SelectedIndex, Mode=TwoWay}">
+                        SelectedIndex="{Binding SelectedIndex, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}">
                         <TabControl.Styles>
                             <Style Selector="TabItem">
                                 <Setter Property="MinHeight" Value="32" />
@@ -225,11 +232,11 @@
                                     HorizontalAlignment="Center"
                                     VerticalAlignment="Stretch"
                                     AutomationProperties.Name="Third Component"
-                                    ColorComponent="{Binding #ColorSpectrum.ThirdComponent}"
+                                    ColorComponent="{Binding ThirdComponent, ElementName=ColorSpectrum}"
                                     ColorModel="Hsva"
-                                    HsvColor="{Binding #ColorSpectrum.HsvColor}"
-                                    IsAlphaVisible="False"
-                                    IsPerceptive="True"
+                                    HsvColor="{Binding HsvColor, ElementName=ColorSpectrum}"
+                                    IsAlphaVisible="True"
+                                    IsPerceptive="False"
                                     IsVisible="{TemplateBinding IsColorSpectrumSliderVisible}"
                                     Orientation="Vertical" />
                                 <ColorSpectrum
@@ -238,7 +245,7 @@
                                     HorizontalAlignment="Stretch"
                                     VerticalAlignment="Stretch"
                                     Components="{TemplateBinding ColorSpectrumComponents}"
-                                    HsvColor="{TemplateBinding HsvColor, Mode=TwoWay}"
+                                    HsvColor="{Binding HsvColor, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}"
                                     MaxHue="{TemplateBinding MaxHue}"
                                     MaxSaturation="{TemplateBinding MaxSaturation}"
                                     MaxValue="{TemplateBinding MaxValue}"
@@ -255,10 +262,14 @@
                                     AutomationProperties.Name="Alpha Component"
                                     ColorComponent="Alpha"
                                     ColorModel="Hsva"
-                                    HsvColor="{Binding #ColorSpectrum.HsvColor}"
-                                    IsVisible="{TemplateBinding IsAlphaVisible}"
+                                    HsvColor="{Binding HsvColor, ElementName=ColorSpectrum}"
                                     IsEnabled="{TemplateBinding IsAlphaEnabled}"
                                     Orientation="Vertical">
+                                    <ColorSlider.IsVisible>
+                                        <MultiBinding Converter="{x:Static BoolConverters.And}">
+                                            <Binding Path="IsAlphaVisible" RelativeSource="{RelativeSource TemplatedParent}" />
+                                        </MultiBinding>
+                                    </ColorSlider.IsVisible>
                                 </ColorSlider>
                             </Grid>
                         </TabItem>
@@ -275,11 +286,11 @@
                                 VerticalAlignment="Stretch"
                                 ItemContainerTheme="{StaticResource ColorViewPaletteListBoxItemTheme}"
                                 ItemsSource="{TemplateBinding PaletteColors}"
-                                SelectedItem="{TemplateBinding Color, Mode=TwoWay, Converter={StaticResource DoNothingForNullConverter}}"
+                                SelectedItem="{Binding Color, RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource DoNothingForNullConverter}, Mode=TwoWay}"
                                 Theme="{StaticResource ColorViewPaletteListBoxTheme}"
                                 UseLayoutRounding="False">
                                 <ListBox.ItemTemplate>
-                                    <DataTemplate DataType="Color">
+                                    <DataTemplate DataType="{x:Type Color}">
                                         <Border
                                             HorizontalAlignment="Stretch"
                                             VerticalAlignment="Stretch"
@@ -311,10 +322,6 @@
                                 ColumnDefinitions="Auto,*"
                                 RowDefinitions="Auto,24,*,*,*,*,12"
                                 UseLayoutRounding="False">
-                                <Grid.Resources>
-                                    <Thickness x:Key="TextBoxContentPadding">8 0</Thickness>
-                                    <Thickness x:Key="TextBoxInnerLeftContentPadding">0 0 8 0</Thickness>
-                                </Grid.Resources>
                                 <Grid.Styles>
                                     <Style Selector="NumericUpDown">
                                         <Setter Property="InnerLeftContent">
@@ -344,9 +351,9 @@
                                                 Content="RGB"
                                                 CornerRadius="3,0,0,3"
                                                 IsChecked="{TemplateBinding ColorModel,
-                                                    Converter={StaticResource EnumToBoolConverter},
-                                                    ConverterParameter={x:Static ColorModel.Rgba},
-                                                    Mode=TwoWay}"
+                                                Converter={StaticResource EnumToBoolConverter},
+                                                ConverterParameter={x:Static ColorModel.Rgba},
+                                                Mode=TwoWay}"
                                                 Theme="{DynamicResource ColorViewRadioButton}" />
                                             <RadioButton
                                                 Name="HsvRadioButton"
@@ -356,9 +363,9 @@
                                                 Content="HSV"
                                                 CornerRadius="0,3,3,0"
                                                 IsChecked="{TemplateBinding ColorModel,
-                                                    Converter={StaticResource EnumToBoolConverter},
-                                                    ConverterParameter={x:Static ColorModel.Hsva},
-                                                    Mode=TwoWay}"
+                                                Converter={StaticResource EnumToBoolConverter},
+                                                ConverterParameter={x:Static ColorModel.Hsva},
+                                                Mode=TwoWay}"
                                                 Theme="{DynamicResource ColorViewRadioButton}" />
                                         </Grid>
                                     </Border>
@@ -383,11 +390,11 @@
                                     AllowSpin="True"
                                     Classes="Small"
                                     IsVisible="{TemplateBinding IsComponentTextInputVisible}"
-                                    Maximum="{Binding #Component1Slider.Maximum}"
-                                    Minimum="{Binding #Component1Slider.Minimum}"
+                                    Maximum="{Binding Maximum, ElementName=Component1Slider}"
+                                    Minimum="{Binding Minimum, ElementName=Component1Slider}"
                                     NumberFormat="{StaticResource ColorViewComponentNumberFormat}"
                                     ShowButtonSpinner="False"
-                                    Value="{Binding #Component1Slider.Value,Converter={StaticResource DoNothingForNullConverter}}" />
+                                    Value="{Binding Value, ElementName=Component1Slider}" />
                                 <ColorSlider
                                     Name="Component1Slider"
                                     Grid.Row="2"
@@ -396,7 +403,7 @@
                                     VerticalAlignment="Center"
                                     ColorComponent="Component1"
                                     ColorModel="{TemplateBinding ColorModel,Mode=OneWay}"
-                                    HsvColor="{TemplateBinding HsvColor, Mode=TwoWay}"
+                                    HsvColor="{Binding HsvColor, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}"
                                     IsRoundingEnabled="True"
                                     IsSnapToTickEnabled="True"
                                     IsVisible="{TemplateBinding IsComponentSliderVisible}"
@@ -413,11 +420,11 @@
                                     AllowSpin="True"
                                     Classes="Small"
                                     IsVisible="{TemplateBinding IsComponentTextInputVisible}"
-                                    Maximum="{Binding #Component2Slider.Maximum}"
-                                    Minimum="{Binding #Component2Slider.Minimum}"
+                                    Maximum="{Binding Maximum, ElementName=Component2Slider}"
+                                    Minimum="{Binding Minimum, ElementName=Component2Slider}"
                                     NumberFormat="{StaticResource ColorViewComponentNumberFormat}"
                                     ShowButtonSpinner="False"
-                                    Value="{Binding #Component2Slider.Value,Converter={StaticResource DoNothingForNullConverter}}" />
+                                    Value="{Binding Value, ElementName=Component2Slider}" />
                                 <ColorSlider
                                     Name="Component2Slider"
                                     Grid.Row="3"
@@ -426,7 +433,7 @@
                                     VerticalAlignment="Center"
                                     ColorComponent="Component2"
                                     ColorModel="{TemplateBinding ColorModel,Mode=OneWay}"
-                                    HsvColor="{TemplateBinding HsvColor, Mode=TwoWay}"
+                                    HsvColor="{Binding HsvColor, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}"
                                     IsRoundingEnabled="True"
                                     IsSnapToTickEnabled="True"
                                     IsVisible="{TemplateBinding IsComponentSliderVisible}"
@@ -443,11 +450,11 @@
                                     AllowSpin="True"
                                     Classes="Small"
                                     IsVisible="{TemplateBinding IsComponentTextInputVisible}"
-                                    Maximum="{Binding #Component3Slider.Maximum}"
-                                    Minimum="{Binding #Component3Slider.Minimum}"
+                                    Maximum="{Binding Maximum, ElementName=Component3Slider}"
+                                    Minimum="{Binding Minimum, ElementName=Component3Slider}"
                                     NumberFormat="{StaticResource ColorViewComponentNumberFormat}"
                                     ShowButtonSpinner="False"
-                                    Value="{Binding #Component3Slider.Value,Converter={StaticResource DoNothingForNullConverter}}" />
+                                    Value="{Binding Value, ElementName=Component3Slider}" />
                                 <ColorSlider
                                     Name="Component3Slider"
                                     Grid.Row="4"
@@ -456,7 +463,7 @@
                                     VerticalAlignment="Center"
                                     ColorComponent="Component3"
                                     ColorModel="{TemplateBinding ColorModel,Mode=OneWay}"
-                                    HsvColor="{TemplateBinding HsvColor, Mode=TwoWay}"
+                                    HsvColor="{Binding HsvColor, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}"
                                     IsRoundingEnabled="True"
                                     IsSnapToTickEnabled="True"
                                     IsVisible="{TemplateBinding IsComponentSliderVisible}"
@@ -473,15 +480,15 @@
                                     AllowSpin="True"
                                     Classes="Small"
                                     IsEnabled="{TemplateBinding IsAlphaEnabled}"
-                                    Maximum="{Binding #AlphaComponentSlider.Maximum}"
-                                    Minimum="{Binding #AlphaComponentSlider.Minimum}"
+                                    Maximum="{Binding Maximum, ElementName=AlphaComponentSlider}"
+                                    Minimum="{Binding Minimum, ElementName=AlphaComponentSlider}"
                                     NumberFormat="{StaticResource ColorViewComponentNumberFormat}"
                                     ShowButtonSpinner="False"
-                                    Value="{Binding #AlphaComponentSlider.Value,Converter={StaticResource DoNothingForNullConverter}}">
+                                    Value="{Binding Value, ElementName=AlphaComponentSlider}">
                                     <NumericUpDown.IsVisible>
                                         <MultiBinding Converter="{x:Static BoolConverters.And}">
-                                            <TemplateBinding Property="IsAlphaVisible" />
-                                            <TemplateBinding Property="IsComponentTextInputVisible" />
+                                            <Binding Path="IsAlphaVisible" RelativeSource="{RelativeSource TemplatedParent}" />
+                                            <Binding Path="IsComponentTextInputVisible" RelativeSource="{RelativeSource TemplatedParent}" />
                                         </MultiBinding>
                                     </NumericUpDown.IsVisible>
                                 </NumericUpDown>
@@ -493,7 +500,7 @@
                                     VerticalAlignment="Center"
                                     ColorComponent="Alpha"
                                     ColorModel="{TemplateBinding ColorModel,Mode=OneWay}"
-                                    HsvColor="{TemplateBinding HsvColor, Mode=TwoWay}"
+                                    HsvColor="{Binding HsvColor, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}"
                                     IsEnabled="{TemplateBinding IsAlphaEnabled}"
                                     IsRoundingEnabled="True"
                                     IsSnapToTickEnabled="True"
@@ -501,8 +508,8 @@
                                     TickFrequency="1">
                                     <ColorSlider.IsVisible>
                                         <MultiBinding Converter="{x:Static BoolConverters.And}">
-                                            <TemplateBinding Property="IsAlphaVisible" />
-                                            <TemplateBinding Property="IsComponentSliderVisible" />
+                                            <Binding Path="IsAlphaVisible" RelativeSource="{RelativeSource TemplatedParent}" />
+                                            <Binding Path="IsComponentSliderVisible" RelativeSource="{RelativeSource TemplatedParent}" />
                                         </MultiBinding>
                                     </ColorSlider.IsVisible>
                                 </ColorSlider>
@@ -510,11 +517,11 @@
                         </TabItem>
                     </TabControl>
                     <!--  Previewer  -->
-                    <!-- Note that the drop shadow is allowed to extend past the control bounds -->
+                    <!--  Note that top/bottom margins have -5 to remove for drop shadow padding  -->
                     <ColorPreviewer
                         Grid.Row="1"
-                        Margin="12,0,12,12"
-                        HsvColor="{TemplateBinding HsvColor, Mode=TwoWay}"
+                        Margin="12,-5,12,7"
+                        HsvColor="{Binding HsvColor, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}"
                         IsAccentColorsVisible="{TemplateBinding IsAccentColorsVisible}"
                         IsVisible="{TemplateBinding IsColorPreviewVisible}" />
                 </Grid>
@@ -551,12 +558,11 @@
     </ControlTheme>
 
     <ControlTheme x:Key="SimpleColorView" TargetType="ColorView">
-        <Setter Property="HexInputAlphaPosition" Value="Trailing" />
         <Setter Property="Width" Value="280" />
         <Setter Property="CornerRadius" Value="{DynamicResource ControlCornerRadius}" />
         <Setter Property="ColorSpectrumComponents" Value="SaturationValue" />
         <Setter Property="Template">
-            <ControlTemplate TargetType="ColorView">
+            <ControlTemplate TargetType="{x:Type ColorView}">
                 <Grid>
                     <Grid.RowDefinitions>
                         <RowDefinition Height="*" MinHeight="280" />
@@ -573,7 +579,6 @@
                             Name="ColorSpectrum"
                             HorizontalAlignment="Stretch"
                             VerticalAlignment="Stretch"
-                            CornerRadius="8 8 0 0"
                             Components="{TemplateBinding ColorSpectrumComponents}"
                             HsvColor="{TemplateBinding HsvColor, Mode=TwoWay}"
                             MaxHue="{TemplateBinding MaxHue}"
@@ -597,7 +602,7 @@
                         Orientation="Horizontal" />
 
                     <ColorSlider
-                        Name="ColorSpectrumAlphaSlider"
+                        x:Name="ColorSpectrumAlphaSlider"
                         Grid.Row="2"
                         HorizontalAlignment="Stretch"
                         VerticalAlignment="Center"
@@ -624,43 +629,35 @@
                             CornerRadius="4" />
                         <Panel
                             Name="PART_TextBoxPanel"
-                            Width="116"
+                            Width="106"
                             Margin="4 0 0 0"
                             HorizontalAlignment="Stretch"
                             VerticalAlignment="Center">
                             <TextBox
                                 Name="PART_HexTextBox"
-                                AutomationProperties.Name="Hexadecimal Color"
                                 Classes="Small"
-                                CornerRadius="3 0 0 3"
                                 InnerLeftContent="#"
-                                IsVisible="{Binding #ColorModelComboBox.SelectedValue, Converter={x:Static ObjectConverters.Equal}, ConverterParameter=Hex}"
-                                MaxLength="8">
-                                <TextBox.Resources>
-                                    <Thickness x:Key="TextBoxInnerLeftContentPadding">0 0 4 0</Thickness>
-                                </TextBox.Resources>
-                            </TextBox>
+                                IsVisible="{Binding #ColorModelComboBox.SelectedValue, Converter={StaticResource ToColorModel}, ConverterParameter=Hex}"
+                                Text="{TemplateBinding Color, Converter={StaticResource ColorToHexConverter}, Mode=TwoWay}"
+                                MaxLength="8" />
                             <TextBox
                                 Name="PART_RgbaTextBox"
                                 Classes="Small"
-                                CornerRadius="3 0 0 3"
-                                IsVisible="{Binding #ColorModelComboBox.SelectedValue, Converter={x:Static ObjectConverters.Equal}, ConverterParameter={x:Static ColorModel.Rgba}}"
-                                Text="{TemplateBinding Color, Converter={semi:ColorToTextConverter}, Mode=TwoWay}" />
+                                IsVisible="{Binding #ColorModelComboBox.SelectedValue, Converter={StaticResource ToColorModel}, ConverterParameter=Rgba}"
+                                Text="{TemplateBinding Color, Converter={StaticResource ColorToTextConverter}, Mode=TwoWay}" />
                             <TextBox
                                 Name="PART_HsvaTextBox"
                                 Classes="Small"
-                                CornerRadius="3 0 0 3"
-                                IsVisible="{Binding #ColorModelComboBox.SelectedValue, Converter={x:Static ObjectConverters.Equal}, ConverterParameter={x:Static ColorModel.Hsva}}"
-                                Text="{TemplateBinding HsvColor, Converter={semi:HsvColorToTextConverter}, Mode=TwoWay}" />
+                                IsVisible="{Binding #ColorModelComboBox.SelectedValue, Converter={StaticResource ToColorModel}, ConverterParameter=Hsva}"
+                                Text="{TemplateBinding HsvColor, Converter={StaticResource HsvColorToTextConverter}, Mode=TwoWay}" />
                         </Panel>
 
                         <NumericUpDown
                             Name="AlphaComponentNumericUpDown"
-                            Width="60"
+                            Width="70"
                             HorizontalAlignment="Right"
                             VerticalAlignment="Center"
                             AllowSpin="True"
-                            CornerRadius="0"
                             Classes="Small"
                             IsEnabled="{TemplateBinding IsAlphaEnabled}"
                             Maximum="{Binding #ColorSpectrumAlphaSlider.Maximum}"
@@ -669,21 +666,14 @@
                             ShowButtonSpinner="False"
                             InnerRightContent="%"
                             IsVisible="{TemplateBinding IsAlphaVisible}"
-                            Value="{Binding #ColorSpectrumAlphaSlider.Value,Converter={StaticResource DoNothingForNullConverter}}">
-                            <NumericUpDown.Resources>
-                                <Thickness x:Key="TextBoxContentPadding">12 0 4 0</Thickness>
-                                <Thickness x:Key="TextBoxInnerRightContentPadding">4 0 0 0</Thickness>
-                            </NumericUpDown.Resources>
-                        </NumericUpDown>
+                            Value="{Binding #ColorSpectrumAlphaSlider.Value}" />
                         <ComboBox
                             Name="ColorModelComboBox"
                             Width="80"
-                            CornerRadius="0 3 3 0"
                             VerticalAlignment="Center"
                             Classes="Small"
                             SelectedValue="Hex">
-                            <x:String>Hex</x:String>
-                            <ColorModel>Rgba</ColorModel>
+                            Hex<ColorModel>Rgba</ColorModel>
                             <ColorModel>Hsva</ColorModel>
                         </ComboBox>
                     </StackPanel>

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

@@ -1,17 +0,0 @@
-<ResourceDictionary xmlns="https://github.com/avaloniaui"
-                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-                    xmlns:converters="using:Avalonia.Controls.Converters"
-                    xmlns:pc="using:Avalonia.Controls.Primitives.Converters"
-                    xmlns:globalization="using:System.Globalization">
-    <pc:ContrastBrushConverter x:Key="ContrastBrushConverter" />
-    <pc:AccentColorConverter x:Key="AccentColorConverter" />
-
-    <converters:ColorToDisplayNameConverter x:Key="ColorToDisplayNameConverter" />
-    <converters:DoNothingForNullConverter x:Key="DoNothingForNullConverter" />
-    <converters:ToBrushConverter x:Key="ToBrushConverter" />
-    <converters:ColorToHexConverter x:Key="ColorToHexConverter" AlphaPosition="Trailing" IsAlphaVisible="True" />
-
-    <converters:EnumToBoolConverter x:Key="EnumToBoolConverter" />
-
-    <globalization:NumberFormatInfo x:Key="ColorViewComponentNumberFormat" NumberDecimalDigits="0" />
-</ResourceDictionary>

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

@@ -2,7 +2,6 @@
     xmlns="https://github.com/avaloniaui"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
     <ResourceDictionary.MergedDictionaries>
-        <ResourceInclude Source="Converters.axaml" />
         <ResourceInclude Source="ColorPicker.axaml" />
         <ResourceInclude Source="ColorPreviewer.axaml" />
         <ResourceInclude Source="ColorSlider.axaml" />

src/Semi.Avalonia.ColorPicker/Converters/ColorToTextConverter.cs

@@ -3,19 +3,19 @@ using System.Globalization;
 using System.Linq;
 using Avalonia;
 using Avalonia.Data;
+using Avalonia.Data.Converters;
 using Avalonia.Media;
-using Irihi.Avalonia.Shared.Converters;
 
 namespace Semi.Avalonia.ColorPicker.Converters;
 
-public class ColorToTextConverter : MarkupValueConverter
+public class ColorToTextConverter : IValueConverter
 {
-    public override object Convert(object? value, Type targetType, object? parameter, CultureInfo culture)
+    public object Convert(object? value, Type targetType, object? parameter, CultureInfo culture)
     {
         return value is Color color ? $"{color.R},{color.G},{color.B},{color.A}" : AvaloniaProperty.UnsetValue;
     }
 
-    public override object ConvertBack(object? value, Type targetType, object? parameter, CultureInfo culture)
+    public object ConvertBack(object? value, Type targetType, object? parameter, CultureInfo culture)
     {
         if (value is not string str) return BindingOperations.DoNothing;
         var parts = str.Split(',');

src/Semi.Avalonia.ColorPicker/Converters/HsvColorToTextConverter.cs

@@ -3,21 +3,21 @@ using System.Globalization;
 using System.Linq;
 using Avalonia;
 using Avalonia.Data;
+using Avalonia.Data.Converters;
 using Avalonia.Media;
-using Irihi.Avalonia.Shared.Converters;
 
 namespace Semi.Avalonia.ColorPicker.Converters;
 
-public class HsvColorToTextConverter : MarkupValueConverter
+public class HsvColorToTextConverter : IValueConverter
 {
-    public override object Convert(object? value, Type targetType, object? parameter, CultureInfo culture)
+    public object Convert(object? value, Type targetType, object? parameter, CultureInfo culture)
     {
         return value is HsvColor hsvColor
             ? $"{Math.Round(hsvColor.H)},{Math.Round(hsvColor.S * 100)},{Math.Round(hsvColor.V * 100)},{Math.Round(hsvColor.A * 100)}"
             : AvaloniaProperty.UnsetValue;
     }
 
-    public override object ConvertBack(object? value, Type targetType, object? parameter, CultureInfo culture)
+    public object ConvertBack(object? value, Type targetType, object? parameter, CultureInfo culture)
     {
         if (value is not string str) return BindingOperations.DoNothing;
         var parts = str.Split(',');

src/Semi.Avalonia.ColorPicker/Converters/ToColorModel.cs

@@ -0,0 +1,21 @@
+using System;
+using System.Globalization;
+using Avalonia.Controls;
+using Avalonia.Data.Converters;
+
+namespace Semi.Avalonia.ColorPicker.Converters;
+
+public class ToColorModel : IValueConverter
+{
+    public object Convert(object? value, Type targetType, object? parameter, CultureInfo culture)
+    {
+        return parameter is "Hex" && value is "Hex" ||
+               parameter is "Rgba" && value is ColorModel.Rgba ||
+               parameter is "Hsva" && value is ColorModel.Hsva;
+    }
+
+    public object ConvertBack(object? value, Type targetType, object? parameter, CultureInfo culture)
+    {
+        throw new NotImplementedException();
+    }
+}

src/Semi.Avalonia.ColorPicker/Index.axaml

@@ -3,7 +3,6 @@
         <ResourceDictionary>
             <ResourceDictionary.ThemeDictionaries>
                 <ResourceInclude x:Key="Default" Source="Light.axaml" />
-                <ResourceInclude x:Key="Light" Source="Light.axaml" />
                 <ResourceInclude x:Key="Dark" Source="Dark.axaml" />
             </ResourceDictionary.ThemeDictionaries>
             <ResourceDictionary.MergedDictionaries>

src/Semi.Avalonia.ColorPicker/Properties/AssemblyInfo.cs

@@ -1,5 +1,3 @@
 using Avalonia.Metadata;
 
-[assembly: XmlnsPrefix("https://irihi.tech/semi", "semi")]
-[assembly: XmlnsDefinition("https://irihi.tech/semi", "Semi.Avalonia.ColorPicker")]
-[assembly: XmlnsDefinition("https://irihi.tech/semi", "Semi.Avalonia.ColorPicker.Converters")]
+[assembly: XmlnsDefinition("https://irihi.tech/semi", "Semi.Avalonia.ColorPicker")]

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

@@ -1,9 +1,9 @@
 <Project Sdk="Microsoft.NET.Sdk">
 
     <PropertyGroup>
-        <TargetFrameworks>net8.0;net10.0</TargetFrameworks>
-        <Version>12.0.0</Version>
-        <PackageReleaseNotes>Update to Semi.Avalonia.ColorPicker 12.0.0</PackageReleaseNotes>
+        <TargetFramework>net8.0</TargetFramework>
+        <Version>12.0.0-nightly-20260210000416</Version>
+        <PackageReleaseNotes>Update to Semi.Avalonia.ColorPicker 12.0.0-nightly-20260210000416</PackageReleaseNotes>
         <Title>Semi.Avalonia.ColorPicker</Title>
     </PropertyGroup>
 

src/Semi.Avalonia.ColorPicker/SemiColorDarkPalette.cs

@@ -1,12 +1,12 @@
 using Avalonia.Controls;
 using Avalonia.Media;
-using Irihi.Avalonia.Shared.Helpers;
+using Avalonia.Utilities;
 
 namespace Semi.Avalonia.ColorPicker;
 
-public class SemiColorDarkPalette : IColorPalette
+public class SemiColorDarkPalette: IColorPalette
 {
-    private static readonly Color[,] Colors = new[,]
+    private static readonly Color[,] Colors = new Color[,]
     {
         {
             //Red
@@ -216,30 +216,16 @@ public class SemiColorDarkPalette : IColorPalette
             Color.FromUInt32(0xFFE6E8EA),
             Color.FromUInt32(0xFFF9F9F9),
         },
-        {
-            //AIPurple
-            Color.FromUInt32(0xFF3A1770),
-            Color.FromUInt32(0xFF532394),
-            Color.FromUInt32(0xFF6F31B8),
-            Color.FromUInt32(0xFF8D41DB),
-            Color.FromUInt32(0xFFA744FF),
-            Color.FromUInt32(0xFFC375FF),
-            Color.FromUInt32(0xFFD598FF),
-            Color.FromUInt32(0xFFE5BAFF),
-            Color.FromUInt32(0xFFF3DDFF),
-            Color.FromUInt32(0xFFFBF3FF),
-        },
     };
-
     public Color GetColor(int colorIndex, int shadeIndex)
     {
         return Colors[
-            MathHelpers.SafeClamp(colorIndex, 0, ColorCount - 1),
-            MathHelpers.SafeClamp(shadeIndex, 0, ShadeCount - 1)
+            MathUtilities.Clamp(colorIndex, 0, ColorCount - 1),
+            MathUtilities.Clamp(shadeIndex, 0, ShadeCount - 1)
         ];
     }
 
     public int ColorCount => Colors.GetLength(0);
 
     public int ShadeCount => Colors.GetLength(1);
-}
+}

src/Semi.Avalonia.ColorPicker/SemiColorLightPalette.cs

@@ -1,12 +1,12 @@
 using Avalonia.Controls;
 using Avalonia.Media;
-using Irihi.Avalonia.Shared.Helpers;
+using Avalonia.Utilities;
 
 namespace Semi.Avalonia.ColorPicker;
 
-public class SemiColorLightPalette : IColorPalette
+public class SemiColorLightPalette: IColorPalette
 {
-    private static readonly Color[,] Colors = new[,]
+    private static readonly Color[,] Colors = new Color[,]
     {
         {
             //Red
@@ -216,26 +216,12 @@ public class SemiColorLightPalette : IColorPalette
             Color.FromUInt32(0xFF2E3238),
             Color.FromUInt32(0xFF1C1F23),
         },
-        {
-            //AIPurple
-            Color.FromUInt32(0xFFF8EDFF),
-            Color.FromUInt32(0xFFF2DAFF),
-            Color.FromUInt32(0xFFE3B5FF),
-            Color.FromUInt32(0xFFD191FF),
-            Color.FromUInt32(0xFFBD6CFF),
-            Color.FromUInt32(0xFFA647FF),
-            Color.FromUInt32(0xFF8636DB),
-            Color.FromUInt32(0xFF6928B8),
-            Color.FromUInt32(0xFF4E1C94),
-            Color.FromUInt32(0xFF361270),
-        },
     };
-
     public Color GetColor(int colorIndex, int shadeIndex)
     {
         return Colors[
-            MathHelpers.SafeClamp(colorIndex, 0, ColorCount - 1),
-            MathHelpers.SafeClamp(shadeIndex, 0, ShadeCount - 1)
+            MathUtilities.Clamp(colorIndex, 0, ColorCount - 1),
+            MathUtilities.Clamp(shadeIndex, 0, ShadeCount - 1)
         ];
     }
 

src/Semi.Avalonia.DataGrid/DataGrid.axaml

@@ -1,7 +1,8 @@
 <ResourceDictionary
     xmlns="https://github.com/avaloniaui"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-    xmlns:collections="using:Avalonia.Collections">
+    xmlns:collections="using:Avalonia.Collections"
+    x:CompileBindings="True">
     <ControlTheme x:Key="DataGridCellTextBlockTheme" TargetType="TextBlock">
         <Setter Property="Margin" Value="{DynamicResource DataGridCellTextBlockDefaultMargin}" />
         <Setter Property="VerticalAlignment" Value="Center" />

src/Semi.Avalonia.DataGrid/DataGridSemiTheme.axaml

@@ -6,7 +6,6 @@
         <ResourceDictionary>
             <ResourceDictionary.ThemeDictionaries>
                 <ResourceInclude x:Key="Default" Source="Light.axaml" />
-                <ResourceInclude x:Key="Light" Source="Light.axaml" />
                 <ResourceInclude x:Key="Dark" Source="Dark.axaml" />
             </ResourceDictionary.ThemeDictionaries>
             <ResourceDictionary.MergedDictionaries>

src/Semi.Avalonia.DataGrid/Index.axaml

@@ -3,7 +3,6 @@
         <ResourceDictionary>
             <ResourceDictionary.ThemeDictionaries>
                 <ResourceInclude x:Key="Default" Source="Light.axaml" />
-                <ResourceInclude x:Key="Light" Source="Light.axaml" />
                 <ResourceInclude x:Key="Dark" Source="Dark.axaml" />
             </ResourceDictionary.ThemeDictionaries>
             <ResourceDictionary.MergedDictionaries>

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

@@ -1,9 +1,9 @@
 <Project Sdk="Microsoft.NET.Sdk">
 
     <PropertyGroup>
-        <TargetFrameworks>net8.0;net10.0</TargetFrameworks>
-        <Version>12.0.0</Version>
-        <PackageReleaseNotes>Update to Semi.Avalonia.DataGrid 12.0.0</PackageReleaseNotes>
+        <TargetFrameworks>netstandard2.0;net6.0;net8.0</TargetFrameworks>
+        <Version>11.3.7.2</Version>
+        <PackageReleaseNotes>Update to Semi.Avalonia.DataGrid 11.3.7.2</PackageReleaseNotes>
         <Title>Semi.Avalonia.DataGrid</Title>
     </PropertyGroup>
 

src/Semi.Avalonia.TreeDataGrid/TreeDataGrid.axaml

@@ -1,7 +1,8 @@
 <ResourceDictionary
     xmlns="https://github.com/avaloniaui"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-    xmlns:conv="clr-namespace:Avalonia.Controls.Converters;assembly=Avalonia.Controls.TreeDataGrid">
+    xmlns:conv="clr-namespace:Avalonia.Controls.Converters;assembly=Avalonia.Controls.TreeDataGrid"
+    x:CompileBindings="True">
     <Design.PreviewWith>
         <StackPanel Margin="20">
             <TreeDataGridColumnHeader Header="123" />

src/Semi.Avalonia/Controls/ButtonSpinner.axaml

@@ -20,7 +20,6 @@
                     BorderBrush="{TemplateBinding BorderBrush}"
                     BorderThickness="{TemplateBinding BorderThickness}"
                     Content="{TemplateBinding Content}"
-                    CornerRadius="{TemplateBinding CornerRadius}"
                     ContentTemplate="{TemplateBinding ContentTemplate}" />
             </ControlTemplate>
         </Setter>
@@ -93,7 +92,7 @@
                 </Grid>
             </ControlTemplate>
         </Setter>
-        <Style Selector="^:left /template/ Border#ButtonGroup">
+        <Style Selector="^[ButtonSpinnerLocation=Left] /template/ Border#ButtonGroup">
             <Setter Property="Grid.Column" Value="0" />
             <Setter Property="Margin" Value="0 0 4 0" />
         </Style>
@@ -101,70 +100,4 @@
             <Setter Property="BorderBrush" Value="{DynamicResource ButtonSpinnerRepeatButtonPointeroverBorderBrush}" />
         </Style>
     </ControlTheme>
-
-    <ControlTheme x:Key="SplitButtonSpinner" TargetType="ButtonSpinner">
-        <Setter Property="BorderBrush" Value="{DynamicResource ButtonSpinnerRepeatButtonBorderBrush}" />
-        <Setter Property="BorderThickness" Value="0" />
-        <Setter Property="MinWidth" Value="200" />
-        <Setter Property="Template">
-            <ControlTemplate TargetType="ButtonSpinner">
-                <Grid ColumnDefinitions="Auto, *, Auto">
-                    <RepeatButton
-                        Name="PART_DecreaseButton"
-                        Grid.Column="0"
-                        VerticalAlignment="Stretch"
-                        Padding="{DynamicResource SplitButtonSpinnerButtonPadding}"
-                        BorderBrush="{DynamicResource ButtonSpinnerRepeatButtonBorderBrush}"
-                        BorderThickness="{DynamicResource ButtonSpinnerButtonGroupBorderThickness}"
-                        CornerRadius="{DynamicResource SplitButtonSpinnerLeftButtonCornerRadius}"
-                        IsVisible="{TemplateBinding ShowButtonSpinner}"
-                        Theme="{StaticResource ButtonSpinnerRepeatButton}">
-                        <PathIcon
-                            Theme="{DynamicResource InnerPathIcon}"
-                            Classes="Small"
-                            Data="{DynamicResource SplitButtonSpinnerDecreaseButtonGlyph}"
-                            Foreground="{DynamicResource ButtonSpinnerRepeatButtonForeground}" />
-                    </RepeatButton>
-                    <Border
-                        Grid.Column="1"
-                        Margin="2 0"
-                        BorderBrush="{TemplateBinding BorderBrush}"
-                        BorderThickness="{TemplateBinding BorderThickness}"
-                        CornerRadius="{TemplateBinding CornerRadius}">
-                        <ContentPresenter
-                            Name="PART_ContentPresenter"
-                            Padding="{TemplateBinding Padding}"
-                            HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
-                            VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
-                            Content="{TemplateBinding Content}"
-                            ContentTemplate="{TemplateBinding ContentTemplate}" />
-                    </Border>
-                    <RepeatButton
-                        Name="PART_IncreaseButton"
-                        Grid.Column="2"
-                        VerticalAlignment="Stretch"
-                        Padding="{DynamicResource SplitButtonSpinnerButtonPadding}"
-                        BorderBrush="{DynamicResource ButtonSpinnerRepeatButtonBorderBrush}"
-                        BorderThickness="{DynamicResource ButtonSpinnerButtonGroupBorderThickness}"
-                        CornerRadius="{DynamicResource SplitButtonSpinnerRightButtonCornerRadius}"
-                        IsVisible="{TemplateBinding ShowButtonSpinner}"
-                        Theme="{StaticResource ButtonSpinnerRepeatButton}">
-                        <PathIcon
-                            Theme="{DynamicResource InnerPathIcon}"
-                            Classes="Small"
-                            Data="{DynamicResource SplitButtonSpinnerIncreaseButtonGlyph}"
-                            Foreground="{DynamicResource ButtonSpinnerRepeatButtonForeground}" />
-                    </RepeatButton>
-                </Grid>
-            </ControlTemplate>
-        </Setter>
-        <Style Selector="^:left /template/ RepeatButton#PART_DecreaseButton">
-            <Setter Property="Grid.Column" Value="2" />
-            <Setter Property="CornerRadius" Value="{DynamicResource SplitButtonSpinnerRightButtonCornerRadius}" />
-        </Style>
-        <Style Selector="^:left /template/ RepeatButton#PART_IncreaseButton">
-            <Setter Property="Grid.Column" Value="0" />
-            <Setter Property="CornerRadius" Value="{DynamicResource SplitButtonSpinnerLeftButtonCornerRadius}" />
-        </Style>
-    </ControlTheme>
 </ResourceDictionary>

src/Semi.Avalonia/Controls/CaptionButtons.axaml

@@ -0,0 +1,112 @@
+<ResourceDictionary
+    xmlns="https://github.com/avaloniaui"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+    <Design.PreviewWith>
+        <CaptionButtons />
+    </Design.PreviewWith>
+
+    <ControlTheme x:Key="CaptionButton" TargetType="Button">
+        <Setter Property="Foreground" Value="{DynamicResource CaptionButtonForeground}" />
+        <Setter Property="Background" Value="Transparent" />
+        <Setter Property="CornerRadius" Value="{StaticResource CaptionButtonCornerRadius}" />
+        <Setter Property="Padding" Value="{StaticResource CaptionButtonPadding}" />
+        <Setter Property="Width" Value="{StaticResource CaptionButtonWidth}" />
+        <Setter Property="Height" Value="{StaticResource CaptionButtonHeight}" />
+        <Setter Property="Cursor" Value="Hand" />
+        <Setter Property="VerticalAlignment" Value="Stretch" />
+        <Setter Property="Template">
+            <ControlTemplate TargetType="Button">
+                <ContentPresenter
+                    Name="PART_ContentPresenter"
+                    Padding="{TemplateBinding Padding}"
+                    Foreground="{TemplateBinding Foreground}"
+                    Background="{TemplateBinding Background}"
+                    BorderBrush="{TemplateBinding BorderBrush}"
+                    BorderThickness="{TemplateBinding BorderThickness}"
+                    Content="{TemplateBinding Content}"
+                    ContentTemplate="{TemplateBinding ContentTemplate}"
+                    CornerRadius="{TemplateBinding CornerRadius}" />
+            </ControlTemplate>
+        </Setter>
+
+        <Style Selector="^:pointerover">
+            <Setter Property="Background" Value="{DynamicResource CaptionButtonPointeroverBackground}" />
+        </Style>
+
+        <Style Selector="^:pressed">
+            <Setter Property="Background" Value="{DynamicResource CaptionButtonPressedBackground}" />
+        </Style>
+    </ControlTheme>
+
+    <ControlTheme x:Key="{x:Type CaptionButtons}" TargetType="CaptionButtons">
+        <Setter Property="Foreground" Value="{DynamicResource CaptionButtonForeground}" />
+        <Setter Property="Template">
+            <ControlTemplate TargetType="CaptionButtons">
+                <StackPanel Orientation="Horizontal">
+                    <Button Name="PART_FullScreenButton" Theme="{StaticResource CaptionButton}">
+                        <PathIcon
+                            Name="PART_FullScreenButtonIcon"
+                            Theme="{StaticResource InnerPathIcon}"
+                            Data="{StaticResource WindowExpandGlyph}"
+                            Foreground="{Binding $parent[Button].Foreground}" />
+                    </Button>
+                    <Button
+                        Name="PART_MinimizeButton"
+                        Theme="{StaticResource CaptionButton}"
+                        AutomationProperties.Name="Minimize"
+                        Win32Properties.NonClientHitTestResult="MinButton">
+                        <PathIcon
+                            Name="PART_MinimizeButtonIcon"
+                            Theme="{StaticResource InnerPathIcon}"
+                            Data="{StaticResource WindowMinimizeGlyph}"
+                            Foreground="{Binding $parent[Button].Foreground}" />
+                    </Button>
+                    <Button
+                        Name="PART_RestoreButton"
+                        Theme="{StaticResource CaptionButton}"
+                        AutomationProperties.Name="Maximize"
+                        Win32Properties.NonClientHitTestResult="MaxButton">
+                        <PathIcon
+                            Name="PART_RestoreButtonIcon"
+                            Theme="{StaticResource InnerPathIcon}"
+                            Data="{StaticResource WindowMaximizeGlyph}"
+                            Foreground="{Binding $parent[Button].Foreground}" />
+                    </Button>
+                    <Button
+                        Name="PART_CloseButton"
+                        Theme="{StaticResource CaptionButton}"
+                        AutomationProperties.Name="Close"
+                        Win32Properties.NonClientHitTestResult="Close">
+                        <PathIcon
+                            Name="PART_CloseButtonIcon"
+                            Theme="{StaticResource InnerPathIcon}"
+                            Data="{StaticResource WindowCloseIconGlyph}"
+                            Foreground="{Binding $parent[Button].Foreground}" />
+                    </Button>
+                </StackPanel>
+            </ControlTemplate>
+        </Setter>
+
+        <Style Selector="^ /template/ Button#PART_CloseButton:pointerover">
+            <Setter Property="Foreground" Value="{DynamicResource CaptionButtonCloseForeground}" />
+            <Setter Property="Background" Value="{DynamicResource CaptionButtonClosePointeroverBackground}" />
+        </Style>
+        <Style Selector="^ /template/ Button#PART_CloseButton:pressed">
+            <Setter Property="Foreground" Value="{DynamicResource CaptionButtonCloseForeground}" />
+            <Setter Property="Background" Value="{DynamicResource CaptionButtonClosePressedBackground}" />
+        </Style>
+
+        <Style Selector="^:maximized /template/ PathIcon#PART_RestoreButtonIcon">
+            <Setter Property="Data" Value="{StaticResource WindowRestoreGlyph}" />
+        </Style>
+        <Style Selector="^:fullscreen /template/ PathIcon#PART_FullScreenButtonIcon">
+            <Setter Property="Data" Value="{StaticResource WindowCollapseGlyph}" />
+        </Style>
+        <Style Selector="^:fullscreen /template/ Button#PART_RestoreButton">
+            <Setter Property="IsVisible" Value="False" />
+        </Style>
+        <Style Selector="^:fullscreen /template/ Button#PART_MinimizeButton">
+            <Setter Property="IsVisible" Value="False" />
+        </Style>
+    </ControlTheme>
+</ResourceDictionary>

src/Semi.Avalonia/Controls/Carousel.axaml

@@ -156,7 +156,7 @@
                     Theme="{DynamicResource InnerPathIcon}"
                     Width="{TemplateBinding Width}"
                     Height="{TemplateBinding Height}"
-                    Data="{TemplateBinding Content}"
+                    Data="{DynamicResource CarouselButtonGlyph}"
                     Foreground="{TemplateBinding Foreground}" />
             </ControlTemplate>
         </Setter>
@@ -213,7 +213,6 @@
                         Theme="{DynamicResource CarouselButton}"
                         Margin="{DynamicResource CarouselButtonMargin}"
                         Foreground="{DynamicResource CarouselButtonForeground}"
-                        Content="{StaticResource SemiIconChevronLeft}"
                         IsVisible="{TemplateBinding ItemCount, Converter={x:Static semi:ItemConverter.ItemVisibleConverter}}"
                         Command="{Binding $parent[Carousel].Previous}" />
                     <Button
@@ -223,9 +222,9 @@
                         Theme="{DynamicResource CarouselButton}"
                         Margin="{DynamicResource CarouselButtonMargin}"
                         Foreground="{DynamicResource CarouselButtonForeground}"
-                        Content="{StaticResource SemiIconChevronRight}"
                         IsVisible="{TemplateBinding ItemCount, Converter={x:Static semi:ItemConverter.ItemVisibleConverter}}"
-                        Command="{Binding $parent[Carousel].Next}" />
+                        Command="{Binding $parent[Carousel].Next}"
+                        RenderTransform="rotate(180deg)" />
                 </Grid>
             </ControlTemplate>
         </Setter>

src/Semi.Avalonia/Controls/CarouselPage.axaml

@@ -1,19 +0,0 @@
-<ResourceDictionary
-    xmlns="https://github.com/avaloniaui"
-    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
-    <ControlTheme x:Key="{x:Type CarouselPage}" TargetType="CarouselPage">
-        <Setter Property="Background" Value="Transparent" />
-        <Setter Property="Template">
-            <ControlTemplate TargetType="CarouselPage">
-                <Carousel
-                    Name="PART_Carousel"
-                    Background="{TemplateBinding Background}"
-                    ItemTemplate="{TemplateBinding PageTemplate}"
-                    PageTransition="{TemplateBinding PageTransition}"
-                    ItemsPanel="{TemplateBinding ItemsPanel}"
-                    HorizontalAlignment="Stretch"
-                    VerticalAlignment="Stretch" />
-            </ControlTemplate>
-        </Setter>
-    </ControlTheme>
-</ResourceDictionary>

src/Semi.Avalonia/Controls/CommandBar.axaml

@@ -1,371 +0,0 @@
-<ResourceDictionary
-    xmlns="https://github.com/avaloniaui"
-    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-    xmlns:collections="clr-namespace:Avalonia.Collections;assembly=Avalonia.Base">
-
-    <Design.PreviewWith>
-        <GroupBox Height="500">
-            <GroupBox.Header>
-                <StackPanel>
-                    <ComboBox
-                        Name="lc"
-                        ItemsSource="{DynamicResource LabelPositionList}"
-                        SelectedValue="{x:Static CommandBarDefaultLabelPosition.Bottom}">
-                        <ComboBox.Resources>
-                            <collections:AvaloniaList x:TypeArguments="CommandBarDefaultLabelPosition" x:Key="LabelPositionList">
-                                <CommandBarDefaultLabelPosition>Bottom</CommandBarDefaultLabelPosition>
-                                <CommandBarDefaultLabelPosition>Collapsed</CommandBarDefaultLabelPosition>
-                                <CommandBarDefaultLabelPosition>Right</CommandBarDefaultLabelPosition>
-                            </collections:AvaloniaList>
-                        </ComboBox.Resources>
-                    </ComboBox>
-                    <ToggleSwitch Name="idfe" IsChecked="True" />
-                    <Slider Name="ws" Width="500" Minimum="0" Maximum="500" Value="200" />
-                </StackPanel>
-            </GroupBox.Header>
-            <StackPanel Orientation="Horizontal" VerticalAlignment="Top">
-                <CommandBar
-                    DefaultLabelPosition="{Binding #lc.SelectedValue}"
-                    IsDynamicOverflowEnabled="{Binding #idfe.IsChecked}"
-                    Width="{Binding #ws.Value}">
-                    <CommandBarButton Label="New" Icon="{DynamicResource SemiIconPlus}" />
-                    <CommandBarButton Label="Save" Icon="{DynamicResource SemiIconSave}" />
-                    <CommandBarSeparator />
-                    <CommandBarToggleButton Label="Bold" Icon="{DynamicResource SemiIconBold}" />
-                    <CommandBarToggleButton Label="Italic" Icon="{DynamicResource SemiIconItalic}" />
-                    <CommandBarToggleButton IsEnabled="False" IsChecked="True" Label="Underline" Icon="{DynamicResource SemiIconUnderline}" />
-                    <CommandBarSeparator />
-                    <CommandBarButton Label="Share" Icon="{DynamicResource SemiIconShare}" />
-                    <CommandBarButton Label="Export" Icon="{DynamicResource SemiIconExport}" />
-                    <CommandBarButton Label="Print" Icon="{DynamicResource SemiIconPrint}" />
-                    <CommandBarSeparator />
-                    <CommandBarButton Label="Delete" Icon="{DynamicResource SemiIconDelete}" />
-                </CommandBar>
-            </StackPanel>
-        </GroupBox>
-    </Design.PreviewWith>
-
-    <ControlTheme x:Key="CommandBarButtonBaseTheme" TargetType="Button">
-        <Setter Property="Template">
-            <ControlTemplate TargetType="Button">
-                <Border
-                    Name="PART_Border"
-                    Background="{TemplateBinding Background}"
-                    BorderBrush="{TemplateBinding BorderBrush}"
-                    BorderThickness="{TemplateBinding BorderThickness}"
-                    CornerRadius="{TemplateBinding CornerRadius}"
-                    Padding="{TemplateBinding Padding}">
-                    <StackPanel
-                        Name="PART_LayoutRoot"
-                        Spacing="{DynamicResource CommandBarButtonPanelSpacing}"
-                        HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
-                        VerticalAlignment="{TemplateBinding VerticalContentAlignment}">
-                        <ContentPresenter
-                            Name="PART_IconPresenter"
-                            Foreground="{TemplateBinding Foreground}">
-                            <ContentPresenter.DataTemplates>
-                                <DataTemplate DataType="Geometry">
-                                    <PathIcon
-                                        Theme="{DynamicResource InnerPathIcon}"
-                                        Data="{Binding}" />
-                                </DataTemplate>
-                            </ContentPresenter.DataTemplates>
-                        </ContentPresenter>
-                        <TextBlock
-                            Name="PART_Label"
-                            MaxLines="1"
-                            Foreground="{TemplateBinding Foreground}"
-                            FontSize="{DynamicResource CommandBarButtonLabelFontSize}"
-                            TextTrimming="CharacterEllipsis" />
-                    </StackPanel>
-                </Border>
-            </ControlTemplate>
-        </Setter>
-
-        <Setter Property="Background" Value="{DynamicResource CommandBarButtonBackground}" />
-        <Setter Property="Foreground" Value="{DynamicResource CommandBarButtonForeground}" />
-        <Setter Property="BorderBrush" Value="Transparent" />
-        <Setter Property="BorderThickness" Value="0" />
-        <Setter Property="Padding" Value="{DynamicResource CommandBarButtonPadding}" />
-        <Setter Property="Width" Value="{DynamicResource CommandBarButtonWidth}" />
-        <Setter Property="MinHeight" Value="{DynamicResource CommandBarButtonMinHeight}" />
-
-        <Setter Property="CornerRadius" Value="{DynamicResource CommandBarButtonCornerRadius}" />
-        <Setter Property="HorizontalContentAlignment" Value="Center" />
-        <Setter Property="VerticalContentAlignment" Value="Center" />
-        <Setter Property="Cursor" Value="Hand" />
-
-        <Style Selector="^:pointerover /template/ Border#PART_Border">
-            <Setter Property="Background" Value="{DynamicResource CommandBarButtonPointeroverBackground}" />
-        </Style>
-
-        <Style Selector="^:pressed /template/ Border#PART_Border">
-            <Setter Property="Background" Value="{DynamicResource CommandBarButtonPressedBackground}" />
-        </Style>
-
-        <Style Selector="^:disabled">
-            <Style Selector="^ /template/ ContentPresenter#PART_IconPresenter">
-                <Setter Property="Foreground" Value="{DynamicResource CommandBarButtonDisabledForeground}" />
-            </Style>
-            <Style Selector="^ /template/ TextBlock#PART_Label">
-                <Setter Property="Foreground" Value="{DynamicResource CommandBarButtonDisabledForeground}" />
-            </Style>
-        </Style>
-    </ControlTheme>
-
-    <!--  CommandBarButton  -->
-    <ControlTheme
-        x:Key="{x:Type CommandBarButton}"
-        BasedOn="{StaticResource CommandBarButtonBaseTheme}"
-        TargetType="CommandBarButton">
-
-        <Style Selector="^ /template/ TextBlock#PART_Label">
-            <Setter Property="Text" Value="{TemplateBinding Label}" />
-        </Style>
-        <Style Selector="^ /template/ ContentPresenter#PART_IconPresenter">
-            <Setter Property="Content" Value="{TemplateBinding Icon}" />
-        </Style>
-
-        <!--  IsCompact: hide label, use compact width  -->
-        <Style Selector="^[IsCompact=True]">
-            <Setter Property="Width" Value="{DynamicResource CommandBarButtonCompactWidth}" />
-            <Style Selector="^ /template/ TextBlock#PART_Label">
-                <Setter Property="IsVisible" Value="False" />
-            </Style>
-        </Style>
-
-        <!--  LabelPosition=Collapsed: hide label, use compact width  -->
-        <Style Selector="^[LabelPosition=Collapsed]">
-            <Setter Property="Width" Value="{DynamicResource CommandBarButtonCompactWidth}" />
-            <Style Selector="^ /template/ TextBlock#PART_Label">
-                <Setter Property="IsVisible" Value="False" />
-            </Style>
-        </Style>
-
-        <!--  LabelPosition=Right: horizontal layout, auto-width  -->
-        <Style Selector="^[LabelPosition=Right]">
-            <Setter Property="Width" Value="{x:Static x:Double.NaN}" />
-            <Setter Property="MinWidth" Value="{DynamicResource CommandBarButtonCompactWidth}" />
-            <Style Selector="^ /template/ StackPanel#PART_LayoutRoot">
-                <Setter Property="Orientation" Value="Horizontal" />
-            </Style>
-            <Style Selector="^ /template/ ContentPresenter#PART_IconPresenter">
-                <Setter Property="VerticalAlignment" Value="Center" />
-            </Style>
-            <Style Selector="^ /template/ TextBlock#PART_Label">
-                <Setter Property="VerticalAlignment" Value="Center" />
-            </Style>
-        </Style>
-
-        <!--  IsInOverflow: full-width horizontal layout for use inside overflow popup  -->
-        <Style Selector="^[IsInOverflow=True]">
-            <Setter Property="HorizontalContentAlignment" Value="Left" />
-            <Setter Property="Width" Value="{x:Static x:Double.NaN}" />
-            <Setter Property="MinHeight" Value="{DynamicResource CommandBarButtonOverflowMinHeight}" />
-            <Setter Property="Padding" Value="{DynamicResource CommandBarButtonOverflowPadding}" />
-            <Style Selector="^ /template/ StackPanel#PART_LayoutRoot">
-                <Setter Property="Orientation" Value="Horizontal" />
-            </Style>
-            <Style Selector="^ /template/ ContentPresenter#PART_IconPresenter">
-                <Setter Property="VerticalAlignment" Value="Center" />
-            </Style>
-            <Style Selector="^ /template/ TextBlock#PART_Label">
-                <Setter Property="VerticalAlignment" Value="Center" />
-            </Style>
-        </Style>
-    </ControlTheme>
-
-    <!--  CommandBarToggleButton  -->
-    <ControlTheme
-        x:Key="{x:Type CommandBarToggleButton}"
-        BasedOn="{StaticResource CommandBarButtonBaseTheme}"
-        TargetType="CommandBarToggleButton">
-
-        <Style Selector="^ /template/ TextBlock#PART_Label">
-            <Setter Property="Text" Value="{TemplateBinding Label}" />
-        </Style>
-        <Style Selector="^ /template/ ContentPresenter#PART_IconPresenter">
-            <Setter Property="Content" Value="{TemplateBinding Icon}" />
-        </Style>
-
-        <Style Selector="^:checked">
-            <Style Selector="^ /template/ Border#PART_Border">
-                <Setter Property="Background" Value="{DynamicResource CommandBarToggleButtonCheckedBackground}" />
-            </Style>
-            <Style Selector="^ /template/ ContentPresenter#PART_IconPresenter">
-                <Setter Property="Foreground" Value="{DynamicResource CommandBarToggleButtonCheckedForeground}" />
-            </Style>
-            <Style Selector="^:pointerover /template/ Border#PART_Border">
-                <Setter Property="Background" Value="{DynamicResource CommandBarToggleButtonCheckedPointeroverBackground}" />
-            </Style>
-            <Style Selector="^:pressed /template/ Border#PART_Border">
-                <Setter Property="Background" Value="{DynamicResource CommandBarToggleButtonCheckedPressedBackground}" />
-            </Style>
-            <Style Selector="^:disabled /template/ ContentPresenter#PART_IconPresenter">
-                <Setter Property="Foreground" Value="{DynamicResource CommandBarToggleButtonCheckedDisabledForeground}" />
-            </Style>
-        </Style>
-
-        <!--  IsCompact: hide label, use compact width  -->
-        <Style Selector="^[IsCompact=True]">
-            <Setter Property="Width" Value="{DynamicResource CommandBarButtonCompactWidth}" />
-            <Style Selector="^ /template/ TextBlock#PART_Label">
-                <Setter Property="IsVisible" Value="False" />
-            </Style>
-        </Style>
-
-        <!--  LabelPosition=Collapsed: hide label, use compact width  -->
-        <Style Selector="^[LabelPosition=Collapsed]">
-            <Setter Property="Width" Value="{DynamicResource CommandBarButtonCompactWidth}" />
-            <Style Selector="^ /template/ TextBlock#PART_Label">
-                <Setter Property="IsVisible" Value="False" />
-            </Style>
-        </Style>
-
-        <!--  LabelPosition=Right: horizontal layout, auto-width  -->
-        <Style Selector="^[LabelPosition=Right]">
-            <Setter Property="Width" Value="{x:Static x:Double.NaN}" />
-            <Setter Property="MinWidth" Value="{DynamicResource CommandBarButtonCompactWidth}" />
-            <Style Selector="^ /template/ StackPanel#PART_LayoutRoot">
-                <Setter Property="Orientation" Value="Horizontal" />
-            </Style>
-            <Style Selector="^ /template/ ContentPresenter#PART_IconPresenter">
-                <Setter Property="VerticalAlignment" Value="Center" />
-            </Style>
-            <Style Selector="^ /template/ TextBlock#PART_Label">
-                <Setter Property="VerticalAlignment" Value="Center" />
-            </Style>
-        </Style>
-
-        <!--  IsInOverflow: full-width horizontal layout for use inside overflow popup  -->
-        <Style Selector="^[IsInOverflow=True]">
-            <Setter Property="HorizontalContentAlignment" Value="Left" />
-            <Setter Property="Width" Value="{x:Static x:Double.NaN}" />
-            <Setter Property="MinHeight" Value="{DynamicResource CommandBarButtonOverflowMinHeight}" />
-            <Setter Property="Padding" Value="{DynamicResource CommandBarButtonOverflowPadding}" />
-            <Style Selector="^ /template/ StackPanel#PART_LayoutRoot">
-                <Setter Property="Orientation" Value="Horizontal" />
-            </Style>
-            <Style Selector="^ /template/ ContentPresenter#PART_IconPresenter">
-                <Setter Property="VerticalAlignment" Value="Center" />
-            </Style>
-            <Style Selector="^ /template/ TextBlock#PART_Label">
-                <Setter Property="VerticalAlignment" Value="Center" />
-            </Style>
-        </Style>
-    </ControlTheme>
-
-    <!--  CommandBarSeparator  -->
-    <ControlTheme x:Key="{x:Type CommandBarSeparator}" TargetType="CommandBarSeparator">
-        <Setter Property="Background" Value="{DynamicResource CommandBarSeparatorBackground}" />
-        <Setter Property="Width" Value="{DynamicResource CommandBarSeparatorWidth}" />
-        <Setter Property="MinHeight" Value="{DynamicResource CommandBarSeparatorMinHeight}" />
-        <Setter Property="Margin" Value="{DynamicResource CommandBarSeparatorMargin}" />
-        <Setter Property="Template">
-            <ControlTemplate TargetType="CommandBarSeparator">
-                <Border
-                    Background="{TemplateBinding Background}"
-                    Width="{TemplateBinding Width}"
-                    MinHeight="{TemplateBinding MinHeight}" />
-            </ControlTemplate>
-        </Setter>
-
-        <!--  IsInOverflow: horizontal line separator  -->
-        <Style Selector="^[IsInOverflow=True]">
-            <Setter Property="HorizontalAlignment" Value="Stretch" />
-            <Setter Property="Width" Value="{x:Static x:Double.NaN}" />
-            <Setter Property="Height" Value="{DynamicResource CommandBarSeparatorOverflowHeight}" />
-            <Setter Property="MinHeight" Value="0" />
-            <Setter Property="Margin" Value="{DynamicResource CommandBarSeparatorOverflowMargin}" />
-        </Style>
-    </ControlTheme>
-
-    <!--  CommandBar  -->
-    <ControlTheme x:Key="{x:Type CommandBar}" TargetType="CommandBar">
-        <Setter Property="Background" Value="{DynamicResource CommandBarBackground}" />
-        <Setter Property="Foreground" Value="{DynamicResource CommandBarForeground}" />
-        <Setter Property="BorderBrush" Value="{DynamicResource CommandBarBorderBrush}" />
-        <Setter Property="BorderThickness" Value="{DynamicResource CommandBarBorderThickness}" />
-        <Setter Property="CornerRadius" Value="{DynamicResource CommandBarCornerRadius}" />
-        <Setter Property="MinHeight" Value="{DynamicResource CommandBarMinHeight}" />
-        <Setter Property="Padding" Value="{DynamicResource CommandBarPadding}" />
-        <Setter Property="HorizontalAlignment" Value="Stretch" />
-        <Setter Property="Template">
-            <ControlTemplate TargetType="CommandBar">
-                <Border
-                    Background="{TemplateBinding Background}"
-                    BorderBrush="{TemplateBinding BorderBrush}"
-                    BorderThickness="{TemplateBinding BorderThickness}"
-                    CornerRadius="{TemplateBinding CornerRadius}"
-                    MinHeight="{TemplateBinding MinHeight}"
-                    Padding="{TemplateBinding Padding}">
-                    <Panel>
-                        <DockPanel KeyboardNavigation.TabNavigation="Cycle">
-                            <!--  Overflow button (docked right)  -->
-                            <CommandBarButton
-                                Name="PART_OverflowButton"
-                                DockPanel.Dock="Right"
-                                Icon="{DynamicResource CommandBarOverflowButtonGlyph}"
-                                IsCompact="True"
-                                IsVisible="{TemplateBinding IsOverflowButtonVisible}" />
-
-                            <!--  Custom content (docked left)  -->
-                            <ContentPresenter
-                                Name="PART_ContentPresenter"
-                                DockPanel.Dock="Left"
-                                Content="{TemplateBinding Content}"
-                                VerticalAlignment="Center" />
-
-                            <!--  Primary commands (fills remaining space, right-aligned)  -->
-                            <ItemsControl
-                                Name="PART_PrimaryCommands"
-                                ItemsSource="{Binding VisiblePrimaryCommands, RelativeSource={RelativeSource TemplatedParent}}"
-                                HorizontalAlignment="Right"
-                                VerticalAlignment="Stretch"
-                                ClipToBounds="True">
-                                <ItemsControl.ItemsPanel>
-                                    <ItemsPanelTemplate>
-                                        <StackPanel Orientation="Horizontal" Spacing="2" />
-                                    </ItemsPanelTemplate>
-                                </ItemsControl.ItemsPanel>
-                            </ItemsControl>
-                        </DockPanel>
-
-                        <!--  Overflow popup  -->
-                        <Popup
-                            Name="PART_OverflowPopup"
-                            IsOpen="{TemplateBinding IsOpen, Mode=TwoWay}"
-                            PlacementTarget="{Binding #PART_OverflowButton}"
-                            Placement="Bottom"
-                            IsLightDismissEnabled="True"
-                            WindowManagerAddShadowHint="False">
-                            <Border
-                                MinHeight="{DynamicResource CommandBarOverflowMinHeight}"
-                                MaxWidth="{DynamicResource CommandBarOverflowMaxWidth}"
-                                MaxHeight="{DynamicResource CommandBarOverflowMaxHeight}"
-                                Margin="{DynamicResource CommandBarOverflowMargin}"
-                                Padding="{DynamicResource CommandBarOverflowPadding}"
-                                Background="{DynamicResource CommandBarOverflowBackground}"
-                                BorderBrush="{DynamicResource CommandBarOverflowBorderBrush}"
-                                BorderThickness="{DynamicResource CommandBarBorderThickness}"
-                                BoxShadow="{DynamicResource CommandBarOverflowBoxShadow}"
-                                CornerRadius="{DynamicResource CommandBarOverflowCornerRadius}">
-
-                                <ItemsControl
-                                    Name="PART_OverflowPresenter"
-                                    ItemsSource="{Binding OverflowItems, RelativeSource={RelativeSource TemplatedParent}}">
-                                    <ItemsControl.ItemsPanel>
-                                        <ItemsPanelTemplate>
-                                            <StackPanel />
-                                        </ItemsPanelTemplate>
-                                    </ItemsControl.ItemsPanel>
-                                </ItemsControl>
-                            </Border>
-                        </Popup>
-                    </Panel>
-                </Border>
-            </ControlTemplate>
-        </Setter>
-    </ControlTheme>
-
-</ResourceDictionary>

src/Semi.Avalonia/Controls/ContentPage.axaml

@@ -1,42 +0,0 @@
-<ResourceDictionary
-    xmlns="https://github.com/avaloniaui"
-    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
-    <Design.PreviewWith>
-        <ContentPage
-            Width="400"
-            Height="300"
-            Background="White">
-            <TextBlock
-                HorizontalAlignment="Center"
-                VerticalAlignment="Center"
-                Text="ContentPage" />
-        </ContentPage>
-    </Design.PreviewWith>
-
-    <ControlTheme x:Key="{x:Type ContentPage}" TargetType="ContentPage">
-        <Setter Property="Background" Value="{DynamicResource ContentPageBackground}" />
-        <Setter Property="Foreground" Value="{DynamicResource ContentPageForeground}" />
-        <Setter Property="Template">
-            <ControlTemplate TargetType="ContentPage">
-                <DockPanel>
-                    <ContentPresenter
-                        Name="PART_TopCommandBar"
-                        DockPanel.Dock="Top" />
-                    <ContentPresenter
-                        Name="PART_BottomCommandBar"
-                        DockPanel.Dock="Bottom" />
-                    <ContentPresenter
-                        Name="PART_ContentPresenter"
-                        HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
-                        VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
-                        Background="{TemplateBinding Background}"
-                        BorderBrush="{TemplateBinding BorderBrush}"
-                        BorderThickness="{TemplateBinding BorderThickness}"
-                        CornerRadius="{TemplateBinding CornerRadius}"
-                        Content="{TemplateBinding Content}"
-                        ContentTemplate="{TemplateBinding ContentTemplate}" />
-                </DockPanel>
-            </ControlTemplate>
-        </Setter>
-    </ControlTheme>
-</ResourceDictionary>

src/Semi.Avalonia/Controls/DatePicker.axaml

@@ -261,7 +261,7 @@
             <Setter Property="Foreground" Value="{DynamicResource DateTimePickerButtonDisabledIconForeground}" />
         </Style>
 
-        <!--  Changes foreground for placeholder text when SelectedDate is null  -->
+        <!--  Changes foreground for watermark text when SelectedDate is null  -->
         <Style Selector="^:hasnodate /template/ Button#PART_FlyoutButton TextBlock">
             <Setter Property="Foreground" Value="{DynamicResource DateTimePickerEmptyForeground}" />
         </Style>

src/Semi.Avalonia/Controls/DrawerPage.axaml

@@ -1,252 +0,0 @@
-<ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
-    <Design.PreviewWith>
-        <DrawerPage Width="400" Height="300" />
-    </Design.PreviewWith>
-
-    <ControlTheme x:Key="{x:Type DrawerPage}" TargetType="DrawerPage">
-        <Setter Property="Background" Value="{DynamicResource DrawerPageBackground}" />
-        <Setter Property="Foreground" Value="{DynamicResource DrawerPageForeground}" />
-        <Setter Property="Template">
-            <ControlTemplate TargetType="DrawerPage">
-                <SplitView
-                    Name="PART_SplitView"
-                    CompactPaneLength="{TemplateBinding CompactDrawerLength}"
-                    DisplayMode="{TemplateBinding DisplayMode}"
-                    IsPaneOpen="{Binding IsOpen, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}"
-                    OpenPaneLength="{TemplateBinding DrawerLength}"
-                    PaneBackground="{Binding DrawerBackground, RelativeSource={RelativeSource TemplatedParent}}">
-                    <SplitView.Pane>
-                        <DockPanel Background="{TemplateBinding DrawerBackground}">
-                            <!--  Compact-mode toggle: visible only in CompactOverlay/CompactInline.  -->
-                            <ToggleButton
-                                Name="PART_CompactPaneToggle"
-                                Width="{DynamicResource ButtonDefaultHeight}"
-                                Height="{DynamicResource ButtonDefaultHeight}"
-                                HorizontalAlignment="Left"
-                                AutomationProperties.Name="Toggle navigation drawer"
-                                Background="Transparent"
-                                DockPanel.Dock="Top"
-                                IsChecked="{Binding #PART_SplitView.IsPaneOpen, Mode=TwoWay}"
-                                IsVisible="False"
-                                ToolTip.Tip="Toggle navigation drawer">
-                                <Panel>
-                                    <PathIcon
-                                        HorizontalAlignment="Center"
-                                        VerticalAlignment="Center"
-                                        Data="{DynamicResource DrawerPageMenuGlyph}"
-                                        Foreground="{DynamicResource DrawerPagePaneButtonForeground}"
-                                        IsVisible="{TemplateBinding DrawerIcon, Converter={x:Static ObjectConverters.IsNull}}"
-                                        Theme="{DynamicResource InnerPathIcon}" />
-                                    <ContentPresenter
-                                        Name="PART_CompactPaneIconPresenter"
-                                        HorizontalAlignment="Center"
-                                        VerticalAlignment="Center"
-                                        Content="{TemplateBinding DrawerIcon}"
-                                        ContentTemplate="{TemplateBinding DrawerIconTemplate}"
-                                        Foreground="{DynamicResource DrawerPagePaneButtonForeground}"
-                                        IsVisible="{TemplateBinding DrawerIcon, Converter={x:Static ObjectConverters.IsNotNull}}" />
-                                </Panel>
-                            </ToggleButton>
-                            <ContentPresenter
-                                Name="PART_DrawerHeader"
-                                Background="{TemplateBinding DrawerHeaderBackground}"
-                                Content="{TemplateBinding DrawerHeader}"
-                                ContentTemplate="{TemplateBinding DrawerHeaderTemplate}"
-                                DockPanel.Dock="Top"
-                                IsVisible="{TemplateBinding DrawerHeader,
-                                                            Converter={x:Static ObjectConverters.IsNotNull}}" />
-                            <ContentPresenter
-                                Name="PART_DrawerFooter"
-                                Background="{TemplateBinding DrawerFooterBackground}"
-                                Content="{TemplateBinding DrawerFooter}"
-                                ContentTemplate="{TemplateBinding DrawerFooterTemplate}"
-                                DockPanel.Dock="Bottom"
-                                IsVisible="{TemplateBinding DrawerFooter,
-                                                            Converter={x:Static ObjectConverters.IsNotNull}}" />
-                            <ContentPresenter
-                                Name="PART_DrawerPresenter"
-                                HorizontalContentAlignment="Stretch"
-                                VerticalContentAlignment="Stretch"
-                                Content="{TemplateBinding Drawer}"
-                                ContentTemplate="{TemplateBinding DrawerTemplate}" />
-                        </DockPanel>
-                    </SplitView.Pane>
-                    <Grid HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
-                        <DockPanel Name="PART_ContentDock">
-                            <Border
-                                Name="PART_TopBar"
-                                Height="{DynamicResource DrawerPageTopBarMinHeight}"
-                                Padding="5"
-                                Background="{DynamicResource DrawerPageTopBarBackground}"
-                                DockPanel.Dock="Top">
-                                <DockPanel HorizontalAlignment="Stretch">
-                                    <ToggleButton
-                                        Name="PART_PaneButton"
-                                        Width="{DynamicResource ButtonDefaultHeight}"
-                                        Height="{DynamicResource ButtonDefaultHeight}"
-                                        AutomationProperties.Name="Toggle navigation drawer"
-                                        Background="Transparent"
-                                        DockPanel.Dock="Left"
-                                        IsChecked="{Binding #PART_SplitView.IsPaneOpen, Mode=TwoWay}"
-                                        ToolTip.Tip="Toggle navigation drawer">
-                                        <Panel>
-                                            <PathIcon
-                                                HorizontalAlignment="Center"
-                                                VerticalAlignment="Center"
-                                                Data="{DynamicResource DrawerPageMenuGlyph}"
-                                                Foreground="{DynamicResource DrawerPagePaneButtonForeground}"
-                                                IsVisible="{TemplateBinding DrawerIcon, Converter={x:Static ObjectConverters.IsNull}}"
-                                                Theme="{DynamicResource InnerPathIcon}" />
-                                            <ContentPresenter
-                                                Name="PART_PaneIconPresenter"
-                                                HorizontalAlignment="Center"
-                                                VerticalAlignment="Center"
-                                                Content="{TemplateBinding DrawerIcon}"
-                                                ContentTemplate="{TemplateBinding DrawerIconTemplate}"
-                                                Foreground="{DynamicResource DrawerPagePaneButtonForeground}"
-                                                IsVisible="{TemplateBinding DrawerIcon, Converter={x:Static ObjectConverters.IsNotNull}}" />
-                                        </Panel>
-                                    </ToggleButton>
-                                    <ContentControl
-                                        Name="PART_TitlePresenter"
-                                        Margin="8,0,0,0"
-                                        VerticalAlignment="Center"
-                                        VerticalContentAlignment="Center"
-                                        Content="{TemplateBinding Header}"
-                                        FontSize="16"
-                                        FontWeight="SemiBold"
-                                        IsVisible="{TemplateBinding Header,
-                                                                    Converter={x:Static ObjectConverters.IsNotNull}}" />
-                                </DockPanel>
-                            </Border>
-                            <Border
-                                Name="PART_BottomBar"
-                                Height="{DynamicResource DrawerPageTopBarMinHeight}"
-                                Padding="5"
-                                Background="{DynamicResource DrawerPageTopBarBackground}"
-                                DockPanel.Dock="Bottom"
-                                IsVisible="False">
-                                <DockPanel HorizontalAlignment="Stretch">
-                                    <ToggleButton
-                                        Name="PART_BottomPaneButton"
-                                        AutomationProperties.Name="Toggle navigation drawer"
-                                        Background="Transparent"
-                                        DockPanel.Dock="Left"
-                                        IsChecked="{Binding #PART_SplitView.IsPaneOpen, Mode=TwoWay}"
-                                        ToolTip.Tip="Toggle navigation drawer">
-                                        <Panel>
-                                            <PathIcon
-                                                HorizontalAlignment="Center"
-                                                VerticalAlignment="Center"
-                                                Data="{DynamicResource DrawerPaneButtonIcon}"
-                                                IsVisible="{TemplateBinding DrawerIcon, Converter={x:Static ObjectConverters.IsNull}}"
-                                                Theme="{DynamicResource InnerPathIcon}" />
-                                            <ContentPresenter
-                                                Name="PART_BottomPaneIconPresenter"
-                                                HorizontalAlignment="Center"
-                                                VerticalAlignment="Center"
-                                                Content="{TemplateBinding DrawerIcon}"
-                                                ContentTemplate="{TemplateBinding DrawerIconTemplate}"
-                                                IsVisible="{TemplateBinding DrawerIcon, Converter={x:Static ObjectConverters.IsNotNull}}" />
-                                        </Panel>
-                                    </ToggleButton>
-                                    <ContentControl
-                                        Name="PART_BottomTitlePresenter"
-                                        Margin="8,0,0,0"
-                                        VerticalAlignment="Center"
-                                        VerticalContentAlignment="Center"
-                                        Content="{TemplateBinding Header}"
-                                        FontSize="16"
-                                        FontWeight="SemiBold"
-                                        IsVisible="{TemplateBinding Header,
-                                                                    Converter={x:Static ObjectConverters.IsNotNull}}" />
-                                </DockPanel>
-                            </Border>
-                            <ContentPresenter
-                                Name="PART_ContentPresenter"
-                                HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
-                                VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
-                                Background="{TemplateBinding Background}"
-                                BorderBrush="{TemplateBinding BorderBrush}"
-                                BorderThickness="{TemplateBinding BorderThickness}"
-                                Content="{TemplateBinding Content}"
-                                ContentTemplate="{TemplateBinding ContentTemplate}"
-                                CornerRadius="{TemplateBinding CornerRadius}" />
-                        </DockPanel>
-                        <Border
-                            Name="PART_Backdrop"
-                            Background="{TemplateBinding BackdropBrush}"
-                            IsHitTestVisible="False"
-                            IsVisible="False" />
-                    </Grid>
-                </SplitView>
-            </ControlTemplate>
-        </Setter>
-
-        <Style Selector="^:placement-right /template/ ToggleButton#PART_PaneButton">
-            <Setter Property="DockPanel.Dock" Value="Right" />
-        </Style>
-
-        <!--  Bottom placement: swap top bar for bottom bar  -->
-        <Style Selector="^:placement-bottom /template/ Border#PART_TopBar">
-            <Setter Property="IsVisible" Value="False" />
-        </Style>
-        <Style Selector="^:placement-bottom /template/ Border#PART_BottomBar">
-            <Setter Property="IsVisible" Value="True" />
-        </Style>
-
-        <!--  Bottom placement + compact modes: pane compact strip provides toggle, hide bottom bar  -->
-        <Style Selector="^:placement-bottom[DisplayMode=CompactOverlay] /template/ Border#PART_BottomBar">
-            <Setter Property="IsVisible" Value="False" />
-        </Style>
-        <Style Selector="^:placement-bottom[DisplayMode=CompactInline] /template/ Border#PART_BottomBar">
-            <Setter Property="IsVisible" Value="False" />
-        </Style>
-
-        <!--  Horizontal pane (Bottom/Top): compact toggle must dock Left so drawer content can fill the rest  -->
-        <Style Selector="^:placement-bottom /template/ ToggleButton#PART_CompactPaneToggle">
-            <Setter Property="DockPanel.Dock" Value="Left" />
-        </Style>
-        <Style Selector="^:placement-top /template/ ToggleButton#PART_CompactPaneToggle">
-            <Setter Property="DockPanel.Dock" Value="Left" />
-        </Style>
-
-        <Style Selector="^[DrawerBehavior=Locked] /template/ Border#PART_TopBar">
-            <Setter Property="IsVisible" Value="False" />
-        </Style>
-
-        <Style Selector="^[DrawerBehavior=Disabled] /template/ Border#PART_TopBar">
-            <Setter Property="IsVisible" Value="False" />
-        </Style>
-
-        <Style Selector="^:detail-is-navpage /template/ Border#PART_TopBar">
-            <Setter Property="IsVisible" Value="False" />
-        </Style>
-
-        <Style Selector="^[DisplayMode=CompactOverlay] /template/ Border#PART_TopBar">
-            <Setter Property="IsVisible" Value="False" />
-        </Style>
-
-        <Style Selector="^[DisplayMode=CompactOverlay] /template/ ToggleButton#PART_CompactPaneToggle">
-            <Setter Property="IsVisible" Value="True" />
-        </Style>
-
-        <Style Selector="^[DisplayMode=CompactInline] /template/ Border#PART_TopBar">
-            <Setter Property="IsVisible" Value="False" />
-        </Style>
-
-        <Style Selector="^[DisplayMode=CompactInline] /template/ ToggleButton#PART_CompactPaneToggle">
-            <Setter Property="IsVisible" Value="True" />
-        </Style>
-
-        <Style Selector="^[IsInNavigationPage=True] /template/ Border#PART_TopBar">
-            <Setter Property="IsVisible" Value="False" />
-        </Style>
-
-        <!--  NavigationPage already hosts a hamburger toggle — suppress the compact pane toggle.  -->
-        <Style Selector="^:detail-is-navpage /template/ ToggleButton#PART_CompactPaneToggle">
-            <Setter Property="IsVisible" Value="False" />
-        </Style>
-
-    </ControlTheme>
-</ResourceDictionary>

src/Semi.Avalonia/Controls/EmbeddableControlRoot.axaml

@@ -10,7 +10,7 @@
                 <Panel>
                     <Border Name="PART_TransparencyFallback" IsHitTestVisible="False" />
                     <Border Background="{TemplateBinding Background}">
-                        <VisualLayerManager Name="PART_VisualLayerManager">
+                        <VisualLayerManager>
                             <ContentPresenter
                                 Name="PART_ContentPresenter"
                                 Margin="{TemplateBinding Padding}"

src/Semi.Avalonia/Controls/HeaderedContentControl.axaml

@@ -116,13 +116,5 @@
                 </Border>
             </ControlTemplate>
         </Setter>
-
-        <Style Selector="^ /template/ ContentPresenter#PART_HeaderPresenter">
-            <Setter Property="RecognizesAccessKey" Value="True" />
-        </Style>
-
-        <Style Selector="^ /template/ ContentPresenter#PART_ContentPresenter">
-            <Setter Property="RecognizesAccessKey" Value="True" />
-        </Style>
     </ControlTheme>
 </ResourceDictionary>

src/Semi.Avalonia/Controls/MenuFlyoutPresenter.axaml

@@ -54,17 +54,4 @@
             </ControlTemplate>
         </Setter>
     </ControlTheme>
-
-    <ControlTheme
-        x:Key="HorizontalMenuFlyoutPresenter"
-        TargetType="MenuFlyoutPresenter"
-        BasedOn="{StaticResource {x:Type MenuFlyoutPresenter}}">
-        <Setter Property="Padding" Value="0" />
-        <Setter Property="MinWidth" Value="{DynamicResource HorizontalMenuFlyoutThemeMinWidth}" />
-        <Setter Property="ItemsPanel">
-            <ItemsPanelTemplate>
-                <StackPanel Orientation="Horizontal" />
-            </ItemsPanelTemplate>
-        </Setter>
-    </ControlTheme>
 </ResourceDictionary>

src/Semi.Avalonia/Controls/NavigationPage.axaml

@@ -1,123 +0,0 @@
-<ResourceDictionary
-    xmlns="https://github.com/avaloniaui"
-    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
-    <Design.PreviewWith>
-        <NavigationPage Width="400" Height="300" />
-    </Design.PreviewWith>
-
-    <ControlTheme x:Key="{x:Type NavigationPage}" TargetType="NavigationPage">
-        <Setter Property="Background" Value="Transparent" />
-        <Setter Property="BarHeight" Value="{DynamicResource NavigationPageBarMinHeight}" />
-        <Setter Property="Template">
-            <ControlTemplate TargetType="NavigationPage">
-                <Panel ClipToBounds="True">
-                    <DockPanel>
-                        <Border
-                            Name="PART_NavBarSpacer"
-                            Height="{TemplateBinding EffectiveBarHeight}"
-                            IsVisible="False"
-                            DockPanel.Dock="Top" />
-                        <ContentPresenter
-                            Name="PART_BottomCommandBar"
-                            DockPanel.Dock="Bottom"
-                            Background="{TemplateBinding Background}"
-                            Content="{Binding CurrentPage.(NavigationPage.BottomCommandBar), RelativeSource={RelativeSource TemplatedParent}, FallbackValue={x:Null}}" />
-                        <Panel
-                            Name="PART_ContentHost"
-                            Background="{TemplateBinding Background}"
-                            ClipToBounds="True">
-                            <ContentPresenter Name="PART_PageBackPresenter" />
-                            <ContentPresenter Name="PART_PagePresenter" />
-                        </Panel>
-                    </DockPanel>
-
-                    <Border
-                        Name="PART_NavigationBar"
-                        VerticalAlignment="Top"
-                        MinHeight="{TemplateBinding EffectiveBarHeight}"
-                        Padding="{DynamicResource NavigationPageBarPadding}"
-                        Background="{DynamicResource NavigationPageBarBackground}"
-                        BorderBrush="{DynamicResource NavigationPageBarBorderBrush}"
-                        BorderThickness="{DynamicResource NavigationPageBarBorderThickness}">
-                        <Grid ColumnDefinitions="Auto,*,Auto">
-                            <Button
-                                Name="PART_BackButton"
-                                Grid.Column="0"
-                                Classes="Tertiary"
-                                Height="{TemplateBinding BarHeight}"
-                                Width="{TemplateBinding BarHeight}"
-                                Padding="8"
-                                IsVisible="{TemplateBinding IsBackButtonEffectivelyVisible}"
-                                Theme="{StaticResource BorderlessButton}">
-                                <Panel Background="Transparent">
-                                    <PathIcon
-                                        Name="PART_BackButtonDefaultIcon"
-                                        Theme="{StaticResource InnerPathIcon}"
-                                        Data="{DynamicResource NavigationPageBackButtonGlyph}" />
-                                    <ContentPresenter
-                                        Name="PART_BackButtonContentPresenter"
-                                        VerticalAlignment="Center"
-                                        HorizontalAlignment="Center" />
-                                </Panel>
-                            </Button>
-                            <ContentPresenter
-                                Name="PART_Header"
-                                Grid.Column="1"
-                                FontWeight="SemiBold"
-                                Content="{Binding CurrentPage?.Header, RelativeSource={RelativeSource TemplatedParent}, FallbackValue={x:Null}}"
-                                ContentTemplate="{Binding CurrentPage?.HeaderTemplate, RelativeSource={RelativeSource TemplatedParent}, FallbackValue={x:Null}}"
-                                VerticalAlignment="Center"
-                                Margin="12,0" />
-                            <ContentPresenter
-                                Name="PART_TopCommandBar"
-                                Grid.Column="2"
-                                HorizontalAlignment="Right"
-                                Content="{Binding CurrentPage?.(NavigationPage.TopCommandBar), RelativeSource={RelativeSource TemplatedParent}, FallbackValue={x:Null}}" />
-                        </Grid>
-                    </Border>
-
-                    <Border
-                        Name="PART_NavBarShadow"
-                        ZIndex="1"
-                        VerticalAlignment="Top"
-                        IsVisible="False"
-                        Height="4"
-                        IsHitTestVisible="False">
-                        <Border.Background>
-                            <LinearGradientBrush StartPoint="0%,0%" EndPoint="0%,100%">
-                                <GradientStop Color="#0C000000" Offset="0" />
-                                <GradientStop Color="#00000000" Offset="1" />
-                            </LinearGradientBrush>
-                        </Border.Background>
-                    </Border>
-                    <ContentPresenter
-                        Name="PART_ModalBackPresenter"
-                        ZIndex="99"
-                        IsVisible="False"
-                        Background="{TemplateBinding Background}" />
-                    <ContentPresenter
-                        Name="PART_ModalPresenter"
-                        ZIndex="100"
-                        IsVisible="False"
-                        Background="{TemplateBinding Background}" />
-                </Panel>
-            </ControlTemplate>
-        </Setter>
-
-        <Style Selector="^ /template/ Border#PART_NavigationBar">
-            <Setter Property="Background" Value="{DynamicResource NavigationBarBackground}" />
-        </Style>
-
-        <Style Selector="^:nav-bar-inset /template/ Border#PART_NavBarSpacer">
-            <Setter Property="IsVisible" Value="True" />
-        </Style>
-
-        <Style Selector="^:nav-bar-compact /template/ ContentPresenter#PART_TopCommandBar CommandBar">
-            <Setter Property="DefaultLabelPosition" Value="Collapsed" />
-        </Style>
-        
-        <Style Selector="^.Large">
-            <Setter Property="BarHeight" Value="{DynamicResource NavigationPageBarLargeMinHeight}" />
-        </Style>
-    </ControlTheme>
-</ResourceDictionary>

src/Semi.Avalonia/Controls/NumericUpDown.axaml

@@ -52,15 +52,6 @@
         <Style Selector="^.Small">
             <Setter Property="MinHeight" Value="{DynamicResource NumericUpDownSmallHeight}" />
         </Style>
-        
-        <Style Selector="^.Split">
-            <Style Selector="^ /template/ ButtonSpinner#PART_Spinner">
-                <Setter Property="Theme" Value="{DynamicResource SplitButtonSpinner}" />
-            </Style>
-            <Style Selector="^ /template/ TextBox#PART_TextBox">
-                <Setter Property="CornerRadius" Value="0" />
-            </Style>
-        </Style>
 
         <Style Selector="^:error">
             <Style Selector="^ /template/ TextBox#PART_TextBox">

src/Semi.Avalonia/Controls/PipsPager.axaml

@@ -1,130 +0,0 @@
-<ResourceDictionary
-    xmlns="https://github.com/avaloniaui"
-    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
-    
-    <Design.PreviewWith>
-        <StackPanel Margin="20" >
-            <PipsPager NumberOfPages="10" />
-        </StackPanel>
-    </Design.PreviewWith>
-    
-    <ControlTheme x:Key="PipsPagerButton" TargetType="Button">
-        <Setter Property="Width" Value="24" />
-        <Setter Property="Height" Value="24" />
-        <Setter Property="Foreground" Value="{DynamicResource PipsPagerButtonForeground}" />
-        <Setter Property="Cursor" Value="Hand" />
-        <Setter Property="Template">
-            <ControlTemplate TargetType="Button">
-                <PathIcon
-                    Theme="{DynamicResource InnerPathIcon}"
-                    Width="{TemplateBinding Width}"
-                    Height="{TemplateBinding Height}"
-                    Data="{TemplateBinding Content}"
-                    Foreground="{TemplateBinding Foreground}" />
-            </ControlTemplate>
-        </Setter>
-        <Style Selector="^:pointerover /template/ PathIcon">
-            <Setter Property="Foreground" Value="{DynamicResource PipsPagerButtonPointeroverForeground}" />
-        </Style>
-    </ControlTheme>
-    
-    <ControlTheme x:Key="PipsPagerIndicatorDotListBoxItem" TargetType="ListBoxItem">
-        <Setter Property="Foreground" Value="{DynamicResource PipsPagerIndicatorForeground}" />
-        <Setter Property="Margin" Value="4" />
-        <Setter Property="Cursor" Value="Hand" />
-        <Setter Property="Template">
-            <ControlTemplate TargetType="ListBoxItem">
-                <Ellipse
-                    Name="Container"
-                    Width="{DynamicResource CarouselIndicatorDotWidth}"
-                    Height="{DynamicResource CarouselIndicatorDotHeight}"
-                    Fill="{TemplateBinding Foreground}" />
-            </ControlTemplate>
-        </Setter>
-        <Style Selector="^:pointerover">
-            <Setter Property="Foreground" Value="{DynamicResource PipsPagerIndicatorPointeroverForeground}" />
-        </Style>
-        <Style Selector="^:pressed">
-            <Setter Property="Foreground" Value="{DynamicResource PipsPagerIndicatorPressedForeground}" />
-        </Style>
-        <Style Selector="^:selected">
-            <Setter Property="Foreground" Value="{DynamicResource PipsPagerIndicatorSelectedForeground}" />
-        </Style>
-    </ControlTheme>
-
-    <ControlTheme x:Key="{x:Type PipsPager}" TargetType="PipsPager">
-        <Setter Property="IsTabStop" Value="False" />
-        <Setter Property="PreviousButtonTheme" Value="{StaticResource PipsPagerButton}" />
-        <Setter Property="NextButtonTheme" Value="{StaticResource PipsPagerButton}" />
-        <Setter Property="Template">
-            <ControlTemplate>
-                <StackPanel
-                    Name="PART_RootPanel"
-                    Orientation="{TemplateBinding Orientation}"
-                    Background="{TemplateBinding Background}"
-                    ClipToBounds="False">
-                    <Button
-                        Name="PART_PreviousButton"
-                        Theme="{TemplateBinding PreviousButtonTheme}"
-                        IsVisible="{TemplateBinding IsPreviousButtonVisible}"
-                        Foreground="{DynamicResource PipsPagerButtonForeground}"
-                        Content="{StaticResource SemiIconSmallTriangleLeft}" />
-
-                    <ListBox
-                        Name="PART_PipsPagerList"
-                        HorizontalAlignment="Center"
-                        VerticalAlignment="Center"
-                        ScrollViewer.HorizontalScrollBarVisibility="Hidden"
-                        ScrollViewer.VerticalScrollBarVisibility="Hidden"
-                        ItemsSource="{Binding TemplateSettings.Pips, RelativeSource={RelativeSource TemplatedParent}}"
-                        SelectedIndex="{TemplateBinding SelectedPageIndex, Mode=TwoWay}"
-                        AutoScrollToSelectedItem="False"
-                        ItemContainerTheme="{StaticResource PipsPagerIndicatorDotListBoxItem}">
-                        <ListBox.ItemsPanel>
-                            <ItemsPanelTemplate>
-                                <StackPanel Orientation="{Binding $parent[PipsPager].Orientation}" />
-                            </ItemsPanelTemplate>
-                        </ListBox.ItemsPanel>
-                    </ListBox>
-
-                    <Button
-                        Name="PART_NextButton"
-                        Theme="{TemplateBinding NextButtonTheme}"
-                        Foreground="{DynamicResource PipsPagerButtonForeground}"
-                        Content="{StaticResource SemiIconSmallTriangleRight}"
-                        IsVisible="{TemplateBinding IsNextButtonVisible}" />
-                </StackPanel>
-            </ControlTemplate>
-        </Setter>
-
-        <Style Selector="^:horizontal /template/ StackPanel#PART_RootPanel">
-            <Setter Property="Orientation" Value="Horizontal" />
-        </Style>
-
-        <Style Selector="^:vertical">
-
-            <Style Selector="^ /template/ StackPanel#PART_RootPanel">
-                <Setter Property="Orientation" Value="Vertical" />
-                <Setter Property="HorizontalAlignment" Value="Center" />
-            </Style>
-
-            <Style Selector="^ /template/ Button#PART_PreviousButton">
-                <Setter Property="Content" Value="{DynamicResource SemiIconSmallTriangleTop}" />
-            </Style>
-            <Style Selector="^ /template/ Button#PART_NextButton">
-                <Setter Property="Content" Value="{DynamicResource SemiIconSmallTriangleDown}" />
-            </Style>
-        </Style>
-
-        <Style Selector="^:first-page /template/ Button#PART_PreviousButton">
-            <Setter Property="Opacity" Value="0" />
-            <Setter Property="IsHitTestVisible" Value="False" />
-        </Style>
-
-        <Style Selector="^:last-page /template/ Button#PART_NextButton">
-            <Setter Property="Opacity" Value="0" />
-            <Setter Property="IsHitTestVisible" Value="False" />
-        </Style>
-    </ControlTheme>
-
-</ResourceDictionary>

src/Semi.Avalonia/Controls/Popup.axaml

@@ -13,7 +13,7 @@
                 <LayoutTransformControl LayoutTransform="{TemplateBinding Transform}">
                     <Panel>
                         <Border Name="PART_TransparencyFallback" IsHitTestVisible="False" />
-                        <VisualLayerManager Name="PART_VisualLayerManager">
+                        <VisualLayerManager IsPopup="True">
                             <LayoutTransformControl Name="PART_LayoutTransform">
                                 <ContentPresenter
                                     Name="PART_ContentPresenter"
@@ -37,7 +37,7 @@
         <Setter Property="Template">
             <ControlTemplate>
                 <LayoutTransformControl LayoutTransform="{TemplateBinding Transform}">
-                    <VisualLayerManager Name="PART_VisualLayerManager">
+                    <VisualLayerManager IsPopup="True">
                         <LayoutTransformControl Name="PART_LayoutTransform">
                             <ContentPresenter
                                 Name="PART_ContentPresenter"

src/Semi.Avalonia/Controls/ProgressBar.axaml

@@ -4,54 +4,87 @@
     xmlns:semi="https://irihi.tech/semi"
     xmlns:converters="using:Avalonia.Controls.Converters">
     <Design.PreviewWith>
-        <StackPanel Width="400" Margin="20">
-            <ProgressBar />
-            <ProgressBar Value="20" />
-            <ProgressBar Value="50" Classes="Success" />
-            <ProgressBar Value="80" Classes="Warning" />
-            <ProgressBar Value="100" Classes="Error" />
-            <ProgressBar ShowProgressText="True" />
-            <ProgressBar Value="20" ShowProgressText="True" />
-            <ProgressBar Value="50" Classes="Success" ShowProgressText="True" />
-            <ProgressBar Value="80" Classes="Warning" ShowProgressText="True" />
-            <ProgressBar Value="100" Classes="Error" ShowProgressText="True" />
-            <ProgressBar Classes="Left" ShowProgressText="True" />
-            <ProgressBar Value="20" Classes="Left" ShowProgressText="True" />
-            <ProgressBar Value="50" Classes="Left Success" ShowProgressText="True" />
-            <ProgressBar Value="80" Classes="Left Warning" ShowProgressText="True" />
-            <ProgressBar Value="100" Classes="Left Error" ShowProgressText="True" />
-            <ProgressBar Classes="Right" ShowProgressText="True" />
-            <ProgressBar Value="20" Classes="Right" ShowProgressText="True" />
-            <ProgressBar Value="50" Classes="Right Success" ShowProgressText="True" />
-            <ProgressBar Value="80" Classes="Right Warning" ShowProgressText="True" />
-            <ProgressBar Value="100" Classes="Right Error" ShowProgressText="True" />
-
-            <StackPanel Orientation="Horizontal">
-                <StackPanel.Styles>
-                    <Style Selector="ProgressBar">
-                        <Setter Property="Orientation" Value="Vertical" />
-                    </Style>
-                </StackPanel.Styles>
-                <ProgressBar />
-                <ProgressBar Value="20" />
-                <ProgressBar Value="50" Classes="Success" />
-                <ProgressBar Value="80" Classes="Warning" />
-                <ProgressBar Value="100" Classes="Error" />
-                <ProgressBar ShowProgressText="True" />
-                <ProgressBar Value="20" ShowProgressText="True" />
-                <ProgressBar Value="50" Classes="Success" ShowProgressText="True" />
-                <ProgressBar Value="80" Classes="Warning" ShowProgressText="True" />
-                <ProgressBar Value="100" Classes="Error" ShowProgressText="True" />
-                <ProgressBar Classes="Top" ShowProgressText="True" />
-                <ProgressBar Value="20" Classes="Top" ShowProgressText="True" />
-                <ProgressBar Value="50" Classes="Top Success" ShowProgressText="True" />
-                <ProgressBar Value="80" Classes="Top Warning" ShowProgressText="True" />
-                <ProgressBar Value="100" Classes="Top Error" ShowProgressText="True" />
-                <ProgressBar Classes="Bottom" ShowProgressText="True" />
-                <ProgressBar Value="20" Classes="Bottom" ShowProgressText="True" />
-                <ProgressBar Value="50" Classes="Bottom Success" ShowProgressText="True" />
-                <ProgressBar Value="80" Classes="Bottom Warning" ShowProgressText="True" />
-                <ProgressBar Value="100" Classes="Bottom Error" ShowProgressText="True" />
+        <StackPanel Margin="20" 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"
+                    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>
         </StackPanel>
     </Design.PreviewWith>
@@ -82,7 +115,7 @@
                             <Panel Name="DeterminateRoot" Opacity="1">
                                 <Panel.Transitions>
                                     <Transitions>
-                                        <DoubleTransition Property="Opacity" Duration="0:0:0.2" />
+                                        <DoubleTransition Property="Opacity" Duration="0:0:0.197" />
                                     </Transitions>
                                 </Panel.Transitions>
                                 <Border
@@ -94,7 +127,7 @@
                             <Panel Name="IndeterminateRoot" Opacity="0">
                                 <Panel.Transitions>
                                     <Transitions>
-                                        <DoubleTransition Property="Opacity" Duration="0:0:0.2" />
+                                        <DoubleTransition Property="Opacity" Duration="0:0:0.197" />
                                     </Transitions>
                                 </Panel.Transitions>
                                 <Border
@@ -125,7 +158,7 @@
                             <TextBlock.Text>
                                 <MultiBinding Converter="{StaticResource StringFormatConverter}">
                                     <TemplateBinding Property="ProgressTextFormat" />
-                                    <TemplateBinding Property="Value" />
+                                    <Binding Path="Value" RelativeSource="{RelativeSource TemplatedParent}" />
                                     <TemplateBinding Property="Percentage" />
                                     <TemplateBinding Property="Minimum" />
                                     <TemplateBinding Property="Maximum" />
@@ -154,155 +187,153 @@
         <Style Selector="^.Danger">
             <Setter Property="Foreground" Value="{DynamicResource ProgressBarDangerForeground}" />
         </Style>
-
+        <!-- Error style is obsolete, use Danger instead -->
+        <Style Selector="^.Error">
+            <Setter Property="Foreground" Value="{DynamicResource ProgressBarErrorForeground}" />
+        </Style>
+        <Style Selector="^:horizontal /template/ Border#PART_Indicator">
+            <Setter Property="HorizontalAlignment" Value="Left" />
+            <Setter Property="VerticalAlignment" Value="Stretch" />
+        </Style>
+        <Style Selector="^:vertical /template/ Border#PART_Indicator">
+            <Setter Property="HorizontalAlignment" Value="Stretch" />
+            <Setter Property="VerticalAlignment" Value="Top" />
+        </Style>
         <Style Selector="^:horizontal">
             <Setter Property="MinWidth" Value="200" />
             <Setter Property="MinHeight" Value="4" />
-            <Style Selector="^ /template/ Border#PART_Indicator">
-                <Setter Property="HorizontalAlignment" Value="Left" />
-            </Style>
-            <Style Selector="^ /template/ Border#IndeterminateProgressBarIndicator">
-                <Setter Property="Width" Value="{Binding $parent[ProgressBar].TemplateSettings.ContainerWidth}" />
-            </Style>
-            <Style Selector="^ /template/ Border#IndeterminateProgressBarIndicator2">
-                <Setter Property="Width" Value="{Binding $parent[ProgressBar].TemplateSettings.Container2Width}" />
-            </Style>
-
-            <Style Selector="^.Left,^.Top">
-                <Style Selector="^ /template/ LayoutTransformControl#PART_LayoutTransformControl">
-                    <Setter Property="Grid.Column" Value="0" />
-                    <Setter Property="Grid.Row" Value="1" />
-                    <Setter Property="Margin" Value="0 0 16 0" />
-                    <Setter Property="MinWidth" Value="45" />
-                </Style>
-                <Style Selector="^ /template/ Border#ProgressBarRoot">
-                    <Setter Property="MinHeight" Value="4" />
-                    <Setter Property="VerticalAlignment" Value="Center" />
-                </Style>
-            </Style>
-            <Style Selector="^.Right,^.Bottom">
-                <Style Selector="^ /template/ LayoutTransformControl#PART_LayoutTransformControl">
-                    <Setter Property="Grid.Column" Value="2" />
-                    <Setter Property="Grid.Row" Value="1" />
-                    <Setter Property="Margin" Value="16 0 0 0" />
-                    <Setter Property="MinWidth" Value="45" />
-                </Style>
-                <Style Selector="^ /template/ Border#ProgressBarRoot">
-                    <Setter Property="MinHeight" Value="4" />
-                    <Setter Property="VerticalAlignment" Value="Center" />
-                </Style>
-            </Style>
         </Style>
-
         <Style Selector="^:vertical">
-            <Style Selector="^ /template/ LayoutTransformControl#PART_LayoutTransformControl">
-                <Setter Property="LayoutTransform">
-                    <RotateTransform Angle="90" />
-                </Setter>
-            </Style>
             <Setter Property="MinWidth" Value="4" />
             <Setter Property="MinHeight" Value="200" />
-            <Style Selector="^ /template/ Border#PART_Indicator">
-                <Setter Property="VerticalAlignment" Value="Top" />
+        </Style>
+        <Style Selector="^:vertical /template/ LayoutTransformControl#PART_LayoutTransformControl">
+            <Setter Property="LayoutTransform">
+                <RotateTransform Angle="90" />
+            </Setter>
+        </Style>
+        <Style Selector="^:indeterminate /template/ Panel#DeterminateRoot">
+            <Setter Property="Opacity" Value="0" />
+        </Style>
+        <Style Selector="^:indeterminate /template/ Panel#IndeterminateRoot">
+            <Setter Property="Opacity" Value="1" />
+        </Style>
+        <Style Selector="^:horizontal:indeterminate /template/ Border#IndeterminateProgressBarIndicator">
+            <Style.Animations>
+                <Animation IterationCount="Infinite" Duration="0:0:2">
+                    <KeyFrame KeySpline="0.4,0,0.6,1" KeyTime="0:0:0">
+                        <Setter Property="TranslateTransform.X" Value="{Binding $parent[ProgressBar].TemplateSettings.ContainerAnimationStartPosition}" />
+                    </KeyFrame>
+                    <KeyFrame KeySpline="0.4,0,0.6,1" KeyTime="0:0:1.5">
+                        <Setter Property="TranslateTransform.X" Value="{Binding $parent[ProgressBar].TemplateSettings.ContainerAnimationEndPosition}" />
+                    </KeyFrame>
+                    <KeyFrame KeySpline="0.4,0,0.6,1" KeyTime="0:0:2">
+                        <Setter Property="TranslateTransform.X" Value="{Binding $parent[ProgressBar].TemplateSettings.ContainerAnimationEndPosition}" />
+                    </KeyFrame>
+                </Animation>
+            </Style.Animations>
+        </Style>
+        <Style Selector="^:horizontal:indeterminate /template/ Border#IndeterminateProgressBarIndicator2">
+            <Style.Animations>
+                <Animation IterationCount="Infinite" Duration="0:0:2">
+                    <KeyFrame KeySpline="0.4,0,0.6,1" KeyTime="0:0:0">
+                        <Setter Property="TranslateTransform.X" Value="{Binding $parent[ProgressBar].TemplateSettings.Container2AnimationStartPosition}" />
+                    </KeyFrame>
+                    <KeyFrame KeySpline="0.4,0,0.6,1" KeyTime="0:0:0.75">
+                        <Setter Property="TranslateTransform.X" Value="{Binding $parent[ProgressBar].TemplateSettings.Container2AnimationStartPosition}" />
+                    </KeyFrame>
+                    <KeyFrame KeySpline="0.4,0,0.6,1" KeyTime="0:0:2">
+                        <Setter Property="TranslateTransform.X" Value="{Binding $parent[ProgressBar].TemplateSettings.Container2AnimationEndPosition}" />
+                    </KeyFrame>
+                </Animation>
+            </Style.Animations>
+        </Style>
+        <Style Selector="^:vertical:indeterminate /template/ Border#IndeterminateProgressBarIndicator">
+            <Style.Animations>
+                <Animation IterationCount="Infinite" Duration="0:0:2">
+                    <KeyFrame KeySpline="0.4,0,0.6,1" KeyTime="0:0:0">
+                        <Setter Property="TranslateTransform.Y" Value="{Binding $parent[ProgressBar].TemplateSettings.ContainerAnimationStartPosition}" />
+                    </KeyFrame>
+                    <KeyFrame KeySpline="0.4,0,0.6,1" KeyTime="0:0:1.5">
+                        <Setter Property="TranslateTransform.Y" Value="{Binding $parent[ProgressBar].TemplateSettings.ContainerAnimationEndPosition}" />
+                    </KeyFrame>
+                    <KeyFrame KeySpline="0.4,0,0.6,1" KeyTime="0:0:2">
+                        <Setter Property="TranslateTransform.Y" Value="{Binding $parent[ProgressBar].TemplateSettings.ContainerAnimationEndPosition}" />
+                    </KeyFrame>
+                </Animation>
+            </Style.Animations>
+        </Style>
+        <Style Selector="^:vertical:indeterminate /template/ Border#IndeterminateProgressBarIndicator2">
+            <Style.Animations>
+                <Animation IterationCount="Infinite" Duration="0:0:2">
+                    <KeyFrame KeySpline="0.4,0,0.6,1" KeyTime="0:0:0">
+                        <Setter Property="TranslateTransform.Y" Value="{Binding $parent[ProgressBar].TemplateSettings.Container2AnimationStartPosition}" />
+                    </KeyFrame>
+                    <KeyFrame KeySpline="0.4,0,0.6,1" KeyTime="0:0:0.75">
+                        <Setter Property="TranslateTransform.Y" Value="{Binding $parent[ProgressBar].TemplateSettings.Container2AnimationStartPosition}" />
+                    </KeyFrame>
+                    <KeyFrame KeySpline="0.4,0,0.6,1" KeyTime="0:0:2">
+                        <Setter Property="TranslateTransform.Y" Value="{Binding $parent[ProgressBar].TemplateSettings.Container2AnimationEndPosition}" />
+                    </KeyFrame>
+                </Animation>
+            </Style.Animations>
+        </Style>
+        <Style Selector="^:horizontal /template/ Border#IndeterminateProgressBarIndicator">
+            <Setter Property="Width" Value="{Binding $parent[ProgressBar].TemplateSettings.ContainerWidth}" />
+        </Style>
+        <Style Selector="^:horizontal /template/ Border#IndeterminateProgressBarIndicator2">
+            <Setter Property="Width" Value="{Binding $parent[ProgressBar].TemplateSettings.Container2Width}" />
+        </Style>
+        <Style Selector="^:vertical /template/ Border#IndeterminateProgressBarIndicator">
+            <Setter Property="Height" Value="{Binding $parent[ProgressBar].TemplateSettings.ContainerWidth}" />
+        </Style>
+        <Style Selector="^:vertical /template/ Border#IndeterminateProgressBarIndicator2">
+            <Setter Property="Height" Value="{Binding $parent[ProgressBar].TemplateSettings.Container2Width}" />
+        </Style>
+        <Style Selector="^.Left">
+            <Style Selector="^:horizontal /template/ LayoutTransformControl#PART_LayoutTransformControl">
+                <Setter Property="Grid.Column" Value="0" />
+                <Setter Property="Grid.Row" Value="1" />
+                <Setter Property="Margin" Value="4 0" />
             </Style>
-            <Style Selector="^ /template/ Border#IndeterminateProgressBarIndicator">
-                <Setter Property="Height" Value="{Binding $parent[ProgressBar].TemplateSettings.ContainerWidth}" />
+            <Style Selector="^:vertical /template/ LayoutTransformControl#PART_LayoutTransformControl">
+                <Setter Property="Grid.Column" Value="1" />
+                <Setter Property="Grid.Row" Value="0" />
+                <Setter Property="Margin" Value="0 4" />
             </Style>
-            <Style Selector="^ /template/ Border#IndeterminateProgressBarIndicator2">
-                <Setter Property="Height" Value="{Binding $parent[ProgressBar].TemplateSettings.Container2Width}" />
+            <Style Selector="^:horizontal /template/ Border#ProgressBarRoot">
+                <Setter Property="MinHeight" Value="4" />
+                <Setter Property="VerticalAlignment" Value="Center" />
             </Style>
-            <Style Selector="^.Left,^.Top">
-                <Style Selector="^ /template/ LayoutTransformControl#PART_LayoutTransformControl">
-                    <Setter Property="Grid.Column" Value="1" />
-                    <Setter Property="Grid.Row" Value="0" />
-                    <Setter Property="Margin" Value="0 0 0 16" />
-                    <Setter Property="MinHeight" Value="45" />
-                </Style>
-                <Style Selector="^ /template/ Border#ProgressBarRoot">
-                    <Setter Property="MinWidth" Value="4" />
-                    <Setter Property="HorizontalAlignment" Value="Center" />
-                </Style>
+            <Style Selector="^:vertical /template/ Border#ProgressBarRoot">
+                <Setter Property="MinWidth" Value="4" />
+                <Setter Property="HorizontalAlignment" Value="Center" />
             </Style>
-            <Style Selector="^.Right,^.Bottom">
-                <Style Selector="^ /template/ LayoutTransformControl#PART_LayoutTransformControl">
-                    <Setter Property="Grid.Column" Value="1" />
-                    <Setter Property="Grid.Row" Value="2" />
-                    <Setter Property="Margin" Value="0 16 0 0" />
-                    <Setter Property="MinHeight" Value="45" />
-                </Style>
-                <Style Selector="^ /template/ Border#ProgressBarRoot">
-                    <Setter Property="MinWidth" Value="4" />
-                    <Setter Property="HorizontalAlignment" Value="Center" />
-                </Style>
+            <Style Selector="^ /template/ TextBlock#PART_ProgressText">
+                <Setter Property="Foreground" Value="{DynamicResource ProgressBarOuterTextForeground}" />
             </Style>
         </Style>
-
-        <Style Selector="^:indeterminate">
-            <Style Selector="^ /template/ Panel#DeterminateRoot">
-                <Setter Property="Opacity" Value="0" />
+        <Style Selector="^.Right">
+            <Style Selector="^:horizontal /template/ LayoutTransformControl#PART_LayoutTransformControl">
+                <Setter Property="Grid.Column" Value="2" />
+                <Setter Property="Grid.Row" Value="1" />
+                <Setter Property="Margin" Value="4 0" />
             </Style>
-            <Style Selector="^ /template/ Panel#IndeterminateRoot">
-                <Setter Property="Opacity" Value="1" />
+            <Style Selector="^:vertical /template/ LayoutTransformControl#PART_LayoutTransformControl">
+                <Setter Property="Grid.Column" Value="1" />
+                <Setter Property="Grid.Row" Value="2" />
+                <Setter Property="Margin" Value="0 4" />
             </Style>
-            <Style Selector="^:horizontal /template/ Border#IndeterminateProgressBarIndicator">
-                <Style.Animations>
-                    <Animation IterationCount="Infinite" Duration="0:0:2">
-                        <KeyFrame KeySpline="0.4,0,0.6,1" KeyTime="0:0:0">
-                            <Setter Property="TranslateTransform.X" Value="{Binding $parent[ProgressBar].TemplateSettings.ContainerAnimationStartPosition}" />
-                        </KeyFrame>
-                        <KeyFrame KeySpline="0.4,0,0.6,1" KeyTime="0:0:1.5">
-                            <Setter Property="TranslateTransform.X" Value="{Binding $parent[ProgressBar].TemplateSettings.ContainerAnimationEndPosition}" />
-                        </KeyFrame>
-                        <KeyFrame KeySpline="0.4,0,0.6,1" KeyTime="0:0:2">
-                            <Setter Property="TranslateTransform.X" Value="{Binding $parent[ProgressBar].TemplateSettings.ContainerAnimationEndPosition}" />
-                        </KeyFrame>
-                    </Animation>
-                </Style.Animations>
+            <Style Selector="^:horizontal /template/ Border#ProgressBarRoot">
+                <Setter Property="MinHeight" Value="4" />
+                <Setter Property="VerticalAlignment" Value="Center" />
             </Style>
-            <Style Selector="^:horizontal /template/ Border#IndeterminateProgressBarIndicator2">
-                <Style.Animations>
-                    <Animation IterationCount="Infinite" Duration="0:0:2">
-                        <KeyFrame KeySpline="0.4,0,0.6,1" KeyTime="0:0:0">
-                            <Setter Property="TranslateTransform.X" Value="{Binding $parent[ProgressBar].TemplateSettings.Container2AnimationStartPosition}" />
-                        </KeyFrame>
-                        <KeyFrame KeySpline="0.4,0,0.6,1" KeyTime="0:0:0.75">
-                            <Setter Property="TranslateTransform.X" Value="{Binding $parent[ProgressBar].TemplateSettings.Container2AnimationStartPosition}" />
-                        </KeyFrame>
-                        <KeyFrame KeySpline="0.4,0,0.6,1" KeyTime="0:0:2">
-                            <Setter Property="TranslateTransform.X" Value="{Binding $parent[ProgressBar].TemplateSettings.Container2AnimationEndPosition}" />
-                        </KeyFrame>
-                    </Animation>
-                </Style.Animations>
+            <Style Selector="^:vertical /template/ Border#ProgressBarRoot">
+                <Setter Property="MinWidth" Value="4" />
+                <Setter Property="HorizontalAlignment" Value="Center" />
             </Style>
-            <Style Selector="^:vertical /template/ Border#IndeterminateProgressBarIndicator">
-                <Style.Animations>
-                    <Animation IterationCount="Infinite" Duration="0:0:2">
-                        <KeyFrame KeySpline="0.4,0,0.6,1" KeyTime="0:0:0">
-                            <Setter Property="TranslateTransform.Y" Value="{Binding $parent[ProgressBar].TemplateSettings.ContainerAnimationStartPosition}" />
-                        </KeyFrame>
-                        <KeyFrame KeySpline="0.4,0,0.6,1" KeyTime="0:0:1.5">
-                            <Setter Property="TranslateTransform.Y" Value="{Binding $parent[ProgressBar].TemplateSettings.ContainerAnimationEndPosition}" />
-                        </KeyFrame>
-                        <KeyFrame KeySpline="0.4,0,0.6,1" KeyTime="0:0:2">
-                            <Setter Property="TranslateTransform.Y" Value="{Binding $parent[ProgressBar].TemplateSettings.ContainerAnimationEndPosition}" />
-                        </KeyFrame>
-                    </Animation>
-                </Style.Animations>
-            </Style>
-            <Style Selector="^:vertical /template/ Border#IndeterminateProgressBarIndicator2">
-                <Style.Animations>
-                    <Animation IterationCount="Infinite" Duration="0:0:2">
-                        <KeyFrame KeySpline="0.4,0,0.6,1" KeyTime="0:0:0">
-                            <Setter Property="TranslateTransform.Y" Value="{Binding $parent[ProgressBar].TemplateSettings.Container2AnimationStartPosition}" />
-                        </KeyFrame>
-                        <KeyFrame KeySpline="0.4,0,0.6,1" KeyTime="0:0:0.75">
-                            <Setter Property="TranslateTransform.Y" Value="{Binding $parent[ProgressBar].TemplateSettings.Container2AnimationStartPosition}" />
-                        </KeyFrame>
-                        <KeyFrame KeySpline="0.4,0,0.6,1" KeyTime="0:0:2">
-                            <Setter Property="TranslateTransform.Y" Value="{Binding $parent[ProgressBar].TemplateSettings.Container2AnimationEndPosition}" />
-                        </KeyFrame>
-                    </Animation>
-                </Style.Animations>
+            <Style Selector="^ /template/ TextBlock#PART_ProgressText">
+                <Setter Property="Foreground" Value="{DynamicResource ProgressBarOuterTextForeground}" />
             </Style>
         </Style>
     </ControlTheme>
@@ -381,6 +412,10 @@
         <Style Selector="^.Danger">
             <Setter Property="Foreground" Value="{DynamicResource ProgressBarDangerForeground}" />
         </Style>
+        <!-- Error style is obsolete, use Danger instead -->
+        <Style Selector="^.Error">
+            <Setter Property="Foreground" Value="{DynamicResource ProgressBarErrorForeground}" />
+        </Style>
         <Style Selector="^:indeterminate /template/ Arc#Indicator">
             <Setter Property="Opacity" Value="0" />
         </Style>

src/Semi.Avalonia/Controls/SplitView.axaml

@@ -1,6 +1,7 @@
 <ResourceDictionary 
     xmlns="https://github.com/avaloniaui" 
-    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    x:CompileBindings="True">
     <ControlTheme x:Key="{x:Type SplitView}" TargetType="SplitView">
         <Setter Property="OpenPaneLength" Value="{DynamicResource SplitViewOpenPaneThemeLength}" />
         <Setter Property="CompactPaneLength" Value="{DynamicResource SplitViewCompactPaneThemeLength}" />
@@ -51,7 +52,7 @@
             <Style Selector="^:overlay">
                 <Style Selector="^ /template/ Panel#PART_PaneRoot">
                     <Setter Property="Width" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.ClosedPaneWidth}" />
-                    <Setter Property="Grid.ColumnSpan" Value="2" />
+                    <Setter Property="Grid.ColumnSpan" Value="1" />
                     <Setter Property="Grid.Column" Value="0" />
                 </Style>
                 <Style Selector="^ /template/ Panel#ContentRoot">
@@ -74,7 +75,8 @@
 
             <Style Selector="^:compactoverlay">
                 <Style Selector="^ /template/ Panel#PART_PaneRoot">
-                    <Setter Property="Grid.ColumnSpan" Value="2" />
+                    <!--  ColumnSpan should be 2  -->
+                    <Setter Property="Grid.ColumnSpan" Value="1" />
                     <Setter Property="Grid.Column" Value="0" />
                     <Setter Property="Width" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.ClosedPaneWidth}" />
                 </Style>
@@ -492,4 +494,250 @@
             <Setter Property="IsVisible" Value="True" />
         </Style>
     </ControlTheme>
+
+    <!--  Obsolete after Avalonia 11.3.7  -->
+    <ControlTheme x:Key="VerticalSplitView" TargetType="SplitView">
+        <Setter Property="OpenPaneLength" Value="{DynamicResource SplitViewOpenPaneThemeLength}" />
+        <Setter Property="CompactPaneLength" Value="{DynamicResource SplitViewCompactPaneThemeLength}" />
+        <Setter Property="PaneBackground" Value="{DynamicResource SplitViewPaneBackground}" />
+
+        <Style Selector="^:left">
+            <Setter Property="Template">
+                <ControlTemplate TargetType="SplitView">
+                    <Grid Name="Container" Background="{TemplateBinding Background}">
+                        <Grid.RowDefinitions>
+                            <!--  why is this throwing a binding error?  -->
+                            <RowDefinition Height="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.PaneColumnGridLength}" />
+                            <RowDefinition Height="*" />
+                        </Grid.RowDefinitions>
+
+                        <Panel
+                            Name="PART_PaneRoot"
+                            VerticalAlignment="Top"
+                            Background="{TemplateBinding PaneBackground}"
+                            ClipToBounds="True"
+                            ZIndex="100">
+                            <ContentPresenter
+                                Name="PART_PanePresenter"
+                                Content="{TemplateBinding Pane}"
+                                ContentTemplate="{TemplateBinding PaneTemplate}" />
+                            <Rectangle
+                                Name="HCPaneBorder"
+                                Height="1"
+                                VerticalAlignment="Bottom"
+                                Fill="{DynamicResource SplitViewSeparatorBackground}" />
+                        </Panel>
+
+                        <Panel Name="ContentRoot">
+                            <ContentPresenter
+                                Name="PART_ContentPresenter"
+                                Content="{TemplateBinding Content}"
+                                ContentTemplate="{TemplateBinding ContentTemplate}" />
+                            <Rectangle
+                                Name="LightDismissLayer"
+                                Fill="Transparent"
+                                IsVisible="False" />
+                        </Panel>
+
+                    </Grid>
+                </ControlTemplate>
+            </Setter>
+
+            <Style Selector="^:overlay">
+                <Style Selector="^ /template/ Panel#PART_PaneRoot">
+                    <Setter Property="Height" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.ClosedPaneWidth}" />
+                    <Setter Property="Grid.RowSpan" Value="1" />
+                    <Setter Property="Grid.Row" Value="0" />
+                </Style>
+                <Style Selector="^ /template/ Panel#ContentRoot">
+                    <Setter Property="Grid.Row" Value="1" />
+                    <Setter Property="Grid.RowSpan" Value="2" />
+                </Style>
+            </Style>
+
+            <Style Selector="^:compactinline">
+                <Style Selector="^ /template/ Panel#PART_PaneRoot">
+                    <Setter Property="Grid.RowSpan" Value="1" />
+                    <Setter Property="Grid.Row" Value="0" />
+                    <Setter Property="Height" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.ClosedPaneWidth}" />
+                </Style>
+                <Style Selector="^ /template/ Panel#ContentRoot">
+                    <Setter Property="Grid.Row" Value="1" />
+                    <Setter Property="Grid.RowSpan" Value="1" />
+                </Style>
+            </Style>
+
+            <Style Selector="^:compactoverlay">
+                <Style Selector="^ /template/ Panel#PART_PaneRoot">
+                    <!--  RowSpan should be 2  -->
+                    <Setter Property="Grid.RowSpan" Value="1" />
+                    <Setter Property="Grid.Row" Value="0" />
+                    <Setter Property="Height" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.ClosedPaneWidth}" />
+                </Style>
+                <Style Selector="^ /template/ Panel#ContentRoot">
+                    <Setter Property="Grid.Row" Value="1" />
+                    <Setter Property="Grid.RowSpan" Value="1" />
+                </Style>
+            </Style>
+
+            <Style Selector="^:inline">
+                <Style Selector="^ /template/ Panel#PART_PaneRoot">
+                    <Setter Property="Grid.RowSpan" Value="1" />
+                    <Setter Property="Grid.Row" Value="0" />
+                    <Setter Property="Height" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.ClosedPaneWidth}" />
+                </Style>
+                <Style Selector="^ /template/ Panel#ContentRoot">
+                    <Setter Property="Grid.Row" Value="1" />
+                    <Setter Property="Grid.RowSpan" Value="1" />
+                </Style>
+            </Style>
+        </Style>
+
+        <Style Selector="^:right">
+            <Setter Property="Template">
+                <ControlTemplate>
+                    <Grid Name="Container" Background="{TemplateBinding Background}">
+                        <Grid.RowDefinitions>
+                            <RowDefinition Height="*" />
+                            <RowDefinition Height="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.PaneColumnGridLength}" />
+                        </Grid.RowDefinitions>
+
+                        <Panel
+                            Name="PART_PaneRoot"
+                            VerticalAlignment="Bottom"
+                            Background="{TemplateBinding PaneBackground}"
+                            ClipToBounds="True"
+                            ZIndex="100">
+                            <ContentPresenter
+                                Name="PART_PanePresenter"
+                                Content="{TemplateBinding Pane}"
+                                ContentTemplate="{TemplateBinding PaneTemplate}" />
+                            <Rectangle
+                                Name="HCPaneBorder"
+                                Height="1"
+                                VerticalAlignment="Top"
+                                Fill="{DynamicResource SplitViewSeparatorBackground}" />
+                        </Panel>
+
+                        <Panel Name="ContentRoot">
+                            <ContentPresenter
+                                Name="PART_ContentPresenter"
+                                Content="{TemplateBinding Content}"
+                                ContentTemplate="{TemplateBinding ContentTemplate}" />
+                            <Rectangle Name="LightDismissLayer" IsVisible="False" />
+                        </Panel>
+
+                    </Grid>
+                </ControlTemplate>
+            </Setter>
+
+            <Style Selector="^:overlay">
+                <Style Selector="^ /template/ Panel#PART_PaneRoot">
+                    <Setter Property="Height" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.ClosedPaneWidth}" />
+                    <Setter Property="Grid.RowSpan" Value="2" />
+                    <Setter Property="Grid.Row" Value="1" />
+                </Style>
+                <Style Selector="^ /template/ Panel#ContentRoot">
+                    <Setter Property="Grid.Row" Value="0" />
+                    <Setter Property="Grid.RowSpan" Value="2" />
+                </Style>
+            </Style>
+
+            <Style Selector="^:compactinline">
+                <Style Selector="^ /template/ Panel#PART_PaneRoot">
+                    <Setter Property="Grid.RowSpan" Value="1" />
+                    <Setter Property="Grid.Row" Value="1" />
+                    <Setter Property="Height" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.ClosedPaneWidth}" />
+                </Style>
+                <Style Selector="^ /template/ Panel#ContentRoot">
+                    <Setter Property="Grid.Row" Value="0" />
+                    <Setter Property="Grid.RowSpan" Value="1" />
+                </Style>
+            </Style>
+
+            <Style Selector="^:compactoverlay">
+                <Style Selector="^ /template/ Panel#PART_PaneRoot">
+                    <Setter Property="Grid.RowSpan" Value="2" />
+                    <Setter Property="Grid.Row" Value="1" />
+                    <Setter Property="Height" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.ClosedPaneWidth}" />
+                </Style>
+                <Style Selector="^ /template/ Panel#ContentRoot">
+                    <Setter Property="Grid.Row" Value="0" />
+                    <Setter Property="Grid.RowSpan" Value="1" />
+                </Style>
+            </Style>
+
+            <Style Selector="^:inline">
+                <Style Selector="^ /template/ Panel#PART_PaneRoot">
+                    <Setter Property="Grid.RowSpan" Value="1" />
+                    <Setter Property="Grid.Row" Value="1" />
+                    <Setter Property="Height" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.ClosedPaneWidth}" />
+                </Style>
+                <Style Selector="^ /template/ Panel#ContentRoot">
+                    <Setter Property="Grid.Row" Value="0" />
+                    <Setter Property="Grid.RowSpan" Value="1" />
+                </Style>
+            </Style>
+        </Style>
+
+        <Style Selector="^:open">
+            <Style Selector="^ /template/ Panel#PART_PaneRoot">
+                <Setter Property="Transitions">
+                    <Transitions>
+                        <DoubleTransition
+                            Easing="{StaticResource SplitViewPaneAnimationEasing}"
+                            Property="Height"
+                            Duration="{StaticResource SplitViewPaneAnimationOpenDuration}" />
+                    </Transitions>
+                </Setter>
+                <Setter Property="Height" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=OpenPaneLength}" />
+            </Style>
+            <Style Selector="^ /template/ Rectangle#LightDismissLayer">
+                <Setter Property="Transitions">
+                    <Transitions>
+                        <DoubleTransition
+                            Easing="{StaticResource SplitViewPaneAnimationEasing}"
+                            Property="Opacity"
+                            Duration="{StaticResource SplitViewPaneAnimationOpenDuration}" />
+                    </Transitions>
+                </Setter>
+                <Setter Property="Opacity" Value="1.0" />
+            </Style>
+        </Style>
+
+        <Style Selector="^:closed">
+            <Style Selector="^ /template/ Panel#PART_PaneRoot">
+                <Setter Property="Transitions">
+                    <Transitions>
+                        <DoubleTransition
+                            Easing="{StaticResource SplitViewPaneAnimationEasing}"
+                            Property="Height"
+                            Duration="{StaticResource SplitViewPaneAnimationCloseDuration}" />
+                    </Transitions>
+                </Setter>
+                <Setter Property="Height" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.ClosedPaneWidth}" />
+            </Style>
+            <Style Selector="^ /template/ Rectangle#LightDismissLayer">
+                <Setter Property="Transitions">
+                    <Transitions>
+                        <DoubleTransition
+                            Easing="{StaticResource SplitViewPaneAnimationEasing}"
+                            Property="Opacity"
+                            Duration="{StaticResource SplitViewPaneAnimationCloseDuration}" />
+                    </Transitions>
+                </Setter>
+                <Setter Property="Opacity" Value="0.0" />
+            </Style>
+        </Style>
+
+        <Style Selector="^:lightDismiss /template/ Rectangle#LightDismissLayer">
+            <Setter Property="Fill" Value="{DynamicResource SplitViewMaskBrush}" />
+        </Style>
+        <Style Selector="^:overlay:open /template/ Rectangle#LightDismissLayer">
+            <Setter Property="IsVisible" Value="True" />
+        </Style>
+        <Style Selector="^:compactoverlay:open /template/ Rectangle#LightDismissLayer">
+            <Setter Property="IsVisible" Value="True" />
+        </Style>
+    </ControlTheme>
 </ResourceDictionary>

src/Semi.Avalonia/Controls/TabControl.axaml

@@ -36,19 +36,13 @@
                                 ItemsPanel="{TemplateBinding ItemsPanel}" />
                             <Border Name="PART_BorderSeparator" />
                         </Panel>
-                        <Panel ClipToBounds="True">
-                            <ContentPresenter
-                                Name="PART_SelectedContentHost2"
-                                Margin="{TemplateBinding Padding}"
-                                HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
-                                VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
-                                IsVisible="False" />
-                            <ContentPresenter
-                                Name="PART_SelectedContentHost"
-                                Margin="{TemplateBinding Padding}"
-                                HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
-                                VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}" />
-                        </Panel>
+                        <ContentPresenter
+                            Name="PART_SelectedContentHost"
+                            Margin="{TemplateBinding Padding}"
+                            HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
+                            VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
+                            Content="{TemplateBinding SelectedContent}"
+                            ContentTemplate="{TemplateBinding SelectedContentTemplate}" />
                     </DockPanel>
                 </Border>
             </ControlTemplate>
@@ -155,19 +149,13 @@
                                 Name="PART_ItemsPresenter"
                                 ItemsPanel="{TemplateBinding ItemsPanel}" />
                         </Panel>
-                        <Panel ClipToBounds="True">
-                            <ContentPresenter
-                                Name="PART_SelectedContentHost2"
-                                Margin="{TemplateBinding Padding}"
-                                HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
-                                VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
-                                IsVisible="False" />
-                            <ContentPresenter
-                                Name="PART_SelectedContentHost"
-                                Margin="{TemplateBinding Padding}"
-                                HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
-                                VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}" />
-                        </Panel>
+                        <ContentPresenter
+                            Name="PART_SelectedContentHost"
+                            Margin="{TemplateBinding Padding}"
+                            HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
+                            VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
+                            Content="{TemplateBinding SelectedContent}"
+                            ContentTemplate="{TemplateBinding SelectedContentTemplate}" />
                     </DockPanel>
                 </Border>
             </ControlTemplate>
@@ -212,19 +200,13 @@
                             </ScrollViewer>
                             <Border Name="PART_BorderSeparator" />
                         </Panel>
-                        <Panel ClipToBounds="True">
-                            <ContentPresenter
-                                Name="PART_SelectedContentHost2"
-                                Margin="{TemplateBinding Padding}"
-                                HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
-                                VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
-                                IsVisible="False" />
-                            <ContentPresenter
-                                Name="PART_SelectedContentHost"
-                                Margin="{TemplateBinding Padding}"
-                                HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
-                                VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}" />
-                        </Panel>
+                        <ContentPresenter
+                            Name="PART_SelectedContentHost"
+                            Margin="{TemplateBinding Padding}"
+                            HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
+                            VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
+                            Content="{TemplateBinding SelectedContent}"
+                            ContentTemplate="{TemplateBinding SelectedContentTemplate}" />
                     </DockPanel>
                 </Border>
             </ControlTemplate>
@@ -353,19 +335,13 @@
                                     ItemsPanel="{TemplateBinding ItemsPanel}" />
                             </ScrollViewer>
                         </Panel>
-                        <Panel ClipToBounds="True">
-                            <ContentPresenter
-                                Name="PART_SelectedContentHost2"
-                                Margin="{TemplateBinding Padding}"
-                                HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
-                                VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
-                                IsVisible="False" />
-                            <ContentPresenter
-                                Name="PART_SelectedContentHost"
-                                Margin="{TemplateBinding Padding}"
-                                HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
-                                VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}" />
-                        </Panel>
+                        <ContentPresenter
+                            Name="PART_SelectedContentHost"
+                            Margin="{TemplateBinding Padding}"
+                            HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
+                            VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
+                            Content="{TemplateBinding SelectedContent}"
+                            ContentTemplate="{TemplateBinding SelectedContentTemplate}" />
                     </DockPanel>
                 </Border>
             </ControlTemplate>

src/Semi.Avalonia/Controls/TabItem.axaml

@@ -6,12 +6,16 @@
             Width="400"
             Height="400"
             Margin="20">
-            <TabItem Theme="{DynamicResource CardTabItem}" Header="文档" Icon="{StaticResource SemiIconFile}" />
             <TabControl TabStripPlacement="Top" Theme="{DynamicResource LineTabControl}">
-                <TabItem Content="Hello 1" Header="文档" Icon="{StaticResource SemiIconFile}" />
-                <TabItem Content="Hello 2" Header="快速起步" Icon="{StaticResource SemiIconGlobe}" />
-                <TabItem Content="Hello 4" Header="无效" Icon="{StaticResource SemiIconClear}" IsEnabled="False" />
-                <TabItem Content="Hello 3" Header="帮助" Icon="{StaticResource SemiIconHelpCircle}" />
+                <TabItem Header="文档">
+                    <TextBlock Text="Content1" />
+                </TabItem>
+                <TabItem Header="快速起步">
+                    <TextBlock Text="Content2" />
+                </TabItem>
+                <TabItem Header="帮助" IsSelected="True">
+                    <TextBlock Text="Content3" />
+                </TabItem>
             </TabControl>
         </StackPanel>
     </Design.PreviewWith>
@@ -21,39 +25,20 @@
         <Setter Property="Background" Value="{DynamicResource TabItemLinePipeBackground}" />
         <Setter Property="Template">
             <ControlTemplate TargetType="TabItem">
-                <Border
-                    Name="PART_RootBorder"
+                <ContentPresenter
+                    Name="PART_HeaderPresenter"
                     Padding="{TemplateBinding Padding}"
+                    HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
+                    VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
                     Background="{TemplateBinding Background}"
                     BorderBrush="{TemplateBinding BorderBrush}"
                     BorderThickness="{TemplateBinding BorderThickness}"
-                    CornerRadius="{TemplateBinding CornerRadius}">
-                    <DockPanel HorizontalSpacing="{DynamicResource TabItemIconHeaderSpacing}">
-                        <ContentPresenter
-                            Name="PART_IconPresenter"
-                            DockPanel.Dock="Left"
-                            Content="{TemplateBinding Icon}"
-                            ContentTemplate="{TemplateBinding IconTemplate}"
-                            IsVisible="{Binding $self.Content, Converter={x:Static ObjectConverters.IsNotNull}}">
-                            <ContentPresenter.DataTemplates>
-                                <DataTemplate DataType="Geometry">
-                                    <PathIcon
-                                        Theme="{StaticResource InnerPathIcon}"
-                                        Data="{Binding}" />
-                                </DataTemplate>
-                            </ContentPresenter.DataTemplates>
-                        </ContentPresenter>
-                        <ContentPresenter
-                            Name="PART_HeaderPresenter"
-                            HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
-                            VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
-                            Content="{TemplateBinding Header}"
-                            ContentTemplate="{TemplateBinding HeaderTemplate}"
-                            FontFamily="{TemplateBinding FontFamily}"
-                            FontWeight="{TemplateBinding FontWeight}"
-                            Foreground="{TemplateBinding Foreground}" />
-                    </DockPanel>
-                </Border>
+                    Content="{TemplateBinding Header}"
+                    ContentTemplate="{TemplateBinding HeaderTemplate}"
+                    CornerRadius="{TemplateBinding CornerRadius}"
+                    FontFamily="{TemplateBinding FontFamily}"
+                    FontWeight="{TemplateBinding FontWeight}"
+                    Foreground="{TemplateBinding Foreground}" />
             </ControlTemplate>
         </Setter>
 
@@ -61,31 +46,17 @@
             <Setter Property="RecognizesAccessKey" Value="True" />
         </Style>
 
-        <Style Selector="^:selected">
-            <Style Selector="^ /template/ ContentPresenter#PART_HeaderPresenter">
-                <Setter Property="FontWeight" Value="{DynamicResource TabItemSelectedFontWeight}" />
-                <Setter Property="Foreground" Value="{DynamicResource TabItemLineHeaderSelectedForeground}" />
-            </Style>
-            <Style Selector="^ /template/ ContentPresenter#PART_IconPresenter">
-                <Setter Property="Foreground" Value="{DynamicResource TabItemIconSelectedForeground}" />
-            </Style>
+        <Style Selector="^:selected /template/ ContentPresenter#PART_HeaderPresenter">
+            <Setter Property="FontWeight" Value="{DynamicResource TabItemSelectedFontWeight}" />
+            <Setter Property="Foreground" Value="{DynamicResource TabItemLineHeaderSelectedForeground}" />
         </Style>
 
         <Style Selector="^:not(:selected)">
             <Setter Property="Cursor" Value="Hand" />
-            <Style Selector="^:pointerover">
-                <Style Selector="^ /template/ ContentPresenter#PART_HeaderPresenter,^ /template/ ContentPresenter#PART_IconPresenter">
-                    <Setter Property="Foreground" Value="{DynamicResource TabItemLineHeaderPointeroverForeground}" />
-                </Style>
+            <Style Selector="^:pointerover /template/ ContentPresenter#PART_HeaderPresenter">
+                <Setter Property="Foreground" Value="{DynamicResource TabItemLineHeaderPointeroverForeground}" />
             </Style>
         </Style>
-
-        <Style Selector="^:disabled">
-            <Style Selector="^ /template/ ContentPresenter#PART_HeaderPresenter,^ /template/ ContentPresenter#PART_IconPresenter">
-                <Setter Property="Foreground" Value="{DynamicResource TabItemHeaderDisabledForeground}" />
-            </Style>
-        </Style>
-
     </ControlTheme>
 
     <ControlTheme
@@ -94,15 +65,15 @@
         TargetType="TabItem">
         <Setter Property="Padding" Value="8 4" />
 
-        <Style Selector="^:selected /template/ Border#PART_RootBorder">
+        <Style Selector="^:selected /template/ ContentPresenter#PART_HeaderPresenter">
             <Setter Property="BorderBrush" Value="{DynamicResource TabItemLinePipeSelectedBackground}" />
         </Style>
 
         <Style Selector="^:not(:selected)">
-            <Style Selector="^:pointerover /template/ Border#PART_RootBorder">
+            <Style Selector="^:pointerover /template/ ContentPresenter#PART_HeaderPresenter">
                 <Setter Property="BorderBrush" Value="{DynamicResource TabItemLinePipePointeroverBorderBrush}" />
             </Style>
-            <Style Selector="^:pressed /template/ Border#PART_RootBorder">
+            <Style Selector="^:pressed /template/ ContentPresenter#PART_HeaderPresenter">
                 <Setter Property="BorderBrush" Value="{DynamicResource TabItemLinePipePressedBorderBrush}" />
             </Style>
         </Style>
@@ -127,27 +98,27 @@
         x:Key="LineTabItem"
         BasedOn="{StaticResource BaseTabItem}"
         TargetType="TabItem">
-        <Style Selector="^:selected /template/ Border#PART_RootBorder">
+        <Style Selector="^:selected /template/ ContentPresenter#PART_HeaderPresenter">
             <Setter Property="BorderBrush" Value="{DynamicResource TabItemLinePipeSelectedBackground}" />
         </Style>
         <Style Selector="^[TabStripPlacement=Left], ^[TabStripPlacement=Right]">
-            <Style Selector="^:selected /template/ Border#PART_RootBorder">
+            <Style Selector="^:selected /template/ ContentPresenter#PART_HeaderPresenter">
                 <Setter Property="Background" Value="{DynamicResource TabItemLineHeaderSelectedBackground}" />
             </Style>
         </Style>
 
         <Style Selector="^:not(:selected)">
-            <Style Selector="^:pointerover /template/ Border#PART_RootBorder">
+            <Style Selector="^:pointerover /template/ ContentPresenter#PART_HeaderPresenter">
                 <Setter Property="BorderBrush" Value="{DynamicResource TabItemLinePipePointeroverBorderBrush}" />
             </Style>
-            <Style Selector="^:pressed /template/ Border#PART_RootBorder">
+            <Style Selector="^:pressed /template/ ContentPresenter#PART_HeaderPresenter">
                 <Setter Property="BorderBrush" Value="{DynamicResource TabItemLinePipePressedBorderBrush}" />
             </Style>
             <Style Selector="^[TabStripPlacement=Left], ^[TabStripPlacement=Right]">
-                <Style Selector="^:pointerover /template/ Border#PART_RootBorder">
+                <Style Selector="^:pointerover /template/ ContentPresenter#PART_HeaderPresenter">
                     <Setter Property="Background" Value="{DynamicResource TabItemLineHeaderPointeroverBackground}" />
                 </Style>
-                <Style Selector="^:pressed /template/ Border#PART_RootBorder">
+                <Style Selector="^:pressed /template/ ContentPresenter#PART_HeaderPresenter">
                     <Setter Property="Background" Value="{DynamicResource TabItemLineHeaderPressedBackground}" />
                 </Style>
             </Style>
@@ -179,15 +150,15 @@
         TargetType="TabItem">
         <Setter Property="BorderBrush" Value="{DynamicResource TabControlSeparatorBorderBrush}" />
 
-        <Style Selector="^:selected /template/ Border#PART_RootBorder">
+        <Style Selector="^:selected /template/ ContentPresenter#PART_HeaderPresenter">
             <Setter Property="Background" Value="{DynamicResource TabItemCardHeaderSelectedBackground}" />
         </Style>
 
         <Style Selector="^:not(:selected)">
-            <Style Selector="^:pointerover /template/ Border#PART_RootBorder">
+            <Style Selector="^:pointerover /template/ ContentPresenter#PART_HeaderPresenter">
                 <Setter Property="Background" Value="{DynamicResource TabItemCardHeaderPointeroverBackground}" />
             </Style>
-            <Style Selector="^:pressed /template/ Border#PART_RootBorder">
+            <Style Selector="^:pressed /template/ ContentPresenter#PART_HeaderPresenter">
                 <Setter Property="Background" Value="{DynamicResource TabItemCardHeaderPressedBackground}" />
             </Style>
         </Style>
@@ -236,20 +207,16 @@
         TargetType="TabItem">
         <Setter Property="CornerRadius" Value="{DynamicResource SemiBorderRadiusSmall}" />
 
-        <Style Selector="^:selected">
-            <Style Selector="^ /template/ Border#PART_RootBorder">
-                <Setter Property="Background" Value="{DynamicResource TabItemButtonHeaderSelectedBackground}" />
-            </Style>
-            <Style Selector="^ /template/ ContentPresenter#PART_HeaderPresenter">
-                <Setter Property="Foreground" Value="{DynamicResource TabItemButtonHeaderSelectedForeground}" />
-            </Style>
+        <Style Selector="^:selected /template/ ContentPresenter#PART_HeaderPresenter">
+            <Setter Property="Foreground" Value="{DynamicResource TabItemButtonHeaderSelectedForeground}" />
+            <Setter Property="Background" Value="{DynamicResource TabItemButtonHeaderSelectedBackground}" />
         </Style>
 
         <Style Selector="^:not(:selected)">
-            <Style Selector="^:pointerover /template/ Border#PART_RootBorder">
+            <Style Selector="^:pointerover /template/ ContentPresenter#PART_HeaderPresenter">
                 <Setter Property="Background" Value="{DynamicResource TabItemButtonHeaderPointeroverBackground}" />
             </Style>
-            <Style Selector="^:pressed /template/ Border#PART_RootBorder">
+            <Style Selector="^:pressed /template/ ContentPresenter#PART_HeaderPresenter">
                 <Setter Property="Background" Value="{DynamicResource TabItemButtonHeaderPressedBackground}" />
             </Style>
         </Style>

src/Semi.Avalonia/Controls/TabbedPage.axaml

@@ -1,38 +0,0 @@
-<ResourceDictionary
-    xmlns="https://github.com/avaloniaui"
-    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
-    <Design.PreviewWith>
-        <TabbedPage Width="400" Height="300" />
-    </Design.PreviewWith>
-
-    <ControlTheme x:Key="{x:Type TabbedPage}" TargetType="TabbedPage">
-        <Setter Property="Template">
-            <ControlTemplate TargetType="TabbedPage">
-                <TabControl
-                    Name="PART_TabControl"
-                    Background="{TemplateBinding Background}"
-                    Theme="{StaticResource LineTabControl}" />
-            </ControlTemplate>
-        </Setter>
-    </ControlTheme>
-    <ControlTheme x:Key="CardTabbedPage" TargetType="TabbedPage">
-        <Setter Property="Template">
-            <ControlTemplate TargetType="TabbedPage">
-                <TabControl
-                    Name="PART_TabControl"
-                    Background="{TemplateBinding Background}"
-                    Theme="{StaticResource CardTabControl}" />
-            </ControlTemplate>
-        </Setter>
-    </ControlTheme>
-    <ControlTheme x:Key="ButtonTabbedPage" TargetType="TabbedPage">
-        <Setter Property="Template">
-            <ControlTemplate TargetType="TabbedPage">
-                <TabControl
-                    Name="PART_TabControl"
-                    Background="{TemplateBinding Background}"
-                    Theme="{StaticResource ButtonTabControl}" />
-            </ControlTemplate>
-        </Setter>
-    </ControlTheme>
-</ResourceDictionary>

src/Semi.Avalonia/Controls/TextBox.axaml

@@ -22,27 +22,6 @@
             IsEnabled="{Binding $parent[TextBox].CanPaste}" />
     </MenuFlyout>
 
-    <MenuFlyout
-        x:Key="HorizontalTextBoxContextFlyout"
-        ShowMode="{OnFormFactor Desktop=Standard, Mobile=Transient}"
-        FlyoutPresenterTheme="{StaticResource HorizontalMenuFlyoutPresenter}"
-        ItemContainerTheme="{StaticResource TopLevelMenuItem}">
-        <MenuItem
-            Command="{Binding $parent[TextBox].Cut}"
-            Header="{DynamicResource STRING_MENU_CUT}"
-            IsEnabled="{Binding $parent[TextBox].CanCut}"
-            IsVisible="{Binding $parent[TextBox].CanCut}" />
-        <MenuItem
-            Command="{Binding $parent[TextBox].Copy}"
-            Header="{DynamicResource STRING_MENU_COPY}"
-            IsEnabled="{Binding $parent[TextBox].CanCopy}"
-            IsVisible="{Binding $parent[TextBox].CanCopy}" />
-        <MenuItem
-            Command="{Binding $parent[TextBox].Paste}"
-            Header="{DynamicResource STRING_MENU_PASTE}"
-            IsEnabled="{Binding $parent[TextBox].CanPaste}" />
-    </MenuFlyout>
-
     <ControlTheme x:Key="{x:Type TextBox}" TargetType="TextBox">
         <Setter Property="Foreground" Value="{DynamicResource TextBoxForeground}" />
         <Setter Property="PlaceholderForeground" Value="{DynamicResource TextBoxPlaceholderForeground}" />
@@ -81,7 +60,6 @@
                                 Foreground="{DynamicResource TextBoxInnerForeground}"
                                 IsVisible="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=InnerLeftContent, Converter={x:Static ObjectConverters.IsNotNull}}" />
                             <ScrollViewer
-                                Name="PART_ScrollViewer"
                                 Grid.Column="1"
                                 AllowAutoHide="{TemplateBinding (ScrollViewer.AllowAutoHide)}"
                                 HorizontalScrollBarVisibility="{TemplateBinding (ScrollViewer.HorizontalScrollBarVisibility)}"
@@ -89,7 +67,7 @@
                                 VerticalScrollBarVisibility="{TemplateBinding (ScrollViewer.VerticalScrollBarVisibility)}">
                                 <Panel>
                                     <TextBlock
-                                        Name="PART_Placeholder"
+                                        Name="PART_Watermark"
                                         HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                         VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                                         Foreground="{TemplateBinding PlaceholderForeground}"
@@ -155,10 +133,6 @@
             </ControlTemplate>
         </Setter>
 
-        <Style Selector="^:touch-mode">
-            <Setter Property="ContextFlyout" Value="{StaticResource HorizontalTextBoxContextFlyout}" />
-        </Style>
-
         <Style Selector="^:pointerover /template/ Border#PART_ContentPresenterBorder">
             <Setter Property="Background" Value="{DynamicResource TextBoxPointeroverBackground}" />
             <Setter Property="BorderBrush" Value="{DynamicResource TextBoxPointeroverBorderBrush}" />
@@ -320,7 +294,6 @@
                                 Foreground="{DynamicResource TextBoxInnerForeground}"
                                 IsVisible="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=InnerLeftContent, Converter={x:Static ObjectConverters.IsNotNull}}" />
                             <ScrollViewer
-                                Name="PART_ScrollViewer"
                                 Grid.Column="1"
                                 AllowAutoHide="{TemplateBinding (ScrollViewer.AllowAutoHide)}"
                                 HorizontalScrollBarVisibility="{TemplateBinding (ScrollViewer.HorizontalScrollBarVisibility)}"
@@ -328,9 +301,10 @@
                                 VerticalScrollBarVisibility="{TemplateBinding (ScrollViewer.VerticalScrollBarVisibility)}">
                                 <Panel>
                                     <TextBlock
-                                        Name="PART_Placeholder"
+                                        Name="PART_Watermark"
                                         HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                         VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
+                                        Opacity="0.5"
                                         Foreground="{TemplateBinding PlaceholderForeground}"
                                         Text="{TemplateBinding PlaceholderText}"
                                         TextAlignment="{TemplateBinding TextAlignment}"
@@ -394,10 +368,6 @@
             </ControlTemplate>
         </Setter>
 
-        <Style Selector="^:touch-mode">
-            <Setter Property="ContextFlyout" Value="{StaticResource HorizontalTextBoxContextFlyout}" />
-        </Style>
-
         <Style Selector="^:pointerover /template/ Border#PART_ContentPresenterBorder">
             <Setter Property="Background" Value="{DynamicResource TextBoxPointeroverBackground}" />
             <Setter Property="BorderBrush" Value="{DynamicResource TextBoxPointeroverBorderBrush}" />
@@ -546,7 +516,6 @@
                             Foreground="{DynamicResource TextBoxInnerForeground}"
                             IsVisible="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=InnerLeftContent, Converter={x:Static ObjectConverters.IsNotNull}}" />
                         <ScrollViewer
-                            Name="PART_ScrollViewer"
                             Grid.Column="1"
                             AllowAutoHide="{TemplateBinding (ScrollViewer.AllowAutoHide)}"
                             HorizontalScrollBarVisibility="{TemplateBinding (ScrollViewer.HorizontalScrollBarVisibility)}"
@@ -554,9 +523,10 @@
                             VerticalScrollBarVisibility="{TemplateBinding (ScrollViewer.VerticalScrollBarVisibility)}">
                             <Panel>
                                 <TextBlock
-                                    Name="PART_Placeholder"
+                                    Name="PART_Watermark"
                                     HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                     VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
+                                    Opacity="0.5"
                                     Foreground="{TemplateBinding PlaceholderForeground}"
                                     Text="{TemplateBinding PlaceholderText}"
                                     TextAlignment="{TemplateBinding TextAlignment}"
@@ -603,10 +573,6 @@
             </ControlTemplate>
         </Setter>
 
-        <Style Selector="^:touch-mode">
-            <Setter Property="ContextFlyout" Value="{StaticResource HorizontalTextBoxContextFlyout}" />
-        </Style>
-
         <Style Selector="^:disabled">
             <Setter Property="Foreground" Value="{DynamicResource TextBoxDisabledForeground}" />
         </Style>

src/Semi.Avalonia/Controls/TitleBar.axaml

@@ -0,0 +1,53 @@
+<ResourceDictionary
+    xmlns="https://github.com/avaloniaui"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+    <ControlTheme x:Key="{x:Type TitleBar}" TargetType="TitleBar">
+        <Setter Property="VerticalAlignment" Value="Top" />
+        <Setter Property="HorizontalAlignment" Value="Stretch" />
+        <Setter Property="Background" Value="Transparent" />
+        <Setter Property="Template">
+            <ControlTemplate>
+                <Panel HorizontalAlignment="{TemplateBinding HorizontalAlignment}" VerticalAlignment="Stretch">
+                    <Panel
+                        Name="PART_MouseTracker"
+                        Height="1"
+                        VerticalAlignment="Top" />
+                    <Panel Name="PART_Container">
+                        <Border
+                            Name="PART_Background"
+                            Background="{TemplateBinding Background}"
+                            IsHitTestVisible="False"
+                            Win32Properties.NonClientHitTestResult="Caption" />
+                        <CaptionButtons
+                            Name="PART_CaptionButtons"
+                            HorizontalAlignment="Right"
+                            VerticalAlignment="Top"
+                            Foreground="{TemplateBinding Foreground}"
+                            Win32Properties.NonClientHitTestResult="Client" />
+                    </Panel>
+                </Panel>
+            </ControlTemplate>
+        </Setter>
+
+        <Style Selector="^:fullscreen /template/ Border#PART_Background">
+            <Setter Property="IsHitTestVisible" Value="True" />
+        </Style>
+
+        <Style Selector="^:fullscreen /template/ Panel#PART_MouseTracker">
+            <Setter Property="Background" Value="Transparent" />
+        </Style>
+
+        <Style Selector="^:fullscreen /template/ Panel#PART_Container">
+            <Setter Property="RenderTransform" Value="translateY(-50px)" />
+            <Setter Property="Transitions">
+                <Transitions>
+                    <TransformOperationsTransition Property="RenderTransform" Duration="0:0:0.1" />
+                </Transitions>
+            </Setter>
+        </Style>
+
+        <Style Selector="^:fullscreen:pointerover /template/ Panel#PART_Container">
+            <Setter Property="RenderTransform" Value="none" />
+        </Style>
+    </ControlTheme>
+</ResourceDictionary>

src/Semi.Avalonia/Controls/Window.axaml

@@ -14,7 +14,10 @@
                     <Border Name="PART_TransparencyFallback" IsHitTestVisible="False" />
                     <Border Background="{TemplateBinding Background}" IsHitTestVisible="False" />
                     <Panel Margin="{TemplateBinding WindowDecorationMargin}" Background="Transparent" />
-                    <VisualLayerManager Name="PART_VisualLayerManager">
+                    <VisualLayerManager>
+                        <VisualLayerManager.ChromeOverlayLayer>
+                            <TitleBar />
+                        </VisualLayerManager.ChromeOverlayLayer>
                         <ContentPresenter
                             Name="PART_ContentPresenter"
                             Margin="{TemplateBinding Padding}"

src/Semi.Avalonia/Controls/WindowDrawnDecorations.axaml

@@ -1,217 +0,0 @@
-<ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
-
-    <ControlTheme x:Key="CaptionButton" TargetType="Button">
-        <Setter Property="Foreground" Value="{DynamicResource CaptionButtonForeground}" />
-        <Setter Property="Background" Value="Transparent" />
-        <Setter Property="CornerRadius" Value="{StaticResource CaptionButtonCornerRadius}" />
-        <Setter Property="Padding" Value="{StaticResource CaptionButtonPadding}" />
-        <Setter Property="Width" Value="{StaticResource CaptionButtonWidth}" />
-        <Setter Property="Height" Value="{StaticResource CaptionButtonHeight}" />
-        <Setter Property="WindowDecorationProperties.ElementRole" Value="DecorationsElement" />
-        <Setter Property="Template">
-            <ControlTemplate TargetType="Button">
-                <ContentPresenter
-                    Name="PART_ContentPresenter"
-                    Padding="{TemplateBinding Padding}"
-                    Background="{TemplateBinding Background}"
-                    BorderBrush="{TemplateBinding BorderBrush}"
-                    BorderThickness="{TemplateBinding BorderThickness}"
-                    Content="{TemplateBinding Content}"
-                    ContentTemplate="{TemplateBinding ContentTemplate}"
-                    CornerRadius="{TemplateBinding CornerRadius}"
-                    Foreground="{TemplateBinding Foreground}">
-                    <ContentPresenter.DataTemplates>
-                        <DataTemplate DataType="Geometry">
-                            <PathIcon
-                                Theme="{StaticResource InnerPathIcon}"
-                                Data="{Binding}" />
-                        </DataTemplate>
-                    </ContentPresenter.DataTemplates>
-                </ContentPresenter>
-            </ControlTemplate>
-        </Setter>
-
-        <Style Selector="^:pointerover">
-            <Setter Property="Background" Value="{DynamicResource CaptionButtonPointeroverBackground}" />
-        </Style>
-
-        <Style Selector="^:pressed">
-            <Setter Property="Background" Value="{DynamicResource CaptionButtonPressedBackground}" />
-        </Style>
-
-        <Style Selector="^:disabled">
-            <Setter Property="Foreground" Value="{DynamicResource CaptionButtonDisabledForeground}" />
-        </Style>
-    </ControlTheme>
-
-    <ControlTheme x:Key="{x:Type WindowDrawnDecorations}" TargetType="WindowDrawnDecorations">
-        <Setter Property="DefaultTitleBarHeight" Value="32" />
-        <Setter Property="DefaultFrameThickness" Value="1" />
-        <Setter Property="DefaultShadowThickness" Value="8" />
-        <Setter Property="Template">
-            <WindowDrawnDecorationsTemplate>
-                <WindowDrawnDecorationsContent>
-                    <WindowDrawnDecorationsContent.Underlay>
-                        <!--  Full-size: covers shadow area + frame + behind client area  -->
-                        <Panel Name="PART_UnderlayWrapper">
-                            <Border
-                                Name="PART_WindowBorder"
-                                Background="{DynamicResource WindowBackground}"
-                                BorderBrush="{DynamicResource WindowBorderBrush}"
-                                BorderThickness="{TemplateBinding FrameThickness}"
-                                IsHitTestVisible="False" />
-                            <!-- Titlebar: background, title text, and drag area live in underlay -->
-                            <Panel Name="PART_TitleBar"
-                                   VerticalAlignment="Top"
-                                   Height="{TemplateBinding TitleBarHeight}"
-                                   Background="{DynamicResource TitleBarBackground}"
-                                   IsVisible="{TemplateBinding HasTitleBar}"
-                                   WindowDecorationProperties.ElementRole="TitleBar" />
-                        </Panel>
-                    </WindowDrawnDecorationsContent.Underlay>
-
-                    <WindowDrawnDecorationsContent.Overlay>
-                        <!--  Positioned over the titlebar area  -->
-                        <Panel Name="PART_OverlayWrapper">
-                            <!--  Title text lives in overlay so it renders above client content  -->
-                            <Panel
-                                Name="PART_TitleTextPanel"
-                                Height="{TemplateBinding TitleBarHeight}"
-                                VerticalAlignment="Top"
-                                IsHitTestVisible="False"
-                                IsVisible="{TemplateBinding HasTitleBar}">
-                                <TextBlock
-                                    Margin="12,0,0,0"
-                                    VerticalAlignment="Center"
-                                    Text="{TemplateBinding Title}" />
-                            </Panel>
-                            <StackPanel
-                                Name="PART_OverlayPanel"
-                                Height="{TemplateBinding TitleBarHeight}"
-                                HorizontalAlignment="Right"
-                                VerticalAlignment="Top"
-                                IsVisible="{TemplateBinding HasTitleBar}"
-                                Orientation="Horizontal">
-                                <Button
-                                    Name="PART_FullScreenButton"
-                                    Theme="{StaticResource CaptionButton}"
-                                    Content="{StaticResource WindowExpandGlyph}"
-                                    WindowDecorationProperties.ElementRole="FullScreenButton" />
-                                <Button
-                                    Name="PART_MinimizeButton"
-                                    Theme="{StaticResource CaptionButton}"
-                                    Content="{StaticResource WindowMinimizeGlyph}"
-                                    WindowDecorationProperties.ElementRole="MinimizeButton" />
-                                <Button
-                                    Name="PART_MaximizeButton"
-                                    Theme="{StaticResource CaptionButton}"
-                                    Content="{StaticResource WindowMaximizeGlyph}"
-                                    WindowDecorationProperties.ElementRole="MaximizeButton" />
-                                <Button
-                                    Name="PART_CloseButton"
-                                    Theme="{StaticResource CaptionButton}"
-                                    Content="{StaticResource WindowCloseIconGlyph}"
-                                    WindowDecorationProperties.ElementRole="CloseButton" />
-                            </StackPanel>
-                        </Panel>
-                    </WindowDrawnDecorationsContent.Overlay>
-
-                    <WindowDrawnDecorationsContent.FullscreenPopover>
-                        <!--  Shown on hover at top edge in fullscreen  -->
-                        <DockPanel
-                            Height="{TemplateBinding DefaultTitleBarHeight}"
-                            Background="{DynamicResource TitleBarBackground}"
-                            VerticalAlignment="Top"
-                            WindowDecorationProperties.ElementRole="TitleBar">
-                            <StackPanel DockPanel.Dock="Right" Orientation="Horizontal">
-                                <Button
-                                    Name="PART_PopoverFullScreenButton"
-                                    Theme="{StaticResource CaptionButton}"
-                                    Content="{StaticResource WindowCollapseGlyph}"
-                                    WindowDecorationProperties.ElementRole="FullScreenButton" />
-                                <Button
-                                    Name="PART_PopoverCloseButton"
-                                    Theme="{StaticResource CaptionButton}"
-                                    Content="{StaticResource WindowCloseIconGlyph}"
-                                    WindowDecorationProperties.ElementRole="CloseButton" />
-                            </StackPanel>
-                            <TextBlock
-                                Margin="12,0,0,0"
-                                VerticalAlignment="Center"
-                                Text="{TemplateBinding Title}" />
-                        </DockPanel>
-                    </WindowDrawnDecorationsContent.FullscreenPopover>
-                </WindowDrawnDecorationsContent>
-            </WindowDrawnDecorationsTemplate>
-        </Setter>
-
-        <Style Selector="^ /template/ Button#PART_CloseButton,^ /template/ Button#PART_PopoverCloseButton">
-            <Style Selector="^:pointerover">
-                <Setter Property="Foreground" Value="{DynamicResource CaptionButtonCloseForeground}" />
-                <Setter Property="Background" Value="{DynamicResource CaptionButtonClosePointeroverBackground}" />
-            </Style>
-            <Style Selector="^:pressed">
-                <Setter Property="Foreground" Value="{DynamicResource CaptionButtonCloseForeground}" />
-                <Setter Property="Background" Value="{DynamicResource CaptionButtonClosePressedBackground}" />
-            </Style>
-        </Style>
-
-        <!--  Shadow: inset border and add drop shadow  -->
-        <Style Selector="^:has-shadow">
-            <Style Selector="^ /template/ Panel#PART_UnderlayWrapper">
-                <Setter Property="Margin" Value="{TemplateBinding ShadowThickness}" />
-            </Style>
-            <Style Selector="^ /template/ Border#PART_WindowBorder">
-                <Setter Property="BoxShadow" Value="{DynamicResource WindowBorderShadow}" />
-            </Style>
-            <Style Selector="^ /template/ Panel#PART_OverlayWrapper">
-                <Setter Property="Margin" Value="{TemplateBinding ShadowThickness}" />
-            </Style>
-        </Style>
-
-        <!-- Maximized: restore button path changes -->
-        <Style Selector="^:maximized /template/ Button#PART_MaximizeButton">
-            <Setter Property="Content" Value="{StaticResource WindowRestoreGlyph}" />
-        </Style>
-
-        <!--  Border: inset titlebar and buttons inside frame  -->
-        <Style Selector="^:has-border">
-            <Style Selector="^ /template/ Panel#PART_TitleTextPanel">
-                <Setter Property="Margin" Value="1,1,1,0" />
-            </Style>
-            <Style Selector="^ /template/ Panel#PART_TitleBar">
-                <Setter Property="Margin" Value="1,1,1,0" />
-            </Style>
-            <Style Selector="^ /template/ StackPanel#PART_OverlayPanel">
-                <Setter Property="Margin" Value="0,1,1,0" />
-            </Style>
-        </Style>
-
-        <!-- Hide caption buttons when the platform does not support the action -->
-        <Style Selector="^:not(:has-minimize) /template/ Button#PART_MinimizeButton">
-            <Setter Property="IsVisible" Value="False"/>
-        </Style>
-        <Style Selector="^:not(:has-maximize) /template/ Button#PART_MaximizeButton">
-            <Setter Property="IsVisible" Value="False"/>
-        </Style>
-        <Style Selector="^:not(:has-fullscreen) /template/ Button#PART_FullScreenButton">
-            <Setter Property="IsVisible" Value="False"/>
-        </Style>
-        <Style Selector="^:not(:has-fullscreen) /template/ Button#PART_PopoverFullScreenButton">
-            <Setter Property="IsVisible" Value="False"/>
-        </Style>
-
-        <!--  Fullscreen: hide overlay and titlebar (popover takes over)  -->
-        <Style Selector="^:fullscreen">
-            <Style Selector="^ /template/ Panel#PART_TitleTextPanel">
-                <Setter Property="IsVisible" Value="False" />
-            </Style>
-            <Style Selector="^ /template/ StackPanel#PART_OverlayPanel">
-                <Setter Property="IsVisible" Value="False" />
-            </Style>
-            <Style Selector="^ /template/ Panel#PART_TitleBar">
-                <Setter Property="IsVisible" Value="False" />
-            </Style>
-        </Style>
-    </ControlTheme>
-</ResourceDictionary>

src/Semi.Avalonia/Controls/_index.axaml

@@ -6,21 +6,18 @@
         <ResourceInclude Source="AutoCompleteBox.axaml" />
         <ResourceInclude Source="Border.axaml" />
         <ResourceInclude Source="Button.axaml" />
-        <ResourceInclude Source="ContentPage.axaml" />
         <ResourceInclude Source="ButtonSpinner.axaml" />
         <ResourceInclude Source="Calendar.axaml" />
         <ResourceInclude Source="CalendarDatePicker.axaml" />
+        <ResourceInclude Source="CaptionButtons.axaml" />
         <ResourceInclude Source="Carousel.axaml" />
-        <ResourceInclude Source="CarouselPage.axaml" />
         <ResourceInclude Source="CheckBox.axaml" />
         <ResourceInclude Source="ComboBox.axaml" />
-        <ResourceInclude Source="CommandBar.axaml" />
         <ResourceInclude Source="ContextMenu.axaml" />
         <ResourceInclude Source="DataValidationErrors.axaml" />
         <ResourceInclude Source="DatePicker.axaml" />
         <ResourceInclude Source="DateTimePickerShared.axaml" />
         <ResourceInclude Source="DropDownButton.axaml" />
-        <ResourceInclude Source="DrawerPage.axaml" />
         <ResourceInclude Source="EmbeddableControlRoot.axaml" />
         <ResourceInclude Source="Expander.axaml" />
         <ResourceInclude Source="FlyoutPresenter.axaml" />
@@ -36,9 +33,7 @@
         <ResourceInclude Source="MenuFlyoutPresenter.axaml" />
         <ResourceInclude Source="NotificationCard.axaml" />
         <ResourceInclude Source="NumericUpDown.axaml" />
-        <ResourceInclude Source="NavigationPage.axaml" />
         <ResourceInclude Source="PathIcon.axaml" />
-        <ResourceInclude Source="PipsPager.axaml" />
         <ResourceInclude Source="Popup.axaml" />
         <ResourceInclude Source="ProgressBar.axaml" />
         <ResourceInclude Source="RadioButton.axaml" />
@@ -52,18 +47,17 @@
         <ResourceInclude Source="TabControl.axaml" />
         <ResourceInclude Source="TabItem.axaml" />
         <ResourceInclude Source="TabStrip.axaml" />
-        <ResourceInclude Source="TabbedPage.axaml" />
         <ResourceInclude Source="TextBlock.axaml" />
         <ResourceInclude Source="TextBox.axaml" />
         <ResourceInclude Source="ThemeVariantScope.axaml" />
         <ResourceInclude Source="TimePicker.axaml" />
+        <ResourceInclude Source="TitleBar.axaml" />
         <ResourceInclude Source="ToggleButton.axaml" />
         <ResourceInclude Source="ToggleSwitch.axaml" />
         <ResourceInclude Source="Tooltip.axaml" />
         <ResourceInclude Source="TransitioningContentControl.axaml" />
         <ResourceInclude Source="TreeView.axaml" />
         <ResourceInclude Source="Window.axaml" />
-        <ResourceInclude Source="WindowDrawnDecorations.axaml" />
         <ResourceInclude Source="WindowNotificationManager.axaml" />
     </ResourceDictionary.MergedDictionaries>
 </ResourceDictionary>