Fix commit convention: align subject line limit and casing with Conventional Commits spec

Agent-Logs-Url: https://github.com/irihitech/Semi.Avalonia/sessions/b699d4e5-4563-449e-b2ba-2c85fce56ca2

Co-authored-by: rabbitism <14807942+rabbitism@users.noreply.github.com>

.github/COMMIT_CONVENTION.md

@@ -0,0 +1,92 @@
+# Git Commit Message Convention
+
+This project follows the [Conventional Commits](https://www.conventionalcommits.org/) specification for commit messages.
+
+## Format
+
+```
+<type>[optional scope]: <description>
+
+[optional body]
+
+[optional footer(s)]
+```
+
+## Types
+
+| Type | Description |
+|------|-------------|
+| `feat` | A new feature |
+| `fix` | A bug fix |
+| `docs` | Documentation only changes |
+| `style` | Changes that do not affect the meaning of the code (formatting, missing semicolons, etc.) |
+| `refactor` | A code change that neither fixes a bug nor adds a feature |
+| `perf` | A code change that improves performance |
+| `test` | Adding missing tests or correcting existing tests |
+| `build` | Changes that affect the build system or external dependencies |
+| `ci` | Changes to CI configuration files and scripts |
+| `chore` | Other changes that don't modify source or test files |
+| `revert` | Reverts a previous commit |
+
+## Rules
+
+1. **Limit the subject line to 50 characters** (72 character hard limit)
+2. **Use the imperative mood** in the subject line (e.g., "add feature" not "added feature")
+3. **Do not end the subject line with a period**
+4. **Use lowercase** for the description (e.g., "add feature" not "Add feature")
+5. **Separate subject from body with a blank line**
+6. **Wrap the body at 72 characters**
+7. **Use the body to explain what and why**, not how
+8. **Reference issues and pull requests** in the footer
+
+## Scope
+
+The scope should be the name of the package or area affected (e.g., `button`, `datepicker`, `theme`, `demo`).
+
+## Examples
+
+### Simple commit
+
+```
+feat(button): add loading state support
+```
+
+### Commit with body
+
+```
+fix(datepicker): correct month navigation overflow
+
+When navigating past December, the month index wrapped to a
+negative value instead of rolling over to January of the next year.
+```
+
+### Commit with breaking change
+
+```
+feat(theme)!: rename SemiColorPrimary to SemiColorBrand
+
+BREAKING CHANGE: The token SemiColorPrimary has been renamed to
+SemiColorBrand. Update all references in your custom theme files.
+```
+
+### Commit referencing an issue
+
+```
+fix(textbox): placeholder not visible in dark mode
+
+Closes #123
+```
+
+## Breaking Changes
+
+Breaking changes must be indicated by appending a `!` after the type/scope, or by including a `BREAKING CHANGE:` footer. Both methods may be used together.
+
+## Revert Commits
+
+When reverting a previous commit, use the `revert` type and reference the reverted commit SHA in the footer:
+
+```
+revert: feat(button): add loading state support
+
+Revert commit a1b2c3d.
+```

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,13 +1,13 @@
 <Project>
     <PropertyGroup>
         <ManagePackageVersionsCentrally>true</ManagePackageVersionsCentrally>
-        <AvaloniaVersion>12.0.0-preview2</AvaloniaVersion>
-        <DataGridVersion>11.3.10</DataGridVersion>
+        <AvaloniaVersion>11.3.11</AvaloniaVersion>
+        <DataGridVersion>11.3.11</DataGridVersion>
         <SkiaSharpVersion>3.119.1</SkiaSharpVersion>
     </PropertyGroup>
     <ItemGroup>
         <PackageVersion Include="Avalonia" Version="$(AvaloniaVersion)"/>
-        <PackageVersion Include="AvaloniaUI.DiagnosticsSupport" Version="2.2.0-beta3"/>
+        <PackageVersion Include="Avalonia.Diagnostics" Version="$(AvaloniaVersion)" />
         <PackageVersion Include="Avalonia.Desktop" Version="$(AvaloniaVersion)" />
         <PackageVersion Include="Avalonia.LinuxFramebuffer" Version="$(AvaloniaVersion)"/>
         <PackageVersion Include="Avalonia.iOS" Version="$(AvaloniaVersion)" />

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<App>
+{
+    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,8 +10,8 @@
         <semi:SemiTheme Locale="zh-CN" />
         <semi:SemiPopupAnimations />
         <semi:ColorPickerSemiTheme />
-        <!-- <semi:DataGridSemiTheme /> -->
-        <!-- <semi:TreeDataGridSemiTheme /> -->
+        <semi:DataGridSemiTheme />
+        <semi:TreeDataGridSemiTheme />
     </Application.Styles>
     <Application.Resources>
         <ResourceDictionary>

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/Controls/ColorDetailControl.cs

@@ -3,7 +3,6 @@ using System.Threading.Tasks;
 using Avalonia;
 using Avalonia.Controls;
 using Avalonia.Controls.Primitives;
-using Avalonia.Input.Platform;
 using Avalonia.Media;
 using Semi.Avalonia.Demo.Converters;
 

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

@@ -28,7 +28,7 @@
         </StackPanel.Styles>
 
         <AutoCompleteBox
-            PlaceholderText="Please select a State"
+            Watermark="Please select a State"
             ValueMemberBinding="{Binding Name,DataType=vm:StateData}" />
         <AutoCompleteBox
             Classes="Large"
@@ -41,7 +41,7 @@
             ValueMemberBinding="{Binding Name,DataType=vm:StateData}" />
         <AutoCompleteBox
             IsEnabled="False"
-            PlaceholderText="Disabled"
+            Watermark="Disabled"
             ValueMemberBinding="{Binding Name,DataType=vm:StateData}" />
         <AutoCompleteBox
             InnerLeftContent="https://"
@@ -52,16 +52,16 @@
             <AutoCompleteBox
                 Width="100"
                 Classes="Large"
-                PlaceholderText="Large"
+                Watermark="Large"
                 ValueMemberBinding="{Binding Name,DataType=vm:StateData}" />
             <AutoCompleteBox
                 Width="100"
-                PlaceholderText="Default"
+                Watermark="Default"
                 ValueMemberBinding="{Binding Name,DataType=vm:StateData}" />
             <AutoCompleteBox
                 Width="100"
                 Classes="Small"
-                PlaceholderText="Small"
+                Watermark="Small"
                 ValueMemberBinding="{Binding Name,DataType=vm:StateData}" />
         </StackPanel>
 
@@ -69,12 +69,12 @@
             <AutoCompleteBox
                 Width="100"
                 IsEnabled="False"
-                PlaceholderText="Disabled"
+                Watermark="Disabled"
                 ValueMemberBinding="{Binding Name,DataType=vm:StateData}" />
             <AutoCompleteBox
                 Width="100"
                 Classes="Bordered"
-                PlaceholderText="Bordered"
+                Watermark="Bordered"
                 ValueMemberBinding="{Binding Name,DataType=vm:StateData}" />
             <AutoCompleteBox
                 Width="100"

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/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}">
-                    <AppBarButton Label="New" Icon="{DynamicResource SemiIconPlus}" />
-                    <AppBarButton Label="Save" Icon="{DynamicResource SemiIconSave}" />
-                    <AppBarSeparator />
-                    <AppBarToggleButton Label="Bold" Icon="{DynamicResource SemiIconBold}" />
-                    <AppBarToggleButton Label="Italic" Icon="{DynamicResource SemiIconItalic}" />
-                    <AppBarToggleButton IsChecked="True" IsEnabled="False" Label="Underline" Icon="{DynamicResource SemiIconUnderline}" />
-                    <AppBarSeparator />
-                    <AppBarButton Label="Share" Icon="{DynamicResource SemiIconShare}" />
-                    <AppBarButton Label="Export" Icon="{DynamicResource SemiIconExport}" />
-                    <AppBarButton Label="Print" Icon="{DynamicResource SemiIconPrint}" />
-                    <AppBarSeparator />
-                    <AppBarButton Label="Delete" Icon="{DynamicResource SemiIconDelete}" />
-                </CommandBar>
-            </GroupBox>
-
-            <!--  With secondary commands (overflow)  -->
-            <GroupBox>
-                <GroupBox.Header>
-                    <TextBlock Text="CommandBar — With Secondary Commands (overflow)" />
-                </GroupBox.Header>
-                <CommandBar>
-                    <AppBarButton Label="New" Icon="{DynamicResource SemiIconPlus}" />
-                    <AppBarButton Label="Save" Icon="{DynamicResource SemiIconSave}" />
-                    <AppBarButton Label="Share" Icon="{DynamicResource SemiIconShare}" />
-                    <CommandBar.SecondaryCommands>
-                        <AppBarButton Label="Export" Icon="{DynamicResource SemiIconExport}" />
-                        <AppBarButton 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

@@ -0,0 +1,179 @@
+<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

@@ -0,0 +1,13 @@
+using Avalonia.Controls;
+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,72 +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" />
-
-                <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}" />
-
-        <Border Margin="12"
-                BorderBrush="{DynamicResource SemiColorBorder}"
-                BorderThickness="1"
-                CornerRadius="6"
-                ClipToBounds="True">
-            <DrawerPage Name="DemoDrawer"
-                        Header="First Look"
-                        DrawerLength="250">
-                <DrawerPage.DrawerHeader>
-                    <Border Padding="16" Background="{DynamicResource SemiColorPrimary}">
-                        <TextBlock Text="Menu" FontSize="18" FontWeight="SemiBold" Foreground="{DynamicResource SemiColorText0}" />
-                    </Border>
-                </DrawerPage.DrawerHeader>
-                <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>
-        </Border>
-    </DockPanel>
-</UserControl>

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

@@ -1,68 +0,0 @@
-using System;
-using Avalonia.Controls;
-using Avalonia.Interactivity;
-using Avalonia.Layout;
-using Avalonia.Media;
-
-namespace Semi.Avalonia.Demo.Pages;
-
-public partial class DrawerPageDemo : UserControl
-{
-    public DrawerPageDemo()
-    {
-        InitializeComponent();
-    }
-
-    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,
-                    Foreground = Brushes.Black,
-                },
-                HorizontalContentAlignment = HorizontalAlignment.Stretch,
-                VerticalContentAlignment = VerticalAlignment.Stretch
-            };
-            DemoDrawer.IsOpen = false;
-        }
-    }
-
-    private void UpdateStatus()
-    {
-        StatusText.Text = $"Drawer: {(DemoDrawer.IsOpen ? "Open" : "Closed")}";
-    }
-}

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

@@ -36,20 +36,10 @@
                         <HyperlinkButton HorizontalAlignment="Right" Content="更多" />
                     </Panel>
                 </HeaderedContentControl.Header>
-                <SelectableTextBlock Text="Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统。设计系统包含设计语言以及一整套可复用的前端组件，帮助设计师与开发者更容易地打造高质量的、用户体验一致的、符合设计规范的 Web 应用。" />
+                <HeaderedContentControl.Content>
+                    <SelectableTextBlock Text="Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统。设计系统包含设计语言以及一整套可复用的前端组件，帮助设计师与开发者更容易地打造高质量的、用户体验一致的、符合设计规范的 Web 应用。" />
+                </HeaderedContentControl.Content>
             </HeaderedContentControl>
-            <TextBlock>Real GroupBox</TextBlock>
-            <GroupBox
-                HorizontalAlignment="Left"
-                MaxWidth="360">
-                <HeaderedContentControl.Header>
-                    <Panel>
-                        <SelectableTextBlock Text="Semi Design" />
-                        <HyperlinkButton HorizontalAlignment="Right" Content="更多" />
-                    </Panel>
-                </HeaderedContentControl.Header>
-                <SelectableTextBlock Text="Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统。设计系统包含设计语言以及一整套可复用的前端组件，帮助设计师与开发者更容易地打造高质量的、用户体验一致的、符合设计规范的 Web 应用。" />
-            </GroupBox>
         </StackPanel>
     </ScrollViewer>
 </UserControl>

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

@@ -0,0 +1,327 @@
+<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

@@ -0,0 +1,24 @@
+using System.Threading.Tasks;
+using Avalonia.Controls;
+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,65 +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" />
-                </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>
-    </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

@@ -28,15 +28,15 @@
             <NumericUpDown
                 Width="100"
                 Classes="Large"
-                PlaceholderText="Large"
+                Watermark="Large"
                 ButtonSpinnerLocation="Left" />
             <NumericUpDown
                 Width="100"
-                PlaceholderText="Default"
+                Watermark="Default"
                 ShowButtonSpinner="False" />
             <NumericUpDown
                 Width="100"
-                PlaceholderText="Small"
+                Watermark="Small"
                 Classes="Small" />
         </StackPanel>
 

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

@@ -353,12 +353,12 @@
                         <StackPanel>
                             <TextBlock Text="Install via nuget: " />
                             <Border Margin="0,16" Classes="CodeBlock">
-                                <SelectableTextBlock  Text="{Binding $parent[local:Overview].MainInstall}" />
+                                <SelectableTextBlock FontFamily="Consolas" Text="{Binding $parent[local:Overview].MainInstall}" />
                             </Border>
                             <TextBlock Text="Reference styles: " />
                             <Border Margin="0,16" Classes="CodeBlock">
                                 <SelectableTextBlock
-                                    
+                                    FontFamily="Consolas"
                                     Text="{Binding $parent[local:Overview].MainStyle}"
                                     TextWrapping="Wrap" />
                             </Border>
@@ -368,12 +368,12 @@
                         <StackPanel>
                             <TextBlock Text="Install via nuget: " />
                             <Border Margin="0,16" Classes="CodeBlock">
-                                <SelectableTextBlock  Text="{Binding $parent[local:Overview].ColorPickerInstall}" />
+                                <SelectableTextBlock FontFamily="Consolas" Text="{Binding $parent[local:Overview].ColorPickerInstall}" />
                             </Border>
                             <TextBlock Text="Reference styles: " />
                             <Border Margin="0,16" Classes="CodeBlock">
                                 <SelectableTextBlock
-                                    
+                                    FontFamily="Consolas"
                                     Text="{Binding $parent[local:Overview].ColorPickerStyle}"
                                     TextWrapping="Wrap" />
                             </Border>
@@ -383,12 +383,12 @@
                         <StackPanel>
                             <TextBlock Text="Install via nuget: " />
                             <Border Margin="0,16" Classes="CodeBlock">
-                                <SelectableTextBlock  Text="{Binding $parent[local:Overview].DataGridInstall}" />
+                                <SelectableTextBlock FontFamily="Consolas" Text="{Binding $parent[local:Overview].DataGridInstall}" />
                             </Border>
                             <TextBlock Text="Reference styles: " />
                             <Border Margin="0,16" Classes="CodeBlock">
                                 <SelectableTextBlock
-                                    
+                                    FontFamily="Consolas"
                                     Text="{Binding $parent[local:Overview].DataGridStyle}"
                                     TextWrapping="Wrap" />
                             </Border>
@@ -398,12 +398,12 @@
                         <StackPanel>
                             <TextBlock Text="Install via nuget: " />
                             <Border Margin="0,16" Classes="CodeBlock">
-                                <SelectableTextBlock  Text="{Binding $parent[local:Overview].TreeDataGridInstall}" />
+                                <SelectableTextBlock FontFamily="Consolas" Text="{Binding $parent[local:Overview].TreeDataGridInstall}" />
                             </Border>
                             <TextBlock Text="Reference styles: " />
                             <Border Margin="0,16" Classes="CodeBlock">
                                 <SelectableTextBlock
-                                    
+                                    FontFamily="Consolas"
                                     Text="{Binding $parent[local:Overview].TreeDataGridStyle}"
                                     TextWrapping="Wrap" />
                             </Border>
@@ -413,12 +413,12 @@
                         <StackPanel>
                             <TextBlock Text="Install via nuget: " />
                             <Border Margin="0,16" Classes="CodeBlock">
-                                <SelectableTextBlock  Text="{Binding $parent[local:Overview].DockInstall}" />
+                                <SelectableTextBlock FontFamily="Consolas" Text="{Binding $parent[local:Overview].DockInstall}" />
                             </Border>
                             <TextBlock Text="Reference styles: " />
                             <Border Margin="0,16" Classes="CodeBlock">
                                 <SelectableTextBlock
-                                    
+                                    FontFamily="Consolas"
                                     Text="{Binding $parent[local:Overview].DockStyle}"
                                     TextWrapping="Wrap" />
                             </Border>
@@ -428,12 +428,12 @@
                         <StackPanel>
                             <TextBlock Text="Install via nuget: " />
                             <Border Margin="0,16" Classes="CodeBlock">
-                                <SelectableTextBlock  Text="{Binding $parent[local:Overview].TabaloniaInstall}" />
+                                <SelectableTextBlock FontFamily="Consolas" Text="{Binding $parent[local:Overview].TabaloniaInstall}" />
                             </Border>
                             <TextBlock Text="Reference styles: " />
                             <Border Margin="0,16" Classes="CodeBlock">
                                 <SelectableTextBlock
-                                    
+                                    FontFamily="Consolas"
                                     Text="{Binding $parent[local:Overview].TabaloniaStyle}"
                                     TextWrapping="Wrap" />
                             </Border>
@@ -443,12 +443,12 @@
                         <StackPanel>
                             <TextBlock Text="Install via nuget: " />
                             <Border Margin="0,16" Classes="CodeBlock">
-                                <SelectableTextBlock  Text="{Binding $parent[local:Overview].AvaloniaEditInstall}" />
+                                <SelectableTextBlock FontFamily="Consolas" Text="{Binding $parent[local:Overview].AvaloniaEditInstall}" />
                             </Border>
                             <TextBlock Text="Reference styles: " />
                             <Border Margin="0,16" Classes="CodeBlock">
                                 <SelectableTextBlock
-                                    
+                                    FontFamily="Consolas"
                                     Text="{Binding $parent[local:Overview].AvaloniaEditStyle}"
                                     TextWrapping="Wrap" />
                             </Border>

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

@@ -1,7 +1,6 @@
 using System.Threading.Tasks;
 using Avalonia.Controls;
 using Avalonia.Controls.Primitives;
-using Avalonia.Input.Platform;
 using Avalonia.Threading;
 using Semi.Avalonia.Demo.ViewModels;
 

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/TextBoxDemo.axaml

@@ -23,36 +23,36 @@
                 <TextBox
                     Width="100"
                     Classes="Large"
-                    PlaceholderText="Large" />
+                    Watermark="Large" />
                 <TextBox
                     Width="100"
-                    PlaceholderText="Default" />
+                    Watermark="Default" />
                 <TextBox
                     Width="100"
                     Classes="Small"
-                    PlaceholderText="Small" />
+                    Watermark="Small" />
             </StackPanel>
 
             <StackPanel Orientation="Horizontal">
                 <TextBox
                     Width="100"
                     IsEnabled="False"
-                    PlaceholderText="Disabled" />
+                    Watermark="Disabled" />
                 <TextBox
                     Width="100"
                     Classes="Bordered"
-                    PlaceholderText="Bordered" />
+                    Watermark="Bordered" />
                 <TextBox
                     Width="100"
                     Classes="Bordered"
                     IsEnabled="False" />
             </StackPanel>
-            <TextBox Width="300" Classes="TextArea" PlaceholderText="TextArea TextBox" />
+            <TextBox Width="300" Classes="TextArea" Watermark="TextArea TextBox" />
             <TextBox Width="300" Classes="TextArea ClearButton" Text="TextArea with ClearButton - text should be clearable" />
             <TextBox
                 Width="300"
                 Theme="{StaticResource LooklessTextBox}"
-                PlaceholderText="Lookless TextBox"
+                Watermark="Lookless TextBox"
                 InnerLeftContent="https://"
                 InnerRightContent=".com" />
         </StackPanel>

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

@@ -0,0 +1,126 @@
+<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:converters="clr-namespace:Semi.Avalonia.Demo.Converters"
+             mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
+             x:Class="Semi.Avalonia.Demo.Pages.TreeDataGridDemo"
+             x:DataType="vm:TreeDataGridDemoViewModel">
+    <UserControl.Resources>
+        <converters:FileIconConverter x:Key="FileIconConverter">
+            <StaticResource x:Key="file" ResourceKey="SemiIconFile" />
+            <StaticResource x:Key="folderOpen" ResourceKey="SemiIconFolderOpen" />
+            <StaticResource x:Key="folderClosed" ResourceKey="SemiIconFolder" />
+        </converters:FileIconConverter>
+    </UserControl.Resources>
+    <TabControl>
+        <TabItem Header="Songs">
+            <TreeDataGrid
+                AutoDragDropRows="True"
+                DataContext="{Binding SongsContext}"
+                Source="{Binding Songs}">
+                <TreeDataGrid.Resources>
+                    <DataTemplate x:Key="AlbumCell" DataType="vm:SongViewModel">
+                        <TextBlock
+                            HorizontalAlignment="Stretch"
+                            VerticalAlignment="Center"
+                            Background="Transparent"
+                            Text="{Binding Album}" />
+                    </DataTemplate>
+                    <DataTemplate x:Key="AlbumEditCell" DataType="vm:SongViewModel">
+                        <ComboBox
+                            VerticalAlignment="Center"
+                            Classes="Small"
+                            ItemsSource="{x:Static vm:Song.Albums}"
+                            SelectedItem="{Binding Album}" />
+                    </DataTemplate>
+                    <DataTemplate x:Key="CommentsCell" DataType="vm:SongViewModel">
+                        <TextBlock VerticalAlignment="Center" Text="{Binding CountOfComment}" />
+                    </DataTemplate>
+                    <DataTemplate x:Key="CommentsEditCell" DataType="vm:SongViewModel">
+                        <NumericUpDown
+                            Width="100"
+                            HorizontalAlignment="Left"
+                            VerticalAlignment="Center"
+                            Classes="Small"
+                            Value="{Binding CountOfComment}" />
+                    </DataTemplate>
+                </TreeDataGrid.Resources>
+                <TreeDataGrid.Styles>
+                    <Style Selector="TreeDataGrid TreeDataGridRow:nth-last-child(2n)">
+                        <Setter Property="Background" Value="{DynamicResource SemiColorFill0}" />
+                    </Style>
+                </TreeDataGrid.Styles>
+            </TreeDataGrid>
+        </TabItem>
+        <TabItem Header="Files">
+            <Grid DataContext="{Binding FilesContext}" RowDefinitions="Auto, *">
+                <DockPanel Margin="0,4" DockPanel.Dock="Top">
+                    <ComboBox
+                        DockPanel.Dock="Left"
+                        ItemsSource="{Binding Drives}"
+                        SelectedItem="{Binding SelectedDrive}" />
+                    <TextBox
+                        Margin="4,0,0,0"
+                        VerticalContentAlignment="Center"
+                        KeyDown="SelectedPath_KeyDown"
+                        Text="{Binding SelectedPath, Mode=OneWay}" />
+                </DockPanel>
+                <TreeDataGrid
+                    Name="fileViewer"
+                    Grid.Row="1"
+                    Source="{Binding Source}">
+                    <TreeDataGrid.Resources>
+
+                        <!--  Template for Name column cells  -->
+                        <DataTemplate x:Key="FileNameCell" DataType="vm:FileNodeViewModel">
+                            <StackPanel Orientation="Horizontal">
+                                <PathIcon
+                                    Theme="{StaticResource InnerPathIcon}"
+                                    Margin="8,0">
+                                    <PathIcon.Data>
+                                        <MultiBinding Converter="{StaticResource FileIconConverter}">
+                                            <Binding Path="IsDirectory" />
+                                            <Binding Path="IsExpanded" />
+                                        </MultiBinding>
+                                    </PathIcon.Data>
+                                </PathIcon>
+                                <TextBlock VerticalAlignment="Center" Text="{Binding Name}" />
+                            </StackPanel>
+                        </DataTemplate>
+
+                        <!--  Edit template for Name column cells  -->
+                        <DataTemplate x:Key="FileNameEditCell" DataType="vm:FileNodeViewModel">
+                            <StackPanel Orientation="Horizontal">
+                                <Image Margin="0,0,4,0" VerticalAlignment="Center">
+                                    <Image.Source>
+                                        <MultiBinding Converter="{StaticResource FileIconConverter}">
+                                            <Binding Path="IsDirectory" />
+                                            <Binding Path="IsExpanded" />
+                                        </MultiBinding>
+                                    </Image.Source>
+                                </Image>
+                                <TextBox
+                                    VerticalAlignment="Center"
+                                    Classes="Small"
+                                    Text="{Binding Name}">
+                                    <TextBox.Styles>
+                                        <Style Selector="DataValidationErrors">
+                                            <Setter Property="Theme" Value="{DynamicResource TooltipDataValidationErrors}" />
+                                        </Style>
+                                    </TextBox.Styles>
+                                </TextBox>
+                            </StackPanel>
+                        </DataTemplate>
+                    </TreeDataGrid.Resources>
+                    <TreeDataGrid.Styles>
+                        <Style Selector="TreeDataGrid TreeDataGridRow:nth-child(2n)">
+                            <Setter Property="Background" Value="{DynamicResource SemiColorFill0}" />
+                        </Style>
+                    </TreeDataGrid.Styles>
+                </TreeDataGrid>
+            </Grid>
+        </TabItem>
+    </TabControl>
+</UserControl>

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

@@ -0,0 +1,22 @@
+using Avalonia.Controls;
+using Avalonia.Input;
+using Semi.Avalonia.Demo.ViewModels;
+
+namespace Semi.Avalonia.Demo.Pages;
+
+public partial class TreeDataGridDemo : UserControl
+{
+    public TreeDataGridDemo()
+    {
+        InitializeComponent();
+        this.DataContext = new TreeDataGridDemoViewModel();
+    }
+
+    private void SelectedPath_KeyDown(object? sender, KeyEventArgs e)
+    {
+        if (e.Key == Key.Enter && DataContext is TreeDataGridDemoViewModel vm)
+        {
+            vm.FilesContext.SelectedPath = (sender as TextBox)?.Text;
+        }
+    }
+}

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

@@ -0,0 +1,104 @@
+<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}"
+            Watermark="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"
+                    SortMemberPath="Duration">
+                    <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

@@ -0,0 +1,24 @@
+using System.Threading.Tasks;
+using Avalonia.Controls;
+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/Semi.Avalonia.Demo.csproj

@@ -13,23 +13,20 @@
     <ItemGroup>
         <PackageReference Include="Avalonia"/>
         <PackageReference Include="Avalonia.Controls.ColorPicker"/>
-<!--        <PackageReference Include="Avalonia.Controls.DataGrid"/>-->
+        <PackageReference Include="Avalonia.Controls.DataGrid"/>
         <!--Condition below is needed to remove Avalonia.Diagnostics package from build output in Release configuration.-->
-        <PackageReference Include="AvaloniaUI.DiagnosticsSupport">
+        <PackageReference Include="Avalonia.Diagnostics">
             <IncludeAssets Condition="'$(Configuration)' != 'Debug'">None</IncludeAssets>
             <PrivateAssets Condition="'$(Configuration)' != 'Debug'">All</PrivateAssets>
         </PackageReference>
         <PackageReference Include="CommunityToolkit.Mvvm"/>
+        <PackageReference Include="Irihi.Avalonia.Shared"/>
     </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.TreeDataGrid\Semi.Avalonia.TreeDataGrid.csproj"/>-->
-    </ItemGroup>
-
-    <ItemGroup>
-      <AvaloniaXaml Remove="Pages\VariablesDemo.axaml" />
+        <ProjectReference Include="..\..\src\Semi.Avalonia.DataGrid\Semi.Avalonia.DataGrid.csproj"/>
+        <ProjectReference Include="..\..\src\Semi.Avalonia.TreeDataGrid\Semi.Avalonia.TreeDataGrid.csproj"/>
     </ItemGroup>
 </Project>

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

@@ -0,0 +1,152 @@
+<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

@@ -0,0 +1,110 @@
+<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,6 +2,8 @@
     <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

@@ -0,0 +1,154 @@
+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/TreeDataGridDemo/FilesPageViewModel.cs

@@ -0,0 +1,363 @@
+using System;
+using System.Collections.Generic;
+using System.Collections.ObjectModel;
+using System.ComponentModel;
+using System.Diagnostics;
+using System.IO;
+using System.Linq;
+using System.Runtime.InteropServices;
+using Avalonia.Controls;
+using Avalonia.Controls.Models.TreeDataGrid;
+using Avalonia.Controls.Selection;
+using Avalonia.Threading;
+using CommunityToolkit.Mvvm.ComponentModel;
+
+namespace Semi.Avalonia.Demo.ViewModels;
+
+public partial class FilesPageViewModel : ObservableObject
+{
+    public IList<string> Drives { get; }
+    public HierarchicalTreeDataGridSource<FileNodeViewModel> Source { get; }
+    [ObservableProperty] private string _selectedDrive;
+    private string? _selectedPath;
+    [ObservableProperty] private FileNodeViewModel? _root;
+
+    public string? SelectedPath
+    {
+        get => _selectedPath;
+        set => SetSelectedPath(value);
+    }
+
+    partial void OnSelectedDriveChanged(string value)
+    {
+        Root = new FileNodeViewModel(value, true, true);
+        if (Source is not null)
+        {
+            Source.Items = [Root];
+        }
+    }
+
+    public FilesPageViewModel()
+    {
+        Drives = DriveInfo.GetDrives().Select(x => x.Name).ToList();
+        if (RuntimeInformation.IsOSPlatform(OSPlatform.Windows))
+        {
+            SelectedDrive = @"C:\";
+        }
+        else
+        {
+            SelectedDrive = Drives.FirstOrDefault() ?? "/";
+        }
+
+        Source = new HierarchicalTreeDataGridSource<FileNodeViewModel>([])
+        {
+            Columns =
+            {
+                new CheckBoxColumn<FileNodeViewModel>(
+                    null,
+                    x => x.IsChecked,
+                    (o, v) => o.IsChecked = v,
+                    options: new CheckBoxColumnOptions<FileNodeViewModel>
+                    {
+                        CanUserResizeColumn = false,
+                    }),
+                new HierarchicalExpanderColumn<FileNodeViewModel>(
+                    new TemplateColumn<FileNodeViewModel>(
+                        "Name",
+                        "FileNameCell",
+                        "FileNameEditCell",
+                        new GridLength(1, GridUnitType.Star),
+                        new TemplateColumnOptions<FileNodeViewModel>
+                        {
+                            CompareAscending = FileNodeViewModel.SortAscending(vm => vm.Name),
+                            CompareDescending = FileNodeViewModel.SortDescending(vm => vm.Name),
+                            IsTextSearchEnabled = true,
+                            TextSearchValueSelector = vm => vm.Name
+                        }),
+                    vm => vm.Children,
+                    vm => vm.HasChildren,
+                    vm => vm.IsExpanded),
+                new TextColumn<FileNodeViewModel, long?>(
+                    "Size",
+                    vm => vm.Size,
+                    options: new TextColumnOptions<FileNodeViewModel>
+                    {
+                        CompareAscending = FileNodeViewModel.SortAscending(x => x.Size),
+                        CompareDescending = FileNodeViewModel.SortDescending(x => x.Size),
+                    }),
+                new TextColumn<FileNodeViewModel, DateTimeOffset?>(
+                    "Modified",
+                    x => x.Modified,
+                    options: new TextColumnOptions<FileNodeViewModel>
+                    {
+                        CompareAscending = FileNodeViewModel.SortAscending(x => x.Modified),
+                        CompareDescending = FileNodeViewModel.SortDescending(x => x.Modified),
+                    }),
+            }
+        };
+        Source.RowSelection!.SingleSelect = false;
+        Source.RowSelection.SelectionChanged += SelectionChanged;
+    }
+
+    private void SelectionChanged(object? sender, TreeSelectionModelSelectionChangedEventArgs<FileNodeViewModel> e)
+    {
+        var selectedPath = Source.RowSelection?.SelectedItem?.Path;
+        this.SetProperty(ref _selectedPath, selectedPath, nameof(SelectedPath));
+
+        foreach (var i in e.DeselectedItems)
+            Trace.WriteLine($"Deselected '{i?.Path}'");
+        foreach (var i in e.SelectedItems)
+            Trace.WriteLine($"Selected '{i?.Path}'");
+    }
+    private void SetSelectedPath(string? path)
+    {
+        if (string.IsNullOrEmpty(path))
+        {
+            Source.RowSelection!.Clear();
+            return;
+        }
+
+        var components = new Stack<string>();
+        DirectoryInfo? d = null;
+
+        if (File.Exists(path))
+        {
+            var f = new FileInfo(path);
+            components.Push(f.Name);
+            d = f.Directory;
+        }
+        else if (Directory.Exists(path))
+        {
+            d = new DirectoryInfo(path);
+        }
+
+        while (d is not null)
+        {
+            components.Push(d.Name);
+            d = d.Parent;
+        }
+
+        var index = IndexPath.Unselected;
+
+        if (components.Count > 0)
+        {
+            var drive = components.Pop();
+            var driveIndex = Drives.FindIndex(x => string.Equals(x, drive, StringComparison.OrdinalIgnoreCase));
+
+            if (driveIndex >= 0)
+                SelectedDrive = Drives[driveIndex];
+
+            var node = Root;
+            index = new IndexPath(0);
+
+            while (node is not null && components.Count > 0)
+            {
+                node.IsExpanded = true;
+
+                var component = components.Pop();
+                var i = node.Children.FindIndex(x => string.Equals(x.Name, component, StringComparison.OrdinalIgnoreCase));
+                node = i >= 0 ? node.Children[i] : null;
+                index = i >= 0 ? index.Append(i) : default;
+            }
+        }
+
+        Source.Items = [Root!];
+        Source.RowSelection!.SelectedIndex = index;
+    }
+}
+
+public partial class FileNodeViewModel : ObservableObject, IEditableObject
+{
+    [ObservableProperty] private string _path;
+    [ObservableProperty] private string _name;
+    private string? _undoName;
+    [ObservableProperty] private long? _size;
+    [ObservableProperty] private DateTimeOffset? _modified;
+    private FileSystemWatcher? _watcher;
+    private ObservableCollection<FileNodeViewModel>? _children;
+    [ObservableProperty] private bool _hasChildren = true;
+    [ObservableProperty] private bool _isExpanded;
+
+    public FileNodeViewModel(string path, bool isDirectory, bool isRoot = false)
+    {
+        Path = path;
+        Name = isRoot ? path : System.IO.Path.GetFileName(Path);
+        IsExpanded = isRoot;
+        IsDirectory = isDirectory;
+        HasChildren = isDirectory;
+
+        if (!isDirectory)
+        {
+            var info = new FileInfo(path);
+            Size = info.Length;
+            Modified = info.LastWriteTimeUtc;
+        }
+    }
+
+    public bool IsChecked { get; set; }
+    public bool IsDirectory { get; }
+    public IReadOnlyList<FileNodeViewModel> Children => _children ??= LoadChildren();
+
+    private ObservableCollection<FileNodeViewModel> LoadChildren()
+    {
+        if (!IsDirectory)
+        {
+            throw new NotSupportedException();
+        }
+
+        var options = new EnumerationOptions { IgnoreInaccessible = true };
+        var result = new ObservableCollection<FileNodeViewModel>();
+
+        foreach (var d in Directory.EnumerateDirectories(Path, "*", options))
+        {
+            result.Add(new FileNodeViewModel(d, true));
+        }
+
+        foreach (var f in Directory.EnumerateFiles(Path, "*", options))
+        {
+            result.Add(new FileNodeViewModel(f, false));
+        }
+
+        _watcher = new FileSystemWatcher
+        {
+            Path = Path,
+            NotifyFilter = NotifyFilters.FileName | NotifyFilters.Size | NotifyFilters.LastWrite,
+        };
+
+        _watcher.Changed += OnChanged;
+        _watcher.Created += OnCreated;
+        _watcher.Deleted += OnDeleted;
+        _watcher.Renamed += OnRenamed;
+        _watcher.EnableRaisingEvents = true;
+
+        if (result.Count == 0)
+            HasChildren = false;
+
+        return result;
+    }
+
+    public static Comparison<FileNodeViewModel?> SortAscending<T>(Func<FileNodeViewModel, T> selector)
+    {
+        return (x, y) =>
+        {
+            if (x is null && y is null)
+                return 0;
+            else if (x is null)
+                return -1;
+            else if (y is null)
+                return 1;
+            if (x.IsDirectory == y.IsDirectory)
+                return Comparer<T>.Default.Compare(selector(x), selector(y));
+            else if (x.IsDirectory)
+                return -1;
+            else
+                return 1;
+        };
+    }
+
+    public static Comparison<FileNodeViewModel?> SortDescending<T>(Func<FileNodeViewModel, T> selector)
+    {
+        return (x, y) =>
+        {
+            if (x is null && y is null)
+                return 0;
+            else if (x is null)
+                return 1;
+            else if (y is null)
+                return -1;
+            if (x.IsDirectory == y.IsDirectory)
+                return Comparer<T>.Default.Compare(selector(y), selector(x));
+            else if (x.IsDirectory)
+                return -1;
+            else
+                return 1;
+        };
+    }
+
+    void IEditableObject.BeginEdit() => _undoName = Name;
+    void IEditableObject.CancelEdit() => Name = _undoName ?? string.Empty;
+    void IEditableObject.EndEdit() => _undoName = null;
+
+    private void OnChanged(object sender, FileSystemEventArgs e)
+    {
+        if (e.ChangeType == WatcherChangeTypes.Changed && File.Exists(e.FullPath))
+        {
+            Dispatcher.UIThread.Post(() =>
+            {
+                foreach (var child in _children!)
+                {
+                    if (child.Path == e.FullPath)
+                    {
+                        if (!child.IsDirectory)
+                        {
+                            var info = new FileInfo(e.FullPath);
+                            child.Size = info.Length;
+                            child.Modified = info.LastWriteTimeUtc;
+                        }
+
+                        break;
+                    }
+                }
+            });
+        }
+    }
+
+    private void OnCreated(object sender, FileSystemEventArgs e)
+    {
+        Dispatcher.UIThread.Post(() =>
+        {
+            var node = new FileNodeViewModel(
+                e.FullPath,
+                File.GetAttributes(e.FullPath).HasFlag(FileAttributes.Directory));
+            _children!.Add(node);
+        });
+    }
+
+    private void OnDeleted(object sender, FileSystemEventArgs e)
+    {
+        Dispatcher.UIThread.Post(() =>
+        {
+            for (var i = 0; i < _children!.Count; ++i)
+            {
+                if (_children[i].Path == e.FullPath)
+                {
+                    _children.RemoveAt(i);
+                    Debug.WriteLine($"Removed {e.FullPath}");
+                    break;
+                }
+            }
+        });
+    }
+
+    private void OnRenamed(object sender, RenamedEventArgs e)
+    {
+        Dispatcher.UIThread.Post(() =>
+        {
+            foreach (var child in _children!)
+            {
+                if (child.Path == e.OldFullPath)
+                {
+                    child.Path = e.FullPath;
+                    child.Name = e.Name ?? string.Empty;
+                    break;
+                }
+            }
+        });
+    }
+}
+
+internal static class ListExtensions
+{
+    public static int FindIndex<T>(this IEnumerable<T> source, Func<T, bool> predicate)
+    {
+        int i = 0;
+        foreach (var item in source)
+        {
+            if (predicate(item))
+                return i;
+            i++;
+        }
+
+        return -1;
+    }
+}

demo/Semi.Avalonia.Demo/ViewModels/TreeDataGridDemo/SongsPageViewModel.cs

@@ -0,0 +1,54 @@
+using System.Collections.ObjectModel;
+using System.Linq;
+using Avalonia.Controls;
+using Avalonia.Controls.Models.TreeDataGrid;
+using CommunityToolkit.Mvvm.ComponentModel;
+
+namespace Semi.Avalonia.Demo.ViewModels;
+
+public class SongsPageViewModel : ObservableObject
+{
+    public FlatTreeDataGridSource<SongViewModel> Songs { get; }
+
+    public SongsPageViewModel()
+    {
+        var songs = new ObservableCollection<SongViewModel>(Song.Songs.Select(a => new SongViewModel()
+        {
+            Title = a.Title,
+            Artist = a.Artist,
+            Album = a.Album,
+            CountOfComment = a.CountOfComment,
+            IsSelected = false
+        }));
+
+        Songs = new FlatTreeDataGridSource<SongViewModel>(songs)
+        {
+            Columns =
+            {
+                new CheckBoxColumn<SongViewModel>(
+                    "IsSelected",
+                    a => a.IsSelected,
+                    (model, b) => { model.IsSelected = b; },
+                    new GridLength(108, GridUnitType.Pixel)),
+                new TextColumn<SongViewModel, string>(
+                    "Title",
+                    a => a.Title,
+                    (o, a) => o.Title = a,
+                    new GridLength(6, GridUnitType.Star)),
+                new TextColumn<SongViewModel, string>("Artist",
+                    a => a.Artist,
+                    (o, a) => o.Artist = a,
+                    new GridLength(6, GridUnitType.Star)),
+                new TemplateColumn<SongViewModel>("Album",
+                    "AlbumCell",
+                    "AlbumEditCell",
+                    new GridLength(6, GridUnitType.Star)),
+                new TemplateColumn<SongViewModel>(
+                    "Comments",
+                    "CommentsCell",
+                    "CommentsEditCell",
+                    new GridLength(6, GridUnitType.Star)),
+            }
+        };
+    }
+}

demo/Semi.Avalonia.Demo/ViewModels/TreeDataGridDemo/TreeDataGridDemoViewModel.cs

@@ -0,0 +1,9 @@
+using CommunityToolkit.Mvvm.ComponentModel;
+
+namespace Semi.Avalonia.Demo.ViewModels;
+
+public class TreeDataGridDemoViewModel : ObservableObject
+{
+    public SongsPageViewModel SongsContext { get; } = new();
+    public FilesPageViewModel FilesContext { get; } = new();
+}

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

@@ -0,0 +1,151 @@
+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

@@ -116,15 +116,15 @@
             <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="Palette">
+                <pages:PaletteDemo />
+            </TabItem>
+            <TabItem Header="HighContrastTheme">
+                <pages:HighContrastDemo />
+            </TabItem>
+            <TabItem Header="Variables">
+                <pages:VariablesDemo />
+            </TabItem>
             <TabItem Header="Icon">
                 <pages:IconDemo />
             </TabItem>
@@ -134,12 +134,12 @@
             <TabItem Header="ColorPicker">
                 <pages:ColorPickerDemo />
             </TabItem>
-            <!-- <TabItem Header="DataGrid"> -->
-            <!--     <pages:DataGridDemo /> -->
-            <!-- </TabItem> -->
-            <!-- <TabItem Header="TreeDataGrid"> -->
-            <!--     <pages:TreeDataGridDemo /> -->
-            <!-- </TabItem> -->
+            <TabItem Header="DataGrid">
+                <pages:DataGridDemo />
+            </TabItem>
+            <TabItem Header="TreeDataGrid">
+                <pages:TreeDataGridDemo />
+            </TabItem>
             <TabItem
                 Theme="{DynamicResource CategoryTabItem}"
                 Header="Basic" />
@@ -215,18 +215,6 @@
             <TabItem
                 Theme="{DynamicResource CategoryTabItem}"
                 Header="Navigation" />
-            <TabItem Header="ContentPage">
-                <pages:ContentPageDemo />
-            </TabItem>
-            <TabItem Header="DrawerPage">
-                <pages:DrawerPageDemo />
-            </TabItem>
-            <TabItem Header="NavigationPage">
-                <pages:NavigationPageDemo />
-            </TabItem>
-            <TabItem Header="TabbedPage">
-                <pages:TabbedPageDemo />
-            </TabItem>
             <TabItem Header="TabControl">
                 <pages:TabControlDemo />
             </TabItem>
@@ -281,9 +269,6 @@
             <TabItem
                 Theme="{DynamicResource CategoryTabItem}"
                 Header="Other" />
-            <TabItem Header="CommandBar">
-                <pages:CommandBarDemo />
-            </TabItem>
             <TabItem Header="GridSplitter">
                 <pages:GridSplitterDemo />
             </TabItem>

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

@@ -5,12 +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"
-    ExtendClientAreaTitleBarHeightHint="40"
     Icon="/Assets/irihi.ico"
     mc:Ignorable="d">
-    <views:MainView Margin="{Binding $parent[Window].WindowDecorationMargin}" />
+    <views:MainView />
 </Window>

src/Directory.Build.props

@@ -16,7 +16,6 @@
         <PackageProjectUrl>https://github.com/irihitech/Semi.Avalonia</PackageProjectUrl>
         <PackageLicenseExpression>MIT</PackageLicenseExpression>
         <PackageIcon>irihi.png</PackageIcon>
-        <PackageProjectUrl>https://github.com/irihitech/Semi.Avalonia</PackageProjectUrl>
         <PackageReadmeFile>README.md</PackageReadmeFile>
     </PropertyGroup>
 

src/Directory.Packages.props

@@ -1,7 +1,7 @@
 <Project>
     <PropertyGroup>
         <ManagePackageVersionsCentrally>true</ManagePackageVersionsCentrally>
-        <AvaloniaVersion>12.0.0-preview2</AvaloniaVersion>
+        <AvaloniaVersion>11.3.7</AvaloniaVersion>
         <DataGridVersion>11.3.7</DataGridVersion>
     </PropertyGroup>
     <ItemGroup>
@@ -9,6 +9,5 @@
         <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-preview1"/>
     </ItemGroup>
 </Project>

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

@@ -1,8 +1,8 @@
 <ResourceDictionary
     xmlns="https://github.com/avaloniaui"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-    xmlns:iri="https://irihi.tech/shared"
     xmlns:converters="using:Avalonia.Controls.Converters">
+    <converters:CornerRadiusFilterConverter x:Key="LeftCornerRadiusFilterConverter" Filter="TopLeft, BottomLeft" />
     <converters:ToBrushConverter x:Key="ToBrushConverter" />
 
     <ControlTheme x:Key="{x:Type ColorPicker}" TargetType="ColorPicker">
@@ -16,11 +16,11 @@
                     <Border
                         Margin="1,1,0,1"
                         Background="{DynamicResource ColorControlCheckeredBackgroundBrush}"
-                        CornerRadius="{TemplateBinding CornerRadius, Converter={iri:CornerRadiusMixerConverter Left}}" />
+                        CornerRadius="{TemplateBinding CornerRadius, Converter={StaticResource LeftCornerRadiusFilterConverter}}" />
                     <Border
                         Margin="1,1,0,1"
                         Background="{TemplateBinding HsvColor, Converter={StaticResource ToBrushConverter}}"
-                        CornerRadius="{TemplateBinding CornerRadius, Converter={iri:CornerRadiusMixerConverter Left}}" />
+                        CornerRadius="{TemplateBinding CornerRadius, Converter={StaticResource LeftCornerRadiusFilterConverter}}" />
                 </Panel>
             </Template>
         </Setter>

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

@@ -1,9 +1,11 @@
 <ResourceDictionary
     xmlns="https://github.com/avaloniaui"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-    xmlns:iri="https://irihi.tech/shared"
+    xmlns:converters="using:Avalonia.Controls.Converters"
     xmlns:pc="using:Avalonia.Controls.Primitives.Converters">
     <pc:AccentColorConverter x:Key="AccentColorConverter" />
+    <converters:CornerRadiusFilterConverter x:Key="LeftCornerRadiusFilterConverter" Filter="TopLeft, BottomLeft" />
+    <converters:CornerRadiusFilterConverter x:Key="RightCornerRadiusFilterConverter" Filter="TopRight, BottomRight" />
 
     <ControlTheme x:Key="{x:Type ColorPreviewer}" TargetType="ColorPreviewer">
         <Setter Property="Height" Value="{DynamicResource ColorPreviewerHeight}" />
@@ -32,7 +34,7 @@
                                 Background="{TemplateBinding HsvColor,
                                 Converter={StaticResource AccentColorConverter},
                                 ConverterParameter='-2'}"
-                                CornerRadius="{TemplateBinding CornerRadius,Converter={iri:CornerRadiusMixerConverter Left}}"
+                                CornerRadius="{TemplateBinding CornerRadius,Converter={StaticResource LeftCornerRadiusFilterConverter}}"
                                 Tag="-2" />
                             <Border
                                 Name="PART_AccentDecrement1Border"
@@ -68,7 +70,7 @@
                                 Background="{TemplateBinding HsvColor,
                                 Converter={StaticResource AccentColorConverter},
                                 ConverterParameter='2'}"
-                                CornerRadius="{TemplateBinding CornerRadius,Converter={iri:CornerRadiusMixerConverter Right}}"
+                                CornerRadius="{TemplateBinding CornerRadius,Converter={StaticResource RightCornerRadiusFilterConverter}}"
                                 Tag="2" />
                         </Grid>
                         <!--  Preview color: Must be last for drop shadow Z-index  -->

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

@@ -1,15 +1,14 @@
 <Project Sdk="Microsoft.NET.Sdk">
 
     <PropertyGroup>
-        <TargetFrameworks>net8.0;net10.0</TargetFrameworks>
-        <Version>12.0.0-preview2</Version>
-        <PackageReleaseNotes>Update to Semi.Avalonia.ColorPicker 12.0.0-preview2</PackageReleaseNotes>
+        <TargetFrameworks>netstandard2.0;net6.0;net8.0</TargetFrameworks>
+        <Version>11.3.7.3</Version>
+        <PackageReleaseNotes>Update to Semi.Avalonia.ColorPicker 11.3.7.3</PackageReleaseNotes>
         <Title>Semi.Avalonia.ColorPicker</Title>
     </PropertyGroup>
 
     <ItemGroup>
         <PackageReference Include="Avalonia.Controls.ColorPicker"/>
-        <PackageReference Include="Irihi.Avalonia.Shared"/>
         <None Include="README.md" Pack="true" PackagePath="\"/>
     </ItemGroup>
 

src/Semi.Avalonia.ColorPicker/SemiColorDarkPalette.cs

@@ -1,7 +1,6 @@
 using Avalonia.Controls;
 using Avalonia.Media;
 using Avalonia.Utilities;
-using Irihi.Avalonia.Shared.Helpers;
 
 namespace Semi.Avalonia.ColorPicker;
 
@@ -221,8 +220,8 @@ public class SemiColorDarkPalette: IColorPalette
     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.ColorPicker/SemiColorLightPalette.cs

@@ -1,7 +1,6 @@
 using Avalonia.Controls;
 using Avalonia.Media;
 using Avalonia.Utilities;
-using Irihi.Avalonia.Shared.Helpers;
 
 namespace Semi.Avalonia.ColorPicker;
 
@@ -221,8 +220,8 @@ public class SemiColorLightPalette: IColorPalette
     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/Animations/SemiPopupAnimations.axaml

@@ -2,9 +2,9 @@
     x:Class="Semi.Avalonia.SemiPopupAnimations"
     xmlns="https://github.com/avaloniaui"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-    xmlns:semi="https://irihi.tech/semi">
+    xmlns:converters="clr-namespace:Semi.Avalonia.Converters">
     <Style Selector="Popup LayoutTransformControl#PART_LayoutTransform">
-        <Setter Property="RenderTransformOrigin" Value="{Binding $parent[Popup].Placement, Converter={semi:PlacementToRenderTransformOriginConverter}}" />
+        <Setter Property="RenderTransformOrigin" Value="{Binding $parent[Popup].Placement, Converter={x:Static converters:PlacementToRenderTransformOriginConverter.Instance}}" />
     </Style>
 
     <Style Selector="Popup[IsOpen=True] LayoutTransformControl#PART_LayoutTransform">

src/Semi.Avalonia/Controls/AutoCompleteBox.axaml

@@ -1,16 +1,14 @@
 <ResourceDictionary
     xmlns="https://github.com/avaloniaui"
-    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-    xmlns:iri="https://irihi.tech/shared">
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
     <Design.PreviewWith>
         <StackPanel Margin="20" Spacing="20">
             <TextBox Text="Hello" />
-            <AutoCompleteBox Width="100" PlaceholderText="Hello" />
+            <AutoCompleteBox Width="100" />
         </StackPanel>
     </Design.PreviewWith>
     <ControlTheme x:Key="{x:Type AutoCompleteBox}" TargetType="AutoCompleteBox">
         <Setter Property="VerticalAlignment" Value="Center" />
-        <Setter Property="PlaceholderForeground" Value="{DynamicResource TextBoxPlaceholderForeground}" />
         <Setter Property="MinHeight" Value="{DynamicResource AutoCompleteBoxDefaultHeight}" />
         <Setter Property="MaxDropDownHeight" Value="{DynamicResource AutoCompleteMaxDropdownHeight}" />
         <Setter Property="Template">
@@ -26,8 +24,7 @@
                             Theme="{DynamicResource NonErrorTextBox}"
                             InnerLeftContent="{TemplateBinding InnerLeftContent}"
                             InnerRightContent="{TemplateBinding InnerRightContent}"
-                            PlaceholderForeground="{TemplateBinding PlaceholderForeground}"
-                            PlaceholderText="{TemplateBinding PlaceholderText}" />
+                            Watermark="{TemplateBinding Watermark}" />
                         <Popup
                             Name="PART_Popup"
                             MaxHeight="{TemplateBinding MaxDropDownHeight}"
@@ -58,13 +55,45 @@
         </Setter>
 
         <Style Selector="^.Bordered">
-            <Style Selector="^ /template/ TextBox#PART_TextBox">
-                <Setter Property="MinHeight" Value="0" />
-                <Setter Property="iri:ClassHelper.Classes" Value="Bordered" />
-            </Style>
-            <Style Selector="^ /template/ ListBox#PART_SelectingItemsControl">
-                <Setter Property="ScrollViewer.IsScrollChainingEnabled" Value="False" />
-            </Style>
+            <Setter Property="Template">
+                <ControlTemplate TargetType="AutoCompleteBox">
+                    <Panel>
+                        <TextBox
+                            Name="PART_TextBox"
+                            VerticalAlignment="Stretch"
+                            MinHeight="0"
+                            Classes="Bordered"
+                            ClearSelectionOnLostFocus="{TemplateBinding ClearSelectionOnLostFocus}"
+                            DataValidationErrors.Errors="{TemplateBinding (DataValidationErrors.Errors)}"
+                            Watermark="{TemplateBinding Watermark}" />
+                        <Popup
+                            Name="PART_Popup"
+                            MaxHeight="{TemplateBinding MaxDropDownHeight}"
+                            InheritsTransform="True"
+                            IsLightDismissEnabled="True"
+                            PlacementTarget="{TemplateBinding}">
+                            <Border
+                                MinWidth="{Binding Bounds.Width, RelativeSource={RelativeSource TemplatedParent}}"
+                                Margin="{DynamicResource AutoCompleteBoxPopupMargin}"
+                                Padding="{DynamicResource AutoCompleteBoxPopupPadding}"
+                                HorizontalAlignment="Stretch"
+                                Background="{DynamicResource AutoCompleteBoxPopupBackground}"
+                                BorderBrush="{DynamicResource AutoCompleteBoxPopupBorderBrush}"
+                                BorderThickness="{DynamicResource AutoCompleteBoxPopupBorderThickness}"
+                                BoxShadow="{DynamicResource AutoCompleteBoxPopupBoxShadow}"
+                                CornerRadius="{DynamicResource AutoCompleteBoxPopupCornerRadius}">
+                                <ListBox
+                                    Name="PART_SelectingItemsControl"
+                                    Foreground="{TemplateBinding Foreground}"
+                                    ItemTemplate="{TemplateBinding ItemTemplate}"
+                                    ScrollViewer.HorizontalScrollBarVisibility="Auto"
+                                    ScrollViewer.VerticalScrollBarVisibility="Auto" 
+                                    ScrollViewer.IsScrollChainingEnabled="False" />
+                            </Border>
+                        </Popup>
+                    </Panel>
+                </ControlTemplate>
+            </Setter>
         </Style>
         <Style Selector="^.Large">
             <Setter Property="MinHeight" Value="{DynamicResource AutoCompleteBoxLargeHeight}" />

src/Semi.Avalonia/Controls/CalendarDatePicker.axaml

@@ -9,7 +9,6 @@
     <ControlTheme x:Key="{x:Type CalendarDatePicker}" TargetType="CalendarDatePicker">
         <Setter Property="Background" Value="{DynamicResource CalendarDatePickerBackground}" />
         <Setter Property="Foreground" Value="{DynamicResource CalendarDatePickerForeground}" />
-        <Setter Property="PlaceholderForeground" Value="{DynamicResource TextBoxPlaceholderForeground}" />
         <Setter Property="BorderBrush" Value="{DynamicResource CalendarDatePickerBorderBrush}" />
         <Setter Property="BorderThickness" Value="{DynamicResource CalendarDatePickerBorderThickness}" />
         <Setter Property="CornerRadius" Value="{DynamicResource CalendarDatePickerCornerRadius}" />
@@ -53,9 +52,8 @@
                                 CornerRadius="{TemplateBinding CornerRadius}"
                                 Foreground="{TemplateBinding Foreground}"
                                 Theme="{DynamicResource NonErrorTextBox}"
-                                UseFloatingPlaceholder="{TemplateBinding UseFloatingPlaceholder}"
-                                PlaceholderForeground="{TemplateBinding PlaceholderForeground}"
-                                PlaceholderText="{TemplateBinding PlaceholderText}">
+                                UseFloatingWatermark="{TemplateBinding UseFloatingWatermark}"
+                                Watermark="{TemplateBinding Watermark}">
                                 <TextBox.Styles>
                                     <Style Selector="TextBox#PART_TextBox:pointerover /template/ Border#PART_ContentPresenterBorder">
                                         <!--  By default the TextBox has its own focused state, override this to disable it here  -->

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

@@ -1,7 +1,7 @@
 <ResourceDictionary
     xmlns="https://github.com/avaloniaui"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-    xmlns:semi="https://irihi.tech/semi">
+    xmlns:converter="clr-namespace:Semi.Avalonia.Converters">
     <Design.PreviewWith>
         <StackPanel Spacing="20" Width="800" Height="800">
             <StackPanel.Styles>
@@ -197,8 +197,8 @@
                         HorizontalAlignment="Center"
                         VerticalAlignment="Center"
                         ItemContainerTheme="{DynamicResource CarouselIndicatorDotListBoxItem}"
-                        ItemsSource="{TemplateBinding ItemCount, Converter={x:Static semi:ItemConverter.ItemToObjectConverter}}"
-                        IsVisible="{TemplateBinding ItemCount, Converter={x:Static semi:ItemConverter.ItemVisibleConverter}}"
+                        ItemsSource="{TemplateBinding ItemCount, Converter={x:Static converter:ItemConverter.ItemToObjectConverter}}"
+                        IsVisible="{TemplateBinding ItemCount, Converter={x:Static converter:ItemConverter.ItemVisibleConverter}}"
                         SelectedIndex="{TemplateBinding SelectedIndex, Mode=TwoWay}">
                         <ListBox.ItemsPanel>
                             <ItemsPanelTemplate>
@@ -213,7 +213,7 @@
                         Theme="{DynamicResource CarouselButton}"
                         Margin="{DynamicResource CarouselButtonMargin}"
                         Foreground="{DynamicResource CarouselButtonForeground}"
-                        IsVisible="{TemplateBinding ItemCount, Converter={x:Static semi:ItemConverter.ItemVisibleConverter}}"
+                        IsVisible="{TemplateBinding ItemCount, Converter={x:Static converter:ItemConverter.ItemVisibleConverter}}"
                         Command="{Binding $parent[Carousel].Previous}" />
                     <Button
                         Grid.Row="0"
@@ -222,7 +222,7 @@
                         Theme="{DynamicResource CarouselButton}"
                         Margin="{DynamicResource CarouselButtonMargin}"
                         Foreground="{DynamicResource CarouselButtonForeground}"
-                        IsVisible="{TemplateBinding ItemCount, Converter={x:Static semi:ItemConverter.ItemVisibleConverter}}"
+                        IsVisible="{TemplateBinding ItemCount, Converter={x:Static converter:ItemConverter.ItemVisibleConverter}}"
                         Command="{Binding $parent[Carousel].Next}"
                         RenderTransform="rotate(180deg)" />
                 </Grid>

src/Semi.Avalonia/Controls/ComboBox.axaml

@@ -92,7 +92,7 @@
                             VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
                             Foreground="{TemplateBinding Foreground}"
                             Text="{TemplateBinding Text, Mode=TwoWay}"
-                            PlaceholderText="{TemplateBinding PlaceholderText}"
+                            Watermark="{TemplateBinding PlaceholderText}"
                             IsVisible="{TemplateBinding IsEditable}" />
 
                         <Button

src/Semi.Avalonia/Controls/CommandBar.axaml

@@ -1,369 +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}">
-                    <AppBarButton Label="New" Icon="{DynamicResource SemiIconPlus}" />
-                    <AppBarButton Label="Save" Icon="{DynamicResource SemiIconSave}" />
-                    <AppBarSeparator />
-                    <AppBarToggleButton Label="Bold" Icon="{DynamicResource SemiIconBold}" />
-                    <AppBarToggleButton Label="Italic" Icon="{DynamicResource SemiIconItalic}" />
-                    <AppBarToggleButton IsEnabled="False" IsChecked="True" Label="Underline" Icon="{DynamicResource SemiIconUnderline}" />
-                    <AppBarSeparator />
-                    <AppBarButton Label="Share" Icon="{DynamicResource SemiIconShare}" />
-                    <AppBarButton Label="Export" Icon="{DynamicResource SemiIconExport}" />
-                    <AppBarButton Label="Print" Icon="{DynamicResource SemiIconPrint}" />
-                    <AppBarSeparator />
-                    <AppBarButton Label="Delete" Icon="{DynamicResource SemiIconDelete}" />
-                </CommandBar>
-            </StackPanel>
-        </GroupBox>
-    </Design.PreviewWith>
-
-    <ControlTheme x:Key="AppBarButtonBaseTheme" 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 AppBarButtonPanelSpacing}"
-                        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"
-                            Foreground="{TemplateBinding Foreground}"
-                            FontSize="{DynamicResource AppBarButtonLabelFontSize}"
-                            TextTrimming="CharacterEllipsis" />
-                    </StackPanel>
-                </Border>
-            </ControlTemplate>
-        </Setter>
-
-        <Setter Property="Background" Value="{DynamicResource AppBarButtonBackground}" />
-        <Setter Property="Foreground" Value="{DynamicResource AppBarButtonForeground}" />
-        <Setter Property="BorderBrush" Value="Transparent" />
-        <Setter Property="BorderThickness" Value="0" />
-        <Setter Property="Padding" Value="{DynamicResource AppBarButtonPadding}" />
-        <Setter Property="Width" Value="{DynamicResource AppBarButtonWidth}" />
-        <Setter Property="MinHeight" Value="{DynamicResource AppBarButtonMinHeight}" />
-
-        <Setter Property="CornerRadius" Value="{DynamicResource AppBarButtonCornerRadius}" />
-        <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 AppBarButtonPointeroverBackground}" />
-        </Style>
-
-        <Style Selector="^:pressed /template/ Border#PART_Border">
-            <Setter Property="Background" Value="{DynamicResource AppBarButtonPressedBackground}" />
-        </Style>
-
-        <Style Selector="^:disabled">
-            <Style Selector="^ /template/ ContentPresenter#PART_IconPresenter">
-                <Setter Property="Foreground" Value="{DynamicResource AppBarButtonDisabledForeground}" />
-            </Style>
-            <Style Selector="^ /template/ TextBlock#PART_Label">
-                <Setter Property="Foreground" Value="{DynamicResource AppBarButtonDisabledForeground}" />
-            </Style>
-        </Style>
-    </ControlTheme>
-
-    <!--  AppBarButton  -->
-    <ControlTheme
-        x:Key="{x:Type AppBarButton}"
-        BasedOn="{StaticResource AppBarButtonBaseTheme}"
-        TargetType="AppBarButton">
-
-        <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 AppBarButtonCompactWidth}" />
-            <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 AppBarButtonCompactWidth}" />
-            <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 AppBarButtonCompactWidth}" />
-            <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 AppBarButtonOverflowMinHeight}" />
-            <Setter Property="Padding" Value="{DynamicResource AppBarButtonOverflowPadding}" />
-            <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>
-
-    <!--  AppBarToggleButton  -->
-    <ControlTheme
-        x:Key="{x:Type AppBarToggleButton}"
-        BasedOn="{StaticResource AppBarButtonBaseTheme}"
-        TargetType="AppBarToggleButton">
-
-        <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 AppBarToggleButtonCheckedBackground}" />
-            </Style>
-            <Style Selector="^ /template/ ContentPresenter#PART_IconPresenter">
-                <Setter Property="Foreground" Value="{DynamicResource AppBarToggleButtonCheckedForeground}" />
-            </Style>
-            <Style Selector="^:pointerover /template/ Border#PART_Border">
-                <Setter Property="Background" Value="{DynamicResource AppBarToggleButtonCheckedPointeroverBackground}" />
-            </Style>
-            <Style Selector="^:pressed /template/ Border#PART_Border">
-                <Setter Property="Background" Value="{DynamicResource AppBarToggleButtonCheckedPressedBackground}" />
-            </Style>
-            <Style Selector="^:disabled /template/ ContentPresenter#PART_IconPresenter">
-                <Setter Property="Foreground" Value="{DynamicResource AppBarToggleButtonCheckedDisabledForeground}" />
-            </Style>
-        </Style>
-
-        <!--  IsCompact: hide label, use compact width  -->
-        <Style Selector="^[IsCompact=True]">
-            <Setter Property="Width" Value="{DynamicResource AppBarButtonCompactWidth}" />
-            <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 AppBarButtonCompactWidth}" />
-            <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 AppBarButtonCompactWidth}" />
-            <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 AppBarButtonOverflowMinHeight}" />
-            <Setter Property="Padding" Value="{DynamicResource AppBarButtonOverflowPadding}" />
-            <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>
-
-    <!--  AppBarSeparator  -->
-    <ControlTheme x:Key="{x:Type AppBarSeparator}" TargetType="AppBarSeparator">
-        <Setter Property="Background" Value="{DynamicResource AppBarSeparatorBackground}" />
-        <Setter Property="Width" Value="{DynamicResource AppBarSeparatorWidth}" />
-        <Setter Property="MinHeight" Value="{DynamicResource AppBarSeparatorMinHeight}" />
-        <Setter Property="Margin" Value="{DynamicResource AppBarSeparatorMargin}" />
-        <Setter Property="Template">
-            <ControlTemplate TargetType="AppBarSeparator">
-                <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 AppBarSeparatorOverflowHeight}" />
-            <Setter Property="MinHeight" Value="0" />
-            <Setter Property="Margin" Value="{DynamicResource AppBarSeparatorOverflowMargin}" />
-        </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>
-                            <!--  Overflow button (docked right)  -->
-                            <AppBarButton
-                                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
-                                    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,43 +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="HorizontalContentAlignment" Value="Stretch" />
-        <Setter Property="VerticalContentAlignment" Value="Stretch" />
-        <Setter Property="Template">
-            <ControlTemplate TargetType="ContentPage">
-                <Grid RowDefinitions="Auto,*,Auto" Background="{TemplateBinding Background}">
-                    <ContentPresenter
-                        Name="PART_TopCommandBar"
-                        Grid.Row="0"
-                        Content="{TemplateBinding TopCommandBar}" />
-                    <ContentPresenter
-                        Name="PART_ContentPresenter"
-                        Grid.Row="1"
-                        Content="{TemplateBinding Content}"
-                        ContentTemplate="{TemplateBinding ContentTemplate}"
-                        HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
-                        VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}" />
-                    <ContentPresenter
-                        Name="PART_BottomCommandBar"
-                        Grid.Row="2"
-                        Content="{TemplateBinding BottomCommandBar}" />
-                </Grid>
-            </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,143 +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="DrawerBackground" Value="{DynamicResource DrawerPageDrawerBackground}" />
-        <Setter Property="DrawerLength" Value="{DynamicResource DrawerPageDrawerLength}" />
-        <Setter Property="CompactDrawerLength" Value="{DynamicResource DrawerPageCompactDrawerLength}" />
-        <Setter Property="HorizontalContentAlignment" Value="Stretch" />
-        <Setter Property="VerticalContentAlignment" Value="Stretch" />
-        <Setter Property="Template">
-            <ControlTemplate TargetType="DrawerPage">
-                <Grid RowDefinitions="Auto,*" Background="{TemplateBinding Background}">
-
-                    <!--  Top bar with pane toggle button  -->
-                    <Border
-                        Name="PART_TopBar"
-                        Grid.Row="0"
-                        MinHeight="{DynamicResource DrawerPageTopBarMinHeight}"
-                        Padding="{DynamicResource DrawerPageTopBarPadding}"
-                        Background="{DynamicResource DrawerPageTopBarBackground}"
-                        BorderBrush="{DynamicResource DrawerPageTopBarBorderBrush}"
-                        BorderThickness="{DynamicResource DrawerPageTopBarBorderThickness}">
-                        <Grid ColumnDefinitions="Auto,Auto,*">
-                            <!--  Pane toggle button (hamburger)  -->
-                            <ToggleButton
-                                Name="PART_PaneButton"
-                                Grid.Column="0"
-                                Width="{DynamicResource DrawerPagePaneButtonSize}"
-                                Height="{DynamicResource DrawerPagePaneButtonSize}"
-                                Margin="{DynamicResource DrawerPagePaneButtonMargin}"
-                                VerticalAlignment="Center"
-                                Background="{DynamicResource DrawerPagePaneButtonBackground}"
-                                Foreground="{DynamicResource DrawerPagePaneButtonForeground}"
-                                IsChecked="{TemplateBinding IsOpen, Mode=TwoWay}">
-                                <PathIcon
-                                    Width="16"
-                                    Height="16"
-                                    Data="{DynamicResource DrawerPageMenuGlyph}"
-                                    Foreground="{DynamicResource DrawerPagePaneButtonForeground}" />
-                            </ToggleButton>
-
-                            <!--  Drawer icon (shown in top bar)  -->
-                            <ContentPresenter
-                                Name="PART_PaneIconPresenter"
-                                Grid.Column="1"
-                                VerticalAlignment="Center"
-                                Content="{TemplateBinding DrawerIcon}" />
-                        </Grid>
-                    </Border>
-
-                    <!--  Main area: SplitView + Backdrop  -->
-                    <Panel Grid.Row="1">
-                        <SplitView
-                            Name="PART_SplitView"
-                            CompactPaneLength="{TemplateBinding CompactDrawerLength}"
-                            DisplayMode="{TemplateBinding DisplayMode}"
-                            IsPaneOpen="{TemplateBinding IsOpen, Mode=TwoWay}"
-                            OpenPaneLength="{TemplateBinding DrawerLength}"
-                            PaneBackground="{TemplateBinding DrawerBackground}">
-                            <SplitView.Pane>
-                                <DockPanel>
-                                    <!--  Drawer header  -->
-                                    <ContentPresenter
-                                        Name="PART_DrawerHeader"
-                                        DockPanel.Dock="Top"
-                                        Background="{TemplateBinding DrawerHeaderBackground}"
-                                        Content="{TemplateBinding DrawerHeader}" />
-
-                                    <!--  Drawer footer  -->
-                                    <ContentPresenter
-                                        Name="PART_DrawerFooter"
-                                        DockPanel.Dock="Bottom"
-                                        Background="{TemplateBinding DrawerFooterBackground}"
-                                        Content="{TemplateBinding DrawerFooter}" />
-
-                                    <!--  Compact pane icon (compact mode)  -->
-                                    <ContentPresenter
-                                        Name="PART_CompactPaneIconPresenter"
-                                        DockPanel.Dock="Top"
-                                        IsVisible="False"
-                                        Content="{TemplateBinding DrawerIcon}" />
-
-                                    <!--  Bottom pane icon  -->
-                                    <ContentPresenter
-                                        Name="PART_BottomPaneIconPresenter"
-                                        DockPanel.Dock="Bottom"
-                                        IsVisible="False" />
-
-                                    <!--  Drawer main content  -->
-                                    <ContentPresenter
-                                        Name="PART_DrawerPresenter"
-                                        Content="{TemplateBinding Drawer}"
-                                        ContentTemplate="{TemplateBinding DrawerTemplate}" />
-                                </DockPanel>
-                            </SplitView.Pane>
-
-                            <!--  Main page content  -->
-                            <ContentPresenter
-                                Name="PART_ContentPresenter"
-                                Content="{TemplateBinding Content}"
-                                ContentTemplate="{TemplateBinding ContentTemplate}"
-                                HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
-                                VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}" />
-                        </SplitView>
-
-                        <!--  Backdrop overlay (shown in overlay/flyout modes)  -->
-                        <Border
-                            Name="PART_Backdrop"
-                            Background="{TemplateBinding BackdropBrush}"
-                            IsHitTestVisible="False"
-                            IsVisible="False" />
-
-                        <!--  Compact pane toggle  -->
-                        <ToggleButton
-                            Name="PART_CompactPaneToggle"
-                            IsVisible="False" />
-                    </Panel>
-                </Grid>
-            </ControlTemplate>
-        </Setter>
-
-        <!--  Pseudo-class: right-side drawer  -->
-        <Style Selector="^:placement-right /template/ SplitView#PART_SplitView">
-            <Setter Property="PanePlacement" Value="Right" />
-        </Style>
-
-        <!--  Pseudo-class: top drawer  -->
-        <Style Selector="^:placement-top /template/ SplitView#PART_SplitView">
-            <Setter Property="PanePlacement" Value="Top" />
-        </Style>
-
-        <!--  Pseudo-class: bottom drawer  -->
-        <Style Selector="^:placement-bottom /template/ SplitView#PART_SplitView">
-            <Setter Property="PanePlacement" Value="Bottom" />
-        </Style>
-    </ControlTheme>
-</ResourceDictionary>

src/Semi.Avalonia/Controls/GroupBox.axaml

@@ -1,5 +0,0 @@
-<ResourceDictionary
-    xmlns="https://github.com/avaloniaui"
-    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
-    <StaticResource x:Key="{x:Type GroupBox}" ResourceKey="GroupBox"/>
-</ResourceDictionary>

src/Semi.Avalonia/Controls/HeaderedContentControl.axaml

@@ -1,7 +1,7 @@
 <ResourceDictionary
     xmlns="https://github.com/avaloniaui"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-    xmlns:iri="https://irihi.tech/shared">
+    xmlns:converters="clr-namespace:Avalonia.Controls.Converters;assembly=Avalonia.Controls">
     <Design.PreviewWith>
         <StackPanel Spacing="20">
             <HeaderedContentControl
@@ -23,6 +23,7 @@
             </HeaderedContentControl>
         </StackPanel>
     </Design.PreviewWith>
+    <converters:MarginMultiplierConverter x:Key="SeparatorBorderMultiplier" Top="True" Indent="1" />
 
     <ControlTheme x:Key="{x:Type HeaderedContentControl}" TargetType="HeaderedContentControl">
         <Setter Property="Padding" Value="3" />
@@ -96,7 +97,7 @@
                             Name="SeparatorBorder"
                             Grid.Row="1"
                             BorderBrush="{TemplateBinding BorderBrush}"
-                            BorderThickness="{TemplateBinding BorderThickness, Converter={iri:ThicknessMixerConverter Top}}">
+                            BorderThickness="{TemplateBinding BorderThickness, Converter={StaticResource SeparatorBorderMultiplier}}">
                             <Border.IsVisible>
                                 <MultiBinding Converter="{x:Static BoolConverters.And}">
                                     <TemplateBinding Property="Header" Converter="{x:Static ObjectConverters.IsNotNull}" />

src/Semi.Avalonia/Controls/ManagedFileChooser.axaml

@@ -1,9 +1,9 @@
 <ResourceDictionary
     xmlns="https://github.com/avaloniaui"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-    xmlns:iri="https://irihi.tech/shared"
-    xmlns:dialogs="using:Avalonia.Dialogs"
-    xmlns:internal="using:Avalonia.Dialogs.Internal"
+    xmlns:converters="using:Semi.Avalonia.Converters"
+    xmlns:dialogs="clr-namespace:Avalonia.Dialogs;assembly=Avalonia.Dialogs"
+    xmlns:internal="clr-namespace:Avalonia.Dialogs.Internal;assembly=Avalonia.Dialogs"
     xmlns:cvt="using:Avalonia.Controls.Converters">
     <Design.PreviewWith>
         <Border
@@ -14,11 +14,11 @@
         </Border>
     </Design.PreviewWith>
 
-    <iri:ResourceConverter x:Key="Icons">
+    <converters:KeyToPathConverter x:Key="Icons">
         <StreamGeometry x:Key="Icon_Folder">M19,20H4C2.89,20 2,19.1 2,18V6C2,4.89 2.89,4 4,4H10L12,6H19A2,2 0 0,1 21,8H21L4,8V18L6.14,10H23.21L20.93,18.5C20.7,19.37 19.92,20 19,20Z</StreamGeometry>
         <StreamGeometry x:Key="Icon_File">M13,9H18.5L13,3.5V9M6,2H14L20,8V20A2,2 0 0,1 18,22H6C4.89,22 4,21.1 4,20V4C4,2.89 4.89,2 6,2M15,18V16H6V18H15M18,14V12H6V14H18Z</StreamGeometry>
         <StreamGeometry x:Key="Icon_Volume">M6,2H18A2,2 0 0,1 20,4V20A2,2 0 0,1 18,22H6A2,2 0 0,1 4,20V4A2,2 0 0,1 6,2M12,4A6,6 0 0,0 6,10C6,13.31 8.69,16 12.1,16L11.22,13.77C10.95,13.29 11.11,12.68 11.59,12.4L12.45,11.9C12.93,11.63 13.54,11.79 13.82,12.27L15.74,14.69C17.12,13.59 18,11.9 18,10A6,6 0 0,0 12,4M12,9A1,1 0 0,1 13,10A1,1 0 0,1 12,11A1,1 0 0,1 11,10A1,1 0 0,1 12,9M7,18A1,1 0 0,0 6,19A1,1 0 0,0 7,20A1,1 0 0,0 8,19A1,1 0 0,0 7,18M12.09,13.27L14.58,19.58L17.17,18.08L12.95,12.77L12.09,13.27Z</StreamGeometry>
-    </iri:ResourceConverter>
+    </converters:KeyToPathConverter>
     <ControlTheme x:Key="{x:Type dialogs:ManagedFileChooser}" TargetType="dialogs:ManagedFileChooser">
         <Setter Property="Template">
             <ControlTemplate x:DataType="internal:ManagedFileChooserViewModel" TargetType="dialogs:ManagedFileChooser">
@@ -77,7 +77,7 @@
                             <TextBox
                                 IsVisible="{Binding !SelectingFolder}"
                                 Text="{Binding FileName}"
-                                PlaceholderText="{DynamicResource STRING_CHOOSER_FILE_NAME}" />
+                                Watermark="{DynamicResource STRING_CHOOSER_FILE_NAME}" />
                         </DockPanel>
                         <CheckBox
                             VerticalAlignment="Center"

src/Semi.Avalonia/Controls/NavigationPage.axaml

@@ -1,94 +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="{DynamicResource NavigationPageBackground}" />
-        <Setter Property="Foreground" Value="{DynamicResource NavigationPageForeground}" />
-        <Setter Property="BarHeight" Value="{DynamicResource NavigationPageBarMinHeight}" />
-        <Setter Property="Template">
-            <ControlTemplate TargetType="NavigationPage">
-                <Grid RowDefinitions="Auto,*,Auto" Background="{TemplateBinding Background}">
-                    <!--  Top command bar  -->
-                    <ContentPresenter
-                        Name="PART_TopCommandBar"
-                        Grid.Row="0" />
-
-                    <!--  Content host (pages + navigation bar)  -->
-                    <Panel Name="PART_ContentHost" Grid.Row="1">
-                        <!--  Previous page (back animation target)  -->
-                        <ContentPresenter Name="PART_PageBackPresenter" />
-
-                        <!--  Current page  -->
-                        <ContentPresenter Name="PART_PagePresenter" />
-
-                        <!--  Modal back page  -->
-                        <ContentPresenter Name="PART_ModalBackPresenter" />
-
-                        <!--  Modal page  -->
-                        <ContentPresenter Name="PART_ModalPresenter" />
-
-                        <!--  Navigation bar (overlaid on content by default)  -->
-                        <Border
-                            Name="PART_NavigationBar"
-                            MinHeight="{TemplateBinding BarHeight}"
-                            Padding="{DynamicResource NavigationPageBarPadding}"
-                            VerticalAlignment="Top"
-                            Background="{DynamicResource NavigationPageBarBackground}"
-                            BorderBrush="{DynamicResource NavigationPageBarBorderBrush}"
-                            BorderThickness="{DynamicResource NavigationPageBarBorderThickness}">
-                            <Grid ColumnDefinitions="Auto,*,Auto">
-                                <Button
-                                    Name="PART_BackButton"
-                                    Grid.Column="0"
-                                    MinHeight="{DynamicResource NavigationPageBarMinHeight}"
-                                    MinWidth="{DynamicResource NavigationPageBarMinHeight}"
-                                    Padding="8"
-                                    VerticalAlignment="Center"
-                                    IsVisible="{TemplateBinding IsBackButtonEffectivelyVisible}"
-                                    Background="{DynamicResource NavigationPageBackButtonBackground}"
-                                    Theme="{StaticResource BorderlessButton}">
-                                    <Panel Background="Transparent">
-                                        <PathIcon
-                                            Theme="{StaticResource InnerPathIcon}"
-                                            Classes="Large"
-                                            Data="{DynamicResource NavigationPageBackButtonGlyph}"
-                                            Foreground="{DynamicResource NavigationPageBackButtonForeground}"
-                                            IsVisible="{Binding CurrentPage?.(NavigationPage.BackButtonContent), RelativeSource={RelativeSource TemplatedParent}, Converter={x:Static ObjectConverters.IsNull}, FallbackValue=False}" />
-                                        <ContentPresenter
-                                            Content="{Binding CurrentPage?.(NavigationPage.BackButtonContent), RelativeSource={RelativeSource TemplatedParent}, FallbackValue={x:Null}}"
-                                            IsVisible="{Binding CurrentPage?.(NavigationPage.BackButtonContent), RelativeSource={RelativeSource TemplatedParent}, Converter={x:Static ObjectConverters.IsNotNull}, FallbackValue=False}"
-                                            VerticalAlignment="Center"
-                                            HorizontalAlignment="Center" />
-                                    </Panel>
-                                </Button>
-                                <ContentPresenter
-                                    Grid.Column="1"
-                                    HorizontalAlignment="Center"
-                                    VerticalAlignment="Center" />
-                            </Grid>
-                        </Border>
-                    </Panel>
-
-                    <!--  Bottom command bar  -->
-                    <ContentPresenter
-                        Name="PART_BottomCommandBar"
-                        Grid.Row="2" />
-                </Grid>
-            </ControlTemplate>
-        </Setter>
-
-        <!--  Navigation bar is inset (content flows under the bar)  -->
-        <Style Selector="^:nav-bar-inset /template/ Border#PART_NavigationBar">
-            <Setter Property="BorderThickness" Value="0" />
-        </Style>
-
-        <!--  Compact navigation bar  -->
-        <Style Selector="^:nav-bar-compact /template/ Border#PART_NavigationBar">
-            <Setter Property="MinHeight" Value="0" />
-        </Style>
-    </ControlTheme>
-</ResourceDictionary>

src/Semi.Avalonia/Controls/NumericUpDown.axaml

@@ -6,7 +6,6 @@
         <Setter Property="VerticalContentAlignment" Value="Center" />
         <Setter Property="CornerRadius" Value="{DynamicResource NumericUpDownCornerRadius}" />
         <Setter Property="MinHeight" Value="{DynamicResource NumericUpDownDefaultHeight}" />
-        <Setter Property="PlaceholderForeground" Value="{DynamicResource TextBoxPlaceholderForeground}" />
         <Setter Property="Template">
             <ControlTemplate TargetType="NumericUpDown">
                 <DataValidationErrors>
@@ -39,8 +38,7 @@
                             Theme="{DynamicResource NonErrorTextBox}"
                             InnerLeftContent="{TemplateBinding InnerLeftContent}"
                             InnerRightContent="{TemplateBinding InnerRightContent}"
-                            PlaceholderForeground="{TemplateBinding PlaceholderForeground}"
-                            PlaceholderText="{TemplateBinding PlaceholderText}" />
+                            Watermark="{TemplateBinding Watermark}" />
                     </ButtonSpinner>
                 </DataValidationErrors>
             </ControlTemplate>

src/Semi.Avalonia/Controls/ProgressBar.axaml

@@ -1,8 +1,8 @@
 <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:converters="using:Avalonia.Controls.Converters"
+    xmlns:semiConverters="clr-namespace:Semi.Avalonia.Converters">
     <Design.PreviewWith>
         <StackPanel Margin="20" Spacing="20">
             <ProgressBar
@@ -338,6 +338,8 @@
         </Style>
     </ControlTheme>
 
+    <semiConverters:PositionToAngleConverter x:Key="AngleConverter" />
+
     <ControlTheme x:Key="ProgressRing" TargetType="ProgressBar">
         <Setter Property="Foreground" Value="{DynamicResource ProgressBarIndicatorBrush}" />
         <Setter Property="Background" Value="{DynamicResource ProgressBarBackground}" />
@@ -363,7 +365,8 @@
                         StrokeJoin="Round"
                         StrokeLineCap="Round"
                         StrokeThickness="{Binding BorderThickness.Left, RelativeSource={RelativeSource TemplatedParent}}"
-                        SweepAngle="{TemplateBinding Percentage,Converter={semi:PositionToAngleConverter}}" />
+                        SweepAngle="{TemplateBinding Percentage,
+                                                     Converter={StaticResource AngleConverter}}" />
                     <Arc
                         Name="IndeterminateIndicator"
                         Opacity="0"
@@ -373,7 +376,8 @@
                         StrokeJoin="Round"
                         StrokeLineCap="Round"
                         StrokeThickness="{Binding BorderThickness.Left, RelativeSource={RelativeSource TemplatedParent}}"
-                        SweepAngle="{TemplateBinding Percentage,Converter={semi:PositionToAngleConverter}}" />
+                        SweepAngle="{TemplateBinding Percentage,
+                                                     Converter={StaticResource AngleConverter}}" />
                     <TextBlock
                         Name="PART_ProgressText"
                         HorizontalAlignment="Center"
@@ -439,4 +443,4 @@
             </Style.Animations>
         </Style>
     </ControlTheme>
-</ResourceDictionary>
+</ResourceDictionary>

src/Semi.Avalonia/Controls/ScrollViewer.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"
+    xmlns:converters="using:Avalonia.Controls.Converters">
     <Design.PreviewWith>
         <StackPanel>
             <ScrollBar Width="200" Orientation="Horizontal" />

src/Semi.Avalonia/Controls/SplitButton.axaml

@@ -1,13 +1,10 @@
 <ResourceDictionary
     xmlns="https://github.com/avaloniaui"
-    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-    xmlns:iri="https://irihi.tech/shared">
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
     <Design.PreviewWith>
         <StackPanel Width="500" Height="500" Margin="20" Spacing="8">
             <SplitButton
-                Theme="{DynamicResource OutlineSplitButton}"
-                Classes="Danger"
-                CornerRadius="12"
+                Theme="{DynamicResource SolidSplitButton}"
                 Content="Hello" />
             <ToggleSplitButton
                 IsChecked="True"
@@ -76,40 +73,47 @@
         <Setter Property="Cursor" Value="Hand" />
         <Setter Property="Template">
             <ControlTemplate TargetType="SplitButton">
-                <Grid 
-                    ColumnDefinitions="*,Auto"
-                    ColumnSpacing="{DynamicResource SplitButtonSeparatorWidth}">
-                    <Button
-                        Name="PART_PrimaryButton"
-                        Grid.Column="0"
-                        Padding="{TemplateBinding Padding}"
-                        HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
-                        VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
-                        BorderThickness="{TemplateBinding BorderThickness}"
-                        Command="{TemplateBinding Command}"
-                        CommandParameter="{TemplateBinding CommandParameter}"
-                        Content="{TemplateBinding Content}"
-                        ContentTemplate="{TemplateBinding ContentTemplate}"
-                        CornerRadius="{TemplateBinding CornerRadius, Converter={iri:CornerRadiusMixerConverter Left}}"
-                        FontFamily="{TemplateBinding FontFamily}"
-                        FontSize="{TemplateBinding FontSize}"
-                        FontWeight="{TemplateBinding FontWeight}"
-                        Theme="{DynamicResource SemiSplitButtonElement}" />
-                    <Button
-                        Name="PART_SecondaryButton"
-                        Grid.Column="1"
-                        Padding="0"
-                        MinHeight="{TemplateBinding MinHeight}"
-                        MinWidth="{Binding $self.MinHeight}"
-                        BorderThickness="{TemplateBinding BorderThickness}"
-                        CornerRadius="{TemplateBinding CornerRadius, Converter={iri:CornerRadiusMixerConverter Right}}"
-                        Theme="{DynamicResource SemiSplitButtonElement}">
-                        <PathIcon
-                            Theme="{DynamicResource InnerPathIcon}"
-                            Data="{DynamicResource SplitButtonIconGlyph}"
-                            Foreground="{Binding $parent[Button].Foreground}" />
-                    </Button>
-                </Grid>
+                <Border
+                    BackgroundSizing="OuterBorderEdge"
+                    ClipToBounds="True"
+                    CornerRadius="{TemplateBinding CornerRadius}">
+                    <DockPanel>
+                        <Button
+                            Name="PART_SecondaryButton"
+                            Padding="4,0"
+                            BorderThickness="{TemplateBinding BorderThickness}"
+                            CornerRadius="0"
+                            DockPanel.Dock="Right"
+                            Theme="{DynamicResource SemiSplitButtonElement}">
+                            <PathIcon
+                                Theme="{DynamicResource InnerPathIcon}"
+                                Data="{DynamicResource SplitButtonIconGlyph}"
+                                Foreground="{Binding $parent[Button].Foreground}" />
+                        </Button>
+                        <Rectangle
+                            Name="SeparatorBorder"
+                            Width="{DynamicResource SplitButtonSeparatorWidth}"
+                            VerticalAlignment="Stretch"
+                            DockPanel.Dock="Right"
+                            Fill="Transparent"
+                            StrokeThickness="0" />
+                        <Button
+                            Name="PART_PrimaryButton"
+                            Padding="{TemplateBinding Padding}"
+                            HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
+                            VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
+                            BorderThickness="{TemplateBinding BorderThickness}"
+                            Command="{TemplateBinding Command}"
+                            CommandParameter="{TemplateBinding CommandParameter}"
+                            Content="{TemplateBinding Content}"
+                            ContentTemplate="{TemplateBinding ContentTemplate}"
+                            CornerRadius="0"
+                            FontFamily="{TemplateBinding FontFamily}"
+                            FontSize="{TemplateBinding FontSize}"
+                            FontWeight="{TemplateBinding FontWeight}"
+                            Theme="{DynamicResource SemiSplitButtonElement}" />
+                    </DockPanel>
+                </Border>
             </ControlTemplate>
         </Setter>
 

src/Semi.Avalonia/Controls/SplitView.axaml

@@ -1,7 +1,4 @@
-<ResourceDictionary 
-    xmlns="https://github.com/avaloniaui" 
-    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-    x:CompileBindings="True">
+<ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
     <ControlTheme x:Key="{x:Type SplitView}" TargetType="SplitView">
         <Setter Property="OpenPaneLength" Value="{DynamicResource SplitViewOpenPaneThemeLength}" />
         <Setter Property="CompactPaneLength" Value="{DynamicResource SplitViewCompactPaneThemeLength}" />
@@ -52,7 +49,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">
@@ -75,7 +72,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>

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/TabbedPage.axaml

@@ -1,41 +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}"
-                    ItemsSource="{TemplateBinding Pages}" />
-            </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}"
-                    ItemsSource="{TemplateBinding Pages}" />
-            </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}"
-                    ItemsSource="{TemplateBinding Pages}" />
-            </ControlTemplate>
-        </Setter>
-    </ControlTheme>
-</ResourceDictionary>

src/Semi.Avalonia/Controls/TextBox.axaml

@@ -24,7 +24,6 @@
 
     <ControlTheme x:Key="{x:Type TextBox}" TargetType="TextBox">
         <Setter Property="Foreground" Value="{DynamicResource TextBoxForeground}" />
-        <Setter Property="PlaceholderForeground" Value="{DynamicResource TextBoxPlaceholderForeground}" />
         <Setter Property="Background" Value="{DynamicResource TextBoxDefaultBackground}" />
         <Setter Property="BorderBrush" Value="{DynamicResource TextBoxDefaultBorderBrush}" />
         <Setter Property="SelectionBrush" Value="{DynamicResource TextBoxSelectionBackground}" />
@@ -60,6 +59,7 @@
                                 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)}"
@@ -67,11 +67,11 @@
                                 VerticalScrollBarVisibility="{TemplateBinding (ScrollViewer.VerticalScrollBarVisibility)}">
                                 <Panel>
                                     <TextBlock
-                                        Name="PART_Placeholder"
+                                        Name="PART_Watermark"
                                         HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                         VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
-                                        Foreground="{TemplateBinding PlaceholderForeground}"
-                                        Text="{TemplateBinding PlaceholderText}"
+                                        Opacity="0.5"
+                                        Text="{TemplateBinding Watermark}"
                                         TextAlignment="{TemplateBinding TextAlignment}"
                                         TextWrapping="{TemplateBinding TextWrapping}">
                                         <TextBlock.IsVisible>
@@ -258,7 +258,6 @@
 
     <ControlTheme x:Key="NonErrorTextBox" TargetType="TextBox">
         <Setter Property="Foreground" Value="{DynamicResource TextBoxForeground}" />
-        <Setter Property="PlaceholderForeground" Value="{DynamicResource TextBoxPlaceholderForeground}" />
         <Setter Property="Background" Value="{DynamicResource TextBoxDefaultBackground}" />
         <Setter Property="BorderBrush" Value="{DynamicResource TextBoxDefaultBorderBrush}" />
         <Setter Property="SelectionBrush" Value="{DynamicResource TextBoxSelectionBackground}" />
@@ -294,6 +293,7 @@
                                 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)}"
@@ -301,12 +301,11 @@
                                 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}"
+                                        Text="{TemplateBinding Watermark}"
                                         TextAlignment="{TemplateBinding TextAlignment}"
                                         TextWrapping="{TemplateBinding TextWrapping}">
                                         <TextBlock.IsVisible>
@@ -493,7 +492,6 @@
 
     <ControlTheme x:Key="LooklessTextBox" TargetType="TextBox">
         <Setter Property="Foreground" Value="{DynamicResource TextBoxForeground}" />
-        <Setter Property="PlaceholderForeground" Value="{DynamicResource TextBoxPlaceholderForeground}" />
         <Setter Property="SelectionBrush" Value="{DynamicResource TextBoxSelectionBackground}" />
         <Setter Property="SelectionForegroundBrush" Value="{DynamicResource TextBoxSelectionForeground}" />
         <Setter Property="CaretBrush" Value="{DynamicResource TextBoxTextCaretBrush}" />
@@ -516,6 +514,7 @@
                             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)}"
@@ -523,12 +522,11 @@
                             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}"
+                                    Text="{TemplateBinding Watermark}"
                                     TextAlignment="{TemplateBinding TextAlignment}"
                                     TextWrapping="{TemplateBinding TextWrapping}">
                                     <TextBlock.IsVisible>

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/TreeView.axaml

@@ -1,7 +1,7 @@
 <ResourceDictionary
     xmlns="https://github.com/avaloniaui"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-    xmlns:converters="using:Avalonia.Controls.Converters">
+    xmlns:converters="clr-namespace:Semi.Avalonia.Converters">
 
     <Design.PreviewWith>
         <StackPanel

src/Semi.Avalonia/Controls/Window.axaml

@@ -15,6 +15,9 @@
                     <Border Background="{TemplateBinding Background}" IsHitTestVisible="False" />
                     <Panel Margin="{TemplateBinding WindowDecorationMargin}" Background="Transparent" />
                     <VisualLayerManager>
+                        <VisualLayerManager.ChromeOverlayLayer>
+                            <TitleBar />
+                        </VisualLayerManager.ChromeOverlayLayer>
                         <ContentPresenter
                             Name="PART_ContentPresenter"
                             Margin="{TemplateBinding Padding}"

src/Semi.Avalonia/Controls/WindowDrawnDecorations.axaml

@@ -1,203 +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="Cursor" Value="Hand" />
-        <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>
-    </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>
-                            <Border
-                                Name="PART_WindowBorder"
-                                Margin="{TemplateBinding ShadowThickness}"
-                                Background="{DynamicResource WindowBackground}"
-                                BorderBrush="{DynamicResource WindowBorderBrush}"
-                                BorderThickness="1"
-                                BoxShadow="{DynamicResource WindowBorderShadow}" />
-                            <!-- 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"
-                                    FontSize="12"
-                                    Text="{TemplateBinding Title}" />
-                            </Panel>
-                            <StackPanel
-                                Name="PART_OverlayPanel"
-                                Height="{TemplateBinding TitleBarHeight}"
-                                HorizontalAlignment="Right"
-                                VerticalAlignment="Top"
-                                IsVisible="{TemplateBinding HasTitleBar}"
-                                Orientation="Horizontal"
-                                Spacing="2"
-                                TextElement.FontSize="10">
-                                <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 TitleBarHeight}"
-                            Background="{DynamicResource TitleBarBackground}"
-                            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"
-                                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>
-
-        <!--  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,25 +6,22 @@
         <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="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" />
         <ResourceInclude Source="GridSplitter.axaml" />
-        <ResourceInclude Source="GroupBox.axaml" />
         <ResourceInclude Source="HeaderedContentControl.axaml" />
         <ResourceInclude Source="HyperlinkButton.axaml" />
         <ResourceInclude Source="ItemsControl.axaml" />
@@ -35,7 +32,6 @@
         <ResourceInclude Source="MenuFlyoutPresenter.axaml" />
         <ResourceInclude Source="NotificationCard.axaml" />
         <ResourceInclude Source="NumericUpDown.axaml" />
-        <ResourceInclude Source="NavigationPage.axaml" />
         <ResourceInclude Source="PathIcon.axaml" />
         <ResourceInclude Source="Popup.axaml" />
         <ResourceInclude Source="ProgressBar.axaml" />
@@ -50,18 +46,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>

src/Semi.Avalonia/Converters/KeyToPathConverter.cs

@@ -0,0 +1,26 @@
+using System;
+using System.Collections.Generic;
+using System.Globalization;
+using Avalonia;
+using Avalonia.Data.Converters;
+using Avalonia.Metadata;
+
+namespace Semi.Avalonia.Converters;
+
+public class KeyToPathConverter: IValueConverter
+{
+    [Content]
+    public IDictionary<string, object?> Resources { get; } = new Dictionary<string, object?>();
+    
+    public object? Convert(object? value, Type targetType, object? parameter, CultureInfo culture)
+    {
+        if(value is string s && Resources.TryGetValue(s, out var v))
+            return v;
+        return AvaloniaProperty.UnsetValue;
+    }
+
+    public object? ConvertBack(object? value, Type targetType, object? parameter, CultureInfo culture)
+    {
+        throw new NotImplementedException();
+    }
+}

src/Semi.Avalonia/Converters/PlacementToRenderTransformOriginConverter.cs

@@ -2,36 +2,56 @@ using System;
 using System.Globalization;
 using Avalonia;
 using Avalonia.Controls;
-using Irihi.Avalonia.Shared.Converters;
+using Avalonia.Data.Converters;
 
 namespace Semi.Avalonia.Converters;
 
-public class PlacementToRenderTransformOriginConverter : MarkupValueConverter
+public class PlacementToRenderTransformOriginConverter: IValueConverter
 {
-    public override object? Convert(object? value, Type targetType, object? parameter, CultureInfo culture)
+    public static PlacementToRenderTransformOriginConverter Instance { get; } = new PlacementToRenderTransformOriginConverter();
+    public object? Convert(object? value, Type targetType, object? parameter, CultureInfo culture)
     {
         if (value is not PlacementMode p)
         {
             return new RelativePoint(0.5, 0.5, RelativeUnit.Relative);
         }
-
-        return p switch
+        switch (p)
         {
-            PlacementMode.Bottom => new RelativePoint(0.5, 0.0, RelativeUnit.Relative),
-            PlacementMode.Left => new RelativePoint(1.0, 0.5, RelativeUnit.Relative),
-            PlacementMode.Right => new RelativePoint(0.0, 0.5, RelativeUnit.Relative),
-            PlacementMode.Top => new RelativePoint(0.5, 1.0, RelativeUnit.Relative),
-            PlacementMode.Pointer => new RelativePoint(0.0, 0.0, RelativeUnit.Relative),
-            PlacementMode.Center or PlacementMode.AnchorAndGravity => new RelativePoint(0.5, 0.5, RelativeUnit.Relative),
-            PlacementMode.BottomEdgeAlignedLeft => new RelativePoint(0.0, 0.0, RelativeUnit.Relative),
-            PlacementMode.BottomEdgeAlignedRight => new RelativePoint(1.0, 0.0, RelativeUnit.Relative),
-            PlacementMode.LeftEdgeAlignedTop => new RelativePoint(1.0, 1.0, RelativeUnit.Relative),
-            PlacementMode.LeftEdgeAlignedBottom => new RelativePoint(1.0, 0.0, RelativeUnit.Relative),
-            PlacementMode.RightEdgeAlignedTop => new RelativePoint(0.0, 1.0, RelativeUnit.Relative),
-            PlacementMode.RightEdgeAlignedBottom => new RelativePoint(0.0, 0.0, RelativeUnit.Relative),
-            PlacementMode.TopEdgeAlignedLeft => new RelativePoint(0.0, 1.0, RelativeUnit.Relative),
-            PlacementMode.TopEdgeAlignedRight => new RelativePoint(1.0, 1.0, RelativeUnit.Relative),
-            _ => new RelativePoint(0.5, 0.5, RelativeUnit.Relative)
-        };
+            case  PlacementMode.Bottom:
+                return new RelativePoint(0.5, 0.0, RelativeUnit.Relative);
+            case PlacementMode.Left:
+                return new RelativePoint(1.0, 0.5, RelativeUnit.Relative);
+            case PlacementMode.Right:
+                return new RelativePoint(0.0, 0.5, RelativeUnit.Relative);
+            case PlacementMode.Top:
+                return new RelativePoint(0.5, 1.0, RelativeUnit.Relative);
+            case PlacementMode.Pointer:
+                return new RelativePoint(0.0, 0.0, RelativeUnit.Relative);
+            case PlacementMode.Center:
+            case PlacementMode.AnchorAndGravity:
+                return new RelativePoint(0.5, 0.5, RelativeUnit.Relative);
+            case PlacementMode.BottomEdgeAlignedLeft:
+                return new RelativePoint(0.0, 0.0, RelativeUnit.Relative);
+            case PlacementMode.BottomEdgeAlignedRight:
+                return new RelativePoint(1.0, 0.0, RelativeUnit.Relative);
+            case PlacementMode.LeftEdgeAlignedTop:
+                return new RelativePoint(1.0, 1.0, RelativeUnit.Relative);
+            case PlacementMode.LeftEdgeAlignedBottom:
+                return new RelativePoint(1.0, 0.0, RelativeUnit.Relative);
+            case PlacementMode.RightEdgeAlignedTop:
+                return new RelativePoint(0.0, 1.0, RelativeUnit.Relative);
+            case PlacementMode.RightEdgeAlignedBottom:
+                return new RelativePoint(0.0, 0.0, RelativeUnit.Relative);
+            case PlacementMode.TopEdgeAlignedLeft:
+                return new RelativePoint(0.0, 1.0, RelativeUnit.Relative);
+            case PlacementMode.TopEdgeAlignedRight:
+                return new RelativePoint(1.0, 1.0, RelativeUnit.Relative);
+        }
+        return new RelativePoint(0.5, 0.5, RelativeUnit.Relative);
+    }
+
+    public object? ConvertBack(object? value, Type targetType, object? parameter, CultureInfo culture)
+    {
+        throw new NotImplementedException();
     }
 }

src/Semi.Avalonia/Converters/PositionToAngleConverter.cs

@@ -1,18 +1,27 @@
 using System;
 using System.Globalization;
-using Irihi.Avalonia.Shared.Converters;
+using Avalonia.Data.Converters;
 
 namespace Semi.Avalonia.Converters;
 
-public class PositionToAngleConverter : MarkupValueConverter
+public class PositionToAngleConverter: 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 double d ? d * 3.6 : 0;
+        if (value is double d)
+        {
+            return d * 3.6;
+        }
+
+        return 0;
     }
 
-    public override object? ConvertBack(object? value, Type targetType, object? parameter, CultureInfo culture)
+    public object? ConvertBack(object? value, Type targetType, object? parameter, CultureInfo culture)
     {
-        return value is double d ? d / 3.6 : 0;
+        if (value is double d)
+        {
+            return d / 3.6;
+        }
+        return 0;
     }
 }

src/Semi.Avalonia/Converters/TreeViewItemIndentConverter.cs

@@ -0,0 +1,22 @@
+using System;
+using System.Collections.Generic;
+using System.Globalization;
+using Avalonia;
+using Avalonia.Data.Converters;
+
+namespace Semi.Avalonia.Converters;
+
+public class TreeViewItemIndentConverter : IMultiValueConverter
+{
+    public static readonly TreeViewItemIndentConverter Instance = new();
+
+    public object? Convert(IList<object?> values, Type targetType, object? parameter, CultureInfo culture)
+    {
+        if (values.Count > 1 && values[0] is int level && values[1] is double indent)
+        {
+            return new Thickness(indent * level, 0, 0, 0);
+        }
+
+        return new Thickness(0);
+    }
+}

src/Semi.Avalonia/Properties/AssemblyInfo.cs

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

src/Semi.Avalonia/Semi.Avalonia.csproj

@@ -1,15 +1,14 @@
 <Project Sdk="Microsoft.NET.Sdk">
 
     <PropertyGroup>
-        <TargetFrameworks>net8.0;net10.0</TargetFrameworks>
-        <Version>12.0.0-preview2</Version>
-        <PackageReleaseNotes>Update to Semi.Avalonia 12.0.0-preview2</PackageReleaseNotes>
+        <TargetFrameworks>netstandard2.0;net6.0;net8.0</TargetFrameworks>
+        <Version>11.3.7.3</Version>
+        <PackageReleaseNotes>Update to Semi.Avalonia 11.3.7.3</PackageReleaseNotes>
         <Title>Semi.Avalonia</Title>
     </PropertyGroup>
 
     <ItemGroup>
         <PackageReference Include="Avalonia"/>
-        <PackageReference Include="Irihi.Avalonia.Shared"/>
         <None Include="README.md" Pack="true" PackagePath="\"/>
     </ItemGroup>
 

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

@@ -1,7 +1,4 @@
 <ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
-    <StaticResource x:Key="WindowBorderShadow" ResourceKey="SemiShadowElevated" />
-    <StaticResource x:Key="TitleBarBackground" ResourceKey="SemiColorBackground0" />
-
     <StaticResource x:Key="CaptionButtonPointeroverBackground" ResourceKey="SemiColorFill1" />
     <StaticResource x:Key="CaptionButtonPressedBackground" ResourceKey="SemiColorFill2" />
     <StaticResource x:Key="CaptionButtonCloseForeground" ResourceKey="SemiColorWhite" />

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

@@ -1,24 +0,0 @@
-<ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
-    <!--  AppBarButton / AppBarToggleButton  -->
-    <SolidColorBrush x:Key="AppBarButtonBackground" Color="Transparent" />
-    <StaticResource x:Key="AppBarButtonForeground" ResourceKey="SemiColorText0" />
-    <StaticResource x:Key="AppBarButtonPointeroverBackground" ResourceKey="SemiColorFill0" />
-    <StaticResource x:Key="AppBarButtonPressedBackground" ResourceKey="SemiColorFill1" />
-    <StaticResource x:Key="AppBarButtonDisabledForeground" ResourceKey="SemiColorDisabledText" />
-    <!--  AppBarToggleButton checked state  -->
-    <StaticResource x:Key="AppBarToggleButtonCheckedForeground" ResourceKey="SemiColorPrimary" />
-    <StaticResource x:Key="AppBarToggleButtonCheckedBackground" ResourceKey="SemiColorPrimaryLight" />
-    <StaticResource x:Key="AppBarToggleButtonCheckedPointeroverBackground" ResourceKey="SemiColorPrimaryLightPointerover" />
-    <StaticResource x:Key="AppBarToggleButtonCheckedPressedBackground" ResourceKey="SemiColorPrimaryLightActive" />
-    <StaticResource x:Key="AppBarToggleButtonCheckedDisabledForeground" ResourceKey="SemiColorPrimaryDisabled" />
-    <!--  AppBarSeparator  -->
-    <StaticResource x:Key="AppBarSeparatorBackground" ResourceKey="SemiColorBorder" />
-    <!--  CommandBar  -->
-    <StaticResource x:Key="CommandBarBackground" ResourceKey="SemiColorBackground1" />
-    <StaticResource x:Key="CommandBarForeground" ResourceKey="SemiColorText0" />
-    <StaticResource x:Key="CommandBarBorderBrush" ResourceKey="SemiColorBorder" />
-    <!--  CommandBar overflow popup  -->
-    <StaticResource x:Key="CommandBarOverflowBackground" ResourceKey="SemiColorBackground3" />
-    <StaticResource x:Key="CommandBarOverflowBorderBrush" ResourceKey="SemiColorBorder" />
-    <StaticResource x:Key="CommandBarOverflowBoxShadow" ResourceKey="SemiShadowElevated" />
-</ResourceDictionary>

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

@@ -1,5 +0,0 @@
-<ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
-    <!--  ContentPage  -->
-    <StaticResource x:Key="ContentPageBackground" ResourceKey="SemiColorBackground0" />
-    <StaticResource x:Key="ContentPageForeground" ResourceKey="SemiColorText0" />
-</ResourceDictionary>

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

@@ -1,13 +0,0 @@
-<ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
-    <!--  DrawerPage background  -->
-    <StaticResource x:Key="DrawerPageBackground" ResourceKey="SemiColorBackground0" />
-    <StaticResource x:Key="DrawerPageForeground" ResourceKey="SemiColorText0" />
-    <!--  Top bar  -->
-    <StaticResource x:Key="DrawerPageTopBarBackground" ResourceKey="SemiColorBackground1" />
-    <StaticResource x:Key="DrawerPageTopBarBorderBrush" ResourceKey="SemiColorBorder" />
-    <!--  Drawer pane  -->
-    <StaticResource x:Key="DrawerPageDrawerBackground" ResourceKey="SemiColorNavBackground" />
-    <!--  Pane button  -->
-    <SolidColorBrush x:Key="DrawerPagePaneButtonBackground" Color="Transparent" />
-    <StaticResource x:Key="DrawerPagePaneButtonForeground" ResourceKey="SemiColorText0" />
-</ResourceDictionary>

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

@@ -1,14 +0,0 @@
-<ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
-    <!--  NavigationPage  -->
-    <StaticResource x:Key="NavigationPageBackground" ResourceKey="SemiColorBackground0" />
-    <StaticResource x:Key="NavigationPageForeground" ResourceKey="SemiColorText0" />
-    <!--  Navigation bar  -->
-    <StaticResource x:Key="NavigationPageBarBackground" ResourceKey="SemiColorBackground1" />
-    <StaticResource x:Key="NavigationPageBarForeground" ResourceKey="SemiColorText0" />
-    <StaticResource x:Key="NavigationPageBarBorderBrush" ResourceKey="SemiColorBorder" />
-    <!--  Back button  -->
-    <SolidColorBrush x:Key="NavigationPageBackButtonBackground" Color="Transparent" />
-    <StaticResource x:Key="NavigationPageBackButtonForeground" ResourceKey="SemiColorText0" />
-    <StaticResource x:Key="NavigationPageBackButtonPointeroverBackground" ResourceKey="SemiColorFill0" />
-    <StaticResource x:Key="NavigationPageBackButtonPressedBackground" ResourceKey="SemiColorFill1" />
-</ResourceDictionary>

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

@@ -1,2 +0,0 @@
-<ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
-</ResourceDictionary>

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

@@ -7,7 +7,6 @@
     <StaticResource x:Key="TextBoxPressedBackground" ResourceKey="SemiColorFill2" />
     <StaticResource x:Key="TextBoxFocusBorderBrush" ResourceKey="SemiColorPrimary" />
     <StaticResource x:Key="TextBoxForeground" ResourceKey="SemiColorText0" />
-    <StaticResource x:Key="TextBoxPlaceholderForeground" ResourceKey="SemiColorText2" />
     <StaticResource x:Key="TextBoxInnerForeground" ResourceKey="SemiColorText2" />
     <StaticResource x:Key="TextBoxDisabledBackground" ResourceKey="SemiColorDisabledFill" />
     <StaticResource x:Key="TextBoxDisabledForeground" ResourceKey="SemiColorDisabledText" />

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

@@ -4,19 +4,17 @@
         <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="CheckBox.axaml" />
         <ResourceInclude Source="ComboBox.axaml" />
-        <ResourceInclude Source="CommandBar.axaml" />
         <ResourceInclude Source="DataValidationErrors.axaml" />
         <ResourceInclude Source="DatePicker.axaml" />
         <ResourceInclude Source="DateTimePickerShared.axaml" />
         <ResourceInclude Source="DropDownButton.axaml" />
-        <ResourceInclude Source="DrawerPage.axaml" />
         <ResourceInclude Source="Expander.axaml" />
         <ResourceInclude Source="Flyout.axaml" />
         <ResourceInclude Source="GridSplitter.axaml" />
@@ -27,7 +25,6 @@
         <ResourceInclude Source="ManagedFileChooser.axaml" />
         <ResourceInclude Source="Menu.axaml" />
         <ResourceInclude Source="NotificationCard.axaml" />
-        <ResourceInclude Source="NavigationPage.axaml" />
         <ResourceInclude Source="NumericUpDown.axaml" />
         <ResourceInclude Source="ProgressBar.axaml" />
         <ResourceInclude Source="RadioButton.axaml" />
@@ -38,7 +35,6 @@
         <ResourceInclude Source="SplitView.axaml" />
         <ResourceInclude Source="TabControl.axaml" />
         <ResourceInclude Source="TabItem.axaml" />
-        <ResourceInclude Source="TabbedPage.axaml" />
         <ResourceInclude Source="TextBlock.axaml" />
         <ResourceInclude Source="TextBox.axaml" />
         <ResourceInclude Source="TimePicker.axaml" />
@@ -47,6 +43,5 @@
         <ResourceInclude Source="Tooltip.axaml" />
         <ResourceInclude Source="TreeView.axaml" />
         <ResourceInclude Source="Window.axaml" />
-        <ResourceInclude Source="WindowDrawnDecorations.axaml" />
     </ResourceDictionary.MergedDictionaries>
 </ResourceDictionary>

src/Semi.Avalonia/Themes/HighContrast/CaptionButtons.axaml

@@ -1,6 +1,4 @@
 <ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
-    <StaticResource x:Key="TitleBarBackground" ResourceKey="SemiColorWindow" />
-
     <StaticResource x:Key="CaptionButtonPointeroverBackground" ResourceKey="SemiColorHotlight" />
     <StaticResource x:Key="CaptionButtonPressedBackground" ResourceKey="SemiColorHotlight" />
     <StaticResource x:Key="CaptionButtonCloseForeground" ResourceKey="SemiColorWhite" />

src/Semi.Avalonia/Themes/HighContrast/CommandBar.axaml

@@ -1,23 +0,0 @@
-<ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
-    <!--  AppBarButton / AppBarToggleButton  -->
-    <SolidColorBrush x:Key="AppBarButtonBackground" Color="Transparent" />
-    <StaticResource x:Key="AppBarButtonForeground" ResourceKey="SemiColorWindowText" />
-    <StaticResource x:Key="AppBarButtonPointeroverBackground" ResourceKey="SemiColorHighlight" />
-    <StaticResource x:Key="AppBarButtonPressedBackground" ResourceKey="SemiColorHighlight" />
-    <StaticResource x:Key="AppBarButtonDisabledForeground" ResourceKey="SemiColorGrayText" />
-    <!--  AppBarToggleButton checked state  -->
-    <StaticResource x:Key="AppBarToggleButtonCheckedForeground" ResourceKey="SemiColorHighlightText" />
-    <StaticResource x:Key="AppBarToggleButtonCheckedBackground" ResourceKey="SemiColorHighlight" />
-    <StaticResource x:Key="AppBarToggleButtonCheckedPointeroverBackground" ResourceKey="SemiColorButtonText" />
-    <StaticResource x:Key="AppBarToggleButtonCheckedPressedBackground" ResourceKey="SemiColorButtonFace" />
-    <StaticResource x:Key="AppBarToggleButtonCheckedDisabledForeground" ResourceKey="SemiColorGrayText" />
-    <!--  AppBarSeparator  -->
-    <StaticResource x:Key="AppBarSeparatorBackground" ResourceKey="SemiColorWindowText" />
-    <!--  CommandBar  -->
-    <StaticResource x:Key="CommandBarBackground" ResourceKey="SemiColorWindow" />
-    <StaticResource x:Key="CommandBarForeground" ResourceKey="SemiColorWindowText" />
-    <StaticResource x:Key="CommandBarBorderBrush" ResourceKey="SemiColorWindowText" />
-    <!--  CommandBar overflow popup  -->
-    <StaticResource x:Key="CommandBarOverflowBackground" ResourceKey="SemiColorWindow" />
-    <StaticResource x:Key="CommandBarOverflowBorderBrush" ResourceKey="SemiColorWindowText" />
-</ResourceDictionary>

src/Semi.Avalonia/Themes/HighContrast/ContentPage.axaml

@@ -1,5 +0,0 @@
-<ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
-    <!--  ContentPage  -->
-    <StaticResource x:Key="ContentPageBackground" ResourceKey="SemiColorWindow" />
-    <StaticResource x:Key="ContentPageForeground" ResourceKey="SemiColorWindowText" />
-</ResourceDictionary>

src/Semi.Avalonia/Themes/HighContrast/DrawerPage.axaml

@@ -1,13 +0,0 @@
-<ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
-    <!--  DrawerPage background  -->
-    <StaticResource x:Key="DrawerPageBackground" ResourceKey="SemiColorWindow" />
-    <StaticResource x:Key="DrawerPageForeground" ResourceKey="SemiColorWindowText" />
-    <!--  Top bar  -->
-    <StaticResource x:Key="DrawerPageTopBarBackground" ResourceKey="SemiColorWindow" />
-    <StaticResource x:Key="DrawerPageTopBarBorderBrush" ResourceKey="SemiColorWindowText" />
-    <!--  Drawer pane  -->
-    <StaticResource x:Key="DrawerPageDrawerBackground" ResourceKey="SemiColorWindow" />
-    <!--  Pane button  -->
-    <SolidColorBrush x:Key="DrawerPagePaneButtonBackground" Color="Transparent" />
-    <StaticResource x:Key="DrawerPagePaneButtonForeground" ResourceKey="SemiColorWindowText" />
-</ResourceDictionary>

src/Semi.Avalonia/Themes/HighContrast/NavigationPage.axaml

@@ -1,14 +0,0 @@
-<ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
-    <!--  NavigationPage  -->
-    <StaticResource x:Key="NavigationPageBackground" ResourceKey="SemiColorWindow" />
-    <StaticResource x:Key="NavigationPageForeground" ResourceKey="SemiColorWindowText" />
-    <!--  Navigation bar  -->
-    <StaticResource x:Key="NavigationPageBarBackground" ResourceKey="SemiColorWindow" />
-    <StaticResource x:Key="NavigationPageBarForeground" ResourceKey="SemiColorWindowText" />
-    <StaticResource x:Key="NavigationPageBarBorderBrush" ResourceKey="SemiColorWindowText" />
-    <!--  Back button  -->
-    <SolidColorBrush x:Key="NavigationPageBackButtonBackground" Color="Transparent" />
-    <StaticResource x:Key="NavigationPageBackButtonForeground" ResourceKey="SemiColorWindowText" />
-    <StaticResource x:Key="NavigationPageBackButtonPointeroverBackground" ResourceKey="SemiColorHighlight" />
-    <StaticResource x:Key="NavigationPageBackButtonPressedBackground" ResourceKey="SemiColorHighlightText" />
-</ResourceDictionary>