misc: bump version.

ready for Avalonia 11.3.7

demo/Directory.Build.props

@@ -1,7 +1,7 @@
 <Project>
     <PropertyGroup>
-        <AvaloniaVersion>12.0.999-cibuild0058575-alpha</AvaloniaVersion>
-        <DataGridVersion>11.3.0</DataGridVersion>
+        <AvaloniaVersion>11.3.7</AvaloniaVersion>
+        <DataGridVersion>11.3.7</DataGridVersion>
         <CommunityToolkitVersion>8.4.0</CommunityToolkitVersion>
     </PropertyGroup>
 </Project>

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

@@ -14,9 +14,7 @@
     </PropertyGroup>
 
     <ItemGroup>
-        <AndroidResource Include="Icon.png">
-            <Link>Resources\drawable\Icon.png</Link>
-        </AndroidResource>
+        <AndroidResource Include="Icon.png" Link="Resources\drawable\Icon.png"/>
     </ItemGroup>
 
     <ItemGroup>

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

@@ -4,6 +4,7 @@
         <TargetFramework>net8.0</TargetFramework>
         <Nullable>enable</Nullable>
         <BuiltInComInteropSupport>true</BuiltInComInteropSupport>
+        <ApplicationIcon>..\Semi.Avalonia.Demo\Assets\irihi.ico</ApplicationIcon>
         <!-- Uncomment below to enable Native AOT compilation-->
         <!--<PublishAot>true</PublishAot>-->
     </PropertyGroup>

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

@@ -4,6 +4,7 @@
         <TargetFramework>net8.0</TargetFramework>
         <Nullable>enable</Nullable>
         <BuiltInComInteropSupport>true</BuiltInComInteropSupport>
+        <ApplicationIcon>..\Semi.Avalonia.Demo\Assets\irihi.ico</ApplicationIcon>
         <!-- Uncomment below to enable Native AOT compilation-->
         <!--<PublishAot>true</PublishAot>-->
     </PropertyGroup>

demo/Semi.Avalonia.Demo/App.axaml

@@ -1,17 +1,17 @@
 <Application
+    Name="Semi Avalonia Demo"
     x:Class="Semi.Avalonia.Demo.App"
     xmlns="https://github.com/avaloniaui"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-    x:CompileBindings="True"
-    x:DataType="viewModels:ApplicationViewModel"
     xmlns:semi="https://irihi.tech/semi"
-    xmlns:viewModels="clr-namespace:Semi.Avalonia.Demo.ViewModels">
+    xmlns:vm="clr-namespace:Semi.Avalonia.Demo.ViewModels"
+    x:DataType="vm:ApplicationViewModel">
     <Application.Styles>
         <semi:SemiTheme Locale="zh-CN" />
         <semi:SemiPopupAnimations />
         <semi:ColorPickerSemiTheme />
-        <!-- <semi:DataGridSemiTheme /> -->
-        <!-- <semi:TreeDataGridSemiTheme /> -->
+        <semi:DataGridSemiTheme />
+        <semi:TreeDataGridSemiTheme />
     </Application.Styles>
     <Application.Resources>
         <ResourceDictionary>
@@ -20,12 +20,30 @@
             </ResourceDictionary.MergedDictionaries>
         </ResourceDictionary>
     </Application.Resources>
+    <NativeMenu.Menu>
+        <NativeMenu>
+            <NativeMenuItem
+                Header="About Us"
+                Command="{Binding JumpToCommand}"
+                CommandParameter="{Binding $self.Header}" />
+        </NativeMenu>
+    </NativeMenu.Menu>
     <TrayIcon.Icons>
         <TrayIcons>
-            <TrayIcon Icon="/Assets/irihi.ico" MacOSProperties.IsTemplateIcon="true" ToolTipText="Semi Avalonia Demo">
+            <TrayIcon
+                Icon="{OnPlatform Default=/Assets/irihi.ico, macOS=/Assets/irihi2.ico}"
+                MacOSProperties.IsTemplateIcon="true"
+                Command="{Binding ActivateCommand}"
+                ToolTipText="Semi Avalonia Demo">
                 <TrayIcon.Menu>
                     <NativeMenu>
-                        <NativeMenuItem Header="Exit" Command="{Binding ExitCommand}" />
+                        <NativeMenuItem
+                            Header="About Us"
+                            Command="{Binding JumpToCommand}"
+                            CommandParameter="{Binding $self.Header}" />
+                        <NativeMenuItem
+                            Header="Exit"
+                            Command="{Binding ExitCommand}" />
                     </NativeMenu>
                 </TrayIcon.Menu>
             </TrayIcon>

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

@@ -8,7 +8,6 @@
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
     xmlns:vm="clr-namespace:Semi.Avalonia.Demo.ViewModels"
     x:DataType="vm:AboutUsViewModel"
-    x:CompileBindings="True"
     d:DesignHeight="450"
     d:DesignWidth="800"
     mc:Ignorable="d">

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

@@ -7,7 +7,6 @@
     xmlns:vm="clr-namespace:Semi.Avalonia.Demo.ViewModels"
     d:DesignHeight="450"
     d:DesignWidth="800"
-    x:CompileBindings="False"
     x:DataType="vm:AutoCompleteBoxDemoViewModel"
     mc:Ignorable="d">
     <Design.DataContext>
@@ -30,40 +29,40 @@
 
         <AutoCompleteBox
             Watermark="Please select a State"
-            ValueMemberBinding="{Binding Name}" />
+            ValueMemberBinding="{Binding Name,DataType=vm:StateData}" />
         <AutoCompleteBox
             Classes="Large"
-            ValueMemberBinding="{ReflectionBinding Name}" />
+            ValueMemberBinding="{Binding Name,DataType=vm:StateData}" />
         <AutoCompleteBox
             Classes="Small"
-            ValueMemberBinding="{ReflectionBinding Name}" />
+            ValueMemberBinding="{Binding Name,DataType=vm:StateData}" />
         <AutoCompleteBox
             Classes="Bordered"
-            ValueMemberBinding="{ReflectionBinding Name}" />
+            ValueMemberBinding="{Binding Name,DataType=vm:StateData}" />
         <AutoCompleteBox
             IsEnabled="False"
             Watermark="Disabled"
-            ValueMemberBinding="{ReflectionBinding Name}" />
+            ValueMemberBinding="{Binding Name,DataType=vm:StateData}" />
         <AutoCompleteBox
             InnerLeftContent="https://"
             InnerRightContent=".com"
-            ValueMemberBinding="{ReflectionBinding Name}" />
+            ValueMemberBinding="{Binding Name,DataType=vm:StateData}" />
 
         <StackPanel Orientation="Horizontal">
             <AutoCompleteBox
                 Width="100"
                 Classes="Large"
                 Watermark="Large"
-                ValueMemberBinding="{ReflectionBinding Name}" />
+                ValueMemberBinding="{Binding Name,DataType=vm:StateData}" />
             <AutoCompleteBox
                 Width="100"
                 Watermark="Default"
-                ValueMemberBinding="{ReflectionBinding Name}" />
+                ValueMemberBinding="{Binding Name,DataType=vm:StateData}" />
             <AutoCompleteBox
                 Width="100"
                 Classes="Small"
                 Watermark="Small"
-                ValueMemberBinding="{ReflectionBinding Name}" />
+                ValueMemberBinding="{Binding Name,DataType=vm:StateData}" />
         </StackPanel>
 
         <StackPanel Orientation="Horizontal">
@@ -71,17 +70,17 @@
                 Width="100"
                 IsEnabled="False"
                 Watermark="Disabled"
-                ValueMemberBinding="{ReflectionBinding Name}" />
+                ValueMemberBinding="{Binding Name,DataType=vm:StateData}" />
             <AutoCompleteBox
                 Width="100"
                 Classes="Bordered"
                 Watermark="Bordered"
-                ValueMemberBinding="{ReflectionBinding Name}" />
+                ValueMemberBinding="{Binding Name,DataType=vm:StateData}" />
             <AutoCompleteBox
                 Width="100"
                 Classes="Bordered"
                 IsEnabled="False"
-                ValueMemberBinding="{ReflectionBinding Name}" />
+                ValueMemberBinding="{Binding Name,DataType=vm:StateData}" />
         </StackPanel>
 
     </StackPanel>

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

@@ -8,6 +8,10 @@
     d:DesignWidth="800"
     mc:Ignorable="d">
     <StackPanel HorizontalAlignment="Left" Spacing="20">
+        <StackPanel Orientation="Horizontal">
+            <ToggleSwitch Name="showSpinCheck" IsChecked="True" Content="Show Button Spinner" />
+            <ToggleSwitch Name="allowSpinCheck" IsChecked="True" Content="Allow Spin" />
+        </StackPanel>
         <ButtonSpinner
             Height="30"
             AllowSpin="{Binding #allowSpinCheck.IsChecked}"

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

@@ -7,7 +7,8 @@
     xmlns:vm="clr-namespace:Semi.Avalonia.Demo.ViewModels"
     d:DesignHeight="800"
     d:DesignWidth="800"
-    mc:Ignorable="d">
+    mc:Ignorable="d"
+    x:DataType="vm:ComboBoxDemoViewModel">
     <Design.DataContext>
         <vm:ComboBoxDemoViewModel />
     </Design.DataContext>

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

@@ -1,22 +0,0 @@
-<UserControl xmlns="https://github.com/avaloniaui"
-             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
-             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
-             mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="1450"
-             x:Class="Semi.Avalonia.Demo.Pages.GroupBoxDemo">
-    <ScrollViewer>
-        <StackPanel HorizontalAlignment="Left" Spacing="20">
-            <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/GroupBoxDemo.axaml.cs

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

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

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

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/NotificationDemo.axaml.cs

@@ -27,7 +27,8 @@ public partial class NotificationDemo : UserControl
         if (sender is RadioButton b && b.Content is string s)
         {
             Enum.TryParse<NotificationPosition>(s, out var t);
-            _manager.Position = t;
+            if (_manager is not null)
+                _manager.Position = t;
         }
     }
 

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/Overview.axaml.cs

@@ -9,7 +9,7 @@ public partial class Overview : UserControl
         InitializeComponent();
     }
 
-    public string MainInstall { get; set; } = "dotnet add package Semi.Avalonia --version 11.2.1.9";
+    public string MainInstall { get; set; } = "dotnet add package Semi.Avalonia";
 
     public string MainStyle { get; set; } =
         """
@@ -18,7 +18,7 @@ public partial class Overview : UserControl
         </Application.Styles>
         """;
 
-    public string ColorPickerInstall { get; set; } = "dotnet add package Semi.Avalonia.ColorPicker --version 11.2.1.9";
+    public string ColorPickerInstall { get; set; } = "dotnet add package Semi.Avalonia.ColorPicker";
 
     public string ColorPickerStyle { get; set; } =
         """
@@ -27,7 +27,7 @@ public partial class Overview : UserControl
         </Application.Styles>
         """;
 
-    public string DataGridInstall { get; set; } = "dotnet add package Semi.Avalonia.DataGrid --version 11.2.1.9";
+    public string DataGridInstall { get; set; } = "dotnet add package Semi.Avalonia.DataGrid";
 
     public string DataGridStyle { get; set; } =
         """
@@ -36,7 +36,7 @@ public partial class Overview : UserControl
         </Application.Styles>
         """;
 
-    public string TreeDataGridInstall { get; set; } = "dotnet add package Semi.Avalonia.TreeDataGrid --version 11.0.10.4";
+    public string TreeDataGridInstall { get; set; } = "dotnet add package Semi.Avalonia.TreeDataGrid";
 
     public string TreeDataGridStyle { get; set; } =
         """
@@ -45,7 +45,7 @@ public partial class Overview : UserControl
         </Application.Styles>
         """;
 
-    public string DockInstall { get; set; } = "dotnet add package Semi.Avalonia.Dock --version 11.3.0";
+    public string DockInstall { get; set; } = "dotnet add package Semi.Avalonia.Dock";
 
     public string DockStyle { get; set; } =
         """
@@ -54,7 +54,7 @@ public partial class Overview : UserControl
         </Application.Styles>
         """;
 
-    public string TabaloniaInstall { get; set; } = "dotnet add package Semi.Avalonia.Tabalonia --version 11.0.0-beta1";
+    public string TabaloniaInstall { get; set; } = "dotnet add package Semi.Avalonia.Tabalonia";
 
     public string TabaloniaStyle { get; set; } =
         """
@@ -63,7 +63,7 @@ public partial class Overview : UserControl
         </Application.Styles>
         """;
 
-    public string AvaloniaEditInstall { get; set; } = "dotnet add package Semi.Avalonia.AvaloniaEdit --version 11.2.0";
+    public string AvaloniaEditInstall { get; set; } = "dotnet add package Semi.Avalonia.AvaloniaEdit";
 
     public string AvaloniaEditStyle { get; set; } =
         """

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

@@ -8,7 +8,6 @@
     xmlns:viewModels="clr-namespace:Semi.Avalonia.Demo.ViewModels"
     d:DesignHeight="450"
     d:DesignWidth="800"
-    x:CompileBindings="True"
     x:DataType="viewModels:PaletteDemoViewModel"
     mc:Ignorable="d">
     <Design.DataContext>

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

@@ -8,7 +8,6 @@
     d:DesignHeight="450"
     d:DesignWidth="800"
     x:DataType="vm:RefreshContainerDemoViewModel"
-    x:CompileBindings="True"
     mc:Ignorable="d">
     <DockPanel HorizontalAlignment="Stretch" VerticalAlignment="Top">
         <Label DockPanel.Dock="Top">A control that supports pull to refresh</Label>

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

@@ -7,276 +7,187 @@
     xmlns:vm="clr-namespace:Semi.Avalonia.Demo.ViewModels"
     d:DesignHeight="1000"
     d:DesignWidth="800"
+    x:DataType="vm:SplitViewDemoViewModel"
     mc:Ignorable="d">
     <Design.DataContext>
         <vm:SplitViewDemoViewModel />
     </Design.DataContext>
     <Border>
         <Grid ColumnDefinitions="*,400">
-            <Border Grid.Column="1" VerticalAlignment="Top" Margin="10 0 0 0">
-                <Grid RowDefinitions="*, *, *, *, *, *" ColumnDefinitions="Auto, *">
+            <Border
+                Grid.Column="1"
+                Margin="10,0,0,0"
+                VerticalAlignment="Top">
+                <Grid ColumnDefinitions="Auto, *" RowDefinitions="*, *, *, *, *, *">
                     <Label
-                        Grid.Row="0" Grid.Column="0"
+                        Grid.Row="0"
+                        Grid.Column="0"
                         VerticalAlignment="Center"
                         Content="IsPaneOpen" />
                     <ToggleSwitch
-                        Grid.Row="0" Grid.Column="1"
-                        Name="PaneOpenButton" />
+                        Name="PaneOpenButton"
+                        Grid.Row="0"
+                        Grid.Column="1" />
 
                     <Label
-                        Grid.Row="1" Grid.Column="0"
+                        Grid.Row="1"
+                        Grid.Column="0"
                         VerticalAlignment="Center"
                         Content="UseLightDismissOverlayMode" />
                     <ToggleSwitch
-                        Grid.Row="1" Grid.Column="1"
-                        Name="UseLightDismissOverlayModeButton" />
+                        Name="UseLightDismissOverlayModeButton"
+                        Grid.Row="1"
+                        Grid.Column="1" />
 
                     <Label
-                        Grid.Row="2" Grid.Column="0"
+                        Grid.Row="2"
+                        Grid.Column="0"
                         VerticalAlignment="Center"
                         Content="Placement" />
-                    <ToggleSwitch
-                        Grid.Row="2" Grid.Column="1"
-                        Name="PanePlacementButton"
-                        OffContent="Left"
-                        OnContent="Right" />
-
+                    <ComboBox 
+                        Grid.Row="2" 
+                        Grid.Column="1" 
+                        Name="PanelPlacementSelector"
+                        HorizontalAlignment="Stretch"
+                        ItemsSource="{x:Static vm:SplitViewDemoViewModel.Placements}"
+                        SelectedItem="{x:Static SplitViewPanePlacement.Left}"
+                        />
                     <Label
-                        Grid.Row="3" Grid.Column="0"
+                        Grid.Row="3"
+                        Grid.Column="0"
                         VerticalAlignment="Center"
                         Content="DisplayMode" />
                     <ComboBox
-                        Grid.Row="3" Grid.Column="1"
                         Name="DisplayModeSelector"
+                        Grid.Row="3"
+                        Grid.Column="1"
                         HorizontalAlignment="Stretch"
                         ItemsSource="{x:Static vm:SplitViewDemoViewModel.DisplayModes}"
                         SelectedItem="{x:Static SplitViewDisplayMode.CompactInline}" />
 
                     <Label
-                        Grid.Row="4" Grid.Column="0"
+                        Grid.Row="4"
+                        Grid.Column="0"
                         VerticalAlignment="Center"
                         Content="{Binding #CompactPaneLengthSlider.Value, StringFormat='{}CompactPaneLength: {0}'}" />
                     <Slider
-                        Grid.Row="4" Grid.Column="1"
                         Name="CompactPaneLengthSlider"
+                        Grid.Row="4"
+                        Grid.Column="1"
+                        IsSnapToTickEnabled="True"
                         Maximum="128"
                         Minimum="0"
                         TickFrequency="1"
-                        IsSnapToTickEnabled="True"
                         Value="48" />
 
                     <Label
-                        Grid.Row="5" Grid.Column="0"
+                        Grid.Row="5"
+                        Grid.Column="0"
                         VerticalAlignment="Center"
-                        Content="{Binding #OpenPaneLengthSlider.Value,StringFormat='{}OpenPaneLength: {0}'}" />
+                        Content="{Binding #OpenPaneLengthSlider.Value, StringFormat='{}OpenPaneLength: {0}'}" />
                     <Slider
-                        Grid.Row="5" Grid.Column="1"
                         Name="OpenPaneLengthSlider"
+                        Grid.Row="5"
+                        Grid.Column="1"
+                        IsSnapToTickEnabled="True"
                         Maximum="500"
                         Minimum="128"
                         TickFrequency="1"
-                        IsSnapToTickEnabled="True"
                         Value="256" />
                 </Grid>
             </Border>
-            <TabControl Grid.Column="0">
-                <TabItem Header="Default">
-                    <Border
-                        BorderBrush="{DynamicResource SemiGrey1}"
-                        BorderThickness="1">
-                        <SplitView
-                            Name="SplitView"
-                            IsPaneOpen="{Binding #PaneOpenButton.IsChecked,Mode=TwoWay}"
-                            UseLightDismissOverlayMode="{Binding #UseLightDismissOverlayModeButton.IsChecked}"
-                            PanePlacement="{Binding #PanePlacementButton.IsChecked}"
-                            DisplayMode="{Binding #DisplayModeSelector.SelectedItem}"
-                            CompactPaneLength="{Binding #CompactPaneLengthSlider.Value}"
-                            OpenPaneLength="{Binding #OpenPaneLengthSlider.Value}">
-                            <SplitView.Background>
-                                <LinearGradientBrush StartPoint="0%,0%" EndPoint="0%,100%">
-                                    <GradientStop Color="#6b4c1b" Offset="0" />
-                                    <GradientStop Color="#291e10" Offset="1" />
-                                </LinearGradientBrush>
-                            </SplitView.Background>
-                            <SplitView.Pane>
-                                <Grid RowDefinitions="Auto,*,Auto">
-                                    <TextBlock
-                                        Grid.Row="0"
-                                        Name="PaneHeader"
-                                        Margin="8,12"
-                                        FontWeight="Bold"
-                                        Text="Playlist" />
-                                    <ListBox
-                                        Grid.Row="1"
-                                        ItemsSource="{Binding Songs}" />
-                                    <ToggleSwitch
-                                        Grid.Row="2"
-                                        Theme="{DynamicResource IconBorderlessToggleSwitch}"
-                                        Content="{StaticResource SemiIconSidebar}"
-                                        HorizontalAlignment="Left"
-                                        IsChecked="{Binding #SplitView.IsPaneOpen}" />
-                                </Grid>
-                            </SplitView.Pane>
+            <SplitView
+                Grid.Column="0"
+                Name="SplitView"
+                CompactPaneLength="{Binding #CompactPaneLengthSlider.Value}"
+                DisplayMode="{Binding #DisplayModeSelector.SelectedItem}"
+                IsPaneOpen="{Binding #PaneOpenButton.IsChecked, Mode=TwoWay}"
+                OpenPaneLength="{Binding #OpenPaneLengthSlider.Value}"
+                PanePlacement="{Binding #PanelPlacementSelector.SelectedItem}"
+                UseLightDismissOverlayMode="{Binding #UseLightDismissOverlayModeButton.IsChecked}">
+                <SplitView.Background>
+                    <LinearGradientBrush StartPoint="0%,0%" EndPoint="0%,100%">
+                        <GradientStop Offset="0" Color="#6b4c1b" />
+                        <GradientStop Offset="1" Color="#291e10" />
+                    </LinearGradientBrush>
+                </SplitView.Background>
+                <SplitView.Pane>
+                    <Grid RowDefinitions="Auto,*,Auto">
+                        <StackPanel Grid.Row="0" Orientation="Horizontal" Margin="8 12">
+                            <ToggleSwitch
+                                Content="{StaticResource SemiIconSidebar}"
+                                IsChecked="{Binding #SplitView.IsPaneOpen}"
+                                Theme="{DynamicResource IconBorderlessToggleSwitch}" />
+                            <TextBlock
+                                Name="PaneHeader"
+                                VerticalAlignment="Center"
+                                Margin="8 0"
+                                FontWeight="Bold"
+                                Text="Playlist" />
+                        </StackPanel>
+                        
+                        <ListBox Grid.Row="1" ItemsSource="{Binding Songs}" />
+                        
+                    </Grid>
+                </SplitView.Pane>
 
-                            <Panel>
-                                <Panel.Styles>
-                                    <Style Selector="Image#AlbumCover">
-                                        <Style.Animations>
-                                            <Animation IterationCount="Infinite" Duration="0:0:40">
-                                                <KeyFrame Cue="0%">
-                                                    <Setter Property="RotateTransform.Angle" Value="0" />
-                                                </KeyFrame>
-                                                <KeyFrame Cue="100%">
-                                                    <Setter Property="RotateTransform.Angle" Value="360" />
-                                                </KeyFrame>
-                                            </Animation>
-                                        </Style.Animations>
-                                    </Style>
-                                </Panel.Styles>
-                                <Image
-                                    Source="/Assets/WORLD.png"
-                                    Name="AlbumCover"
-                                    Width="200"
-                                    Height="200" />
-                                <Arc
-                                    Width="290"
-                                    Height="290"
-                                    StartAngle="0"
-                                    SweepAngle="360"
-                                    StrokeJoin="Round"
-                                    StrokeLineCap="Round"
-                                    StrokeThickness="45">
-                                    <Arc.Stroke>
-                                        <LinearGradientBrush StartPoint="0%,0%" EndPoint="100%,0%">
-                                            <GradientStop Color="#010101" Offset="0" />
-                                            <GradientStop Color="#363636" Offset="0.5" />
-                                            <GradientStop Color="#010101" Offset="1" />
-                                        </LinearGradientBrush>
-                                    </Arc.Stroke>
-                                </Arc>
-                                <Arc
-                                    Width="294"
-                                    Height="294"
-                                    StartAngle="0"
-                                    SweepAngle="360"
-                                    StrokeJoin="Round"
-                                    StrokeLineCap="Round"
-                                    StrokeThickness="4"
-                                    Stroke="Black" />
-                                <Arc
-                                    Width="310"
-                                    Height="310"
-                                    StartAngle="0"
-                                    SweepAngle="360"
-                                    StrokeJoin="Round"
-                                    StrokeLineCap="Round"
-                                    StrokeThickness="10"
-                                    Stroke="#C6CACD"
-                                    Opacity="0.1" />
-                            </Panel>
-
-                        </SplitView>
-                    </Border>
-                </TabItem>
-                <TabItem Header="VerticalSplitView">
-                    <Border
-                        BorderBrush="{DynamicResource SemiGrey1}"
-                        BorderThickness="1">
-                        <SplitView
-                            Name="SplitView2"
-                            Theme="{DynamicResource VerticalSplitView}"
-                            IsPaneOpen="{Binding #PaneOpenButton.IsChecked,Mode=TwoWay}"
-                            UseLightDismissOverlayMode="{Binding #UseLightDismissOverlayModeButton.IsChecked}"
-                            PanePlacement="{Binding #PanePlacementButton.IsChecked}"
-                            DisplayMode="{Binding #DisplayModeSelector.SelectedItem}"
-                            CompactPaneLength="{Binding #CompactPaneLengthSlider.Value}"
-                            OpenPaneLength="{Binding #OpenPaneLengthSlider.Value}">
-                            <SplitView.Background>
-                                <LinearGradientBrush StartPoint="0%,0%" EndPoint="0%,100%">
-                                    <GradientStop Color="#6b4c1b" Offset="0" />
-                                    <GradientStop Color="#291e10" Offset="1" />
-                                </LinearGradientBrush>
-                            </SplitView.Background>
-                            <SplitView.Pane>
-                                <Grid RowDefinitions="Auto,Auto,*">
-                                    <ToggleSwitch
-                                        Grid.Row="0"
-                                        Theme="{DynamicResource IconBorderlessToggleSwitch}"
-                                        Content="{StaticResource SemiIconSidebar}"
-                                        HorizontalAlignment="Left"
-                                        IsChecked="{Binding #SplitView2.IsPaneOpen}" />
-                                    <TextBlock
-                                        Grid.Row="1"
-                                        Margin="8,12"
-                                        FontWeight="Bold"
-                                        Text="Playlist" />
-                                    <ListBox
-                                        Grid.Row="2"
-                                        ItemsSource="{Binding Songs}" />
-                                </Grid>
-                            </SplitView.Pane>
-
-                            <Panel>
-                                <Panel.Styles>
-                                    <Style Selector="Image#AlbumCover2">
-                                        <Style.Animations>
-                                            <Animation IterationCount="Infinite" Duration="0:0:40">
-                                                <KeyFrame Cue="0%">
-                                                    <Setter Property="RotateTransform.Angle" Value="0" />
-                                                </KeyFrame>
-                                                <KeyFrame Cue="100%">
-                                                    <Setter Property="RotateTransform.Angle" Value="360" />
-                                                </KeyFrame>
-                                            </Animation>
-                                        </Style.Animations>
-                                    </Style>
-                                </Panel.Styles>
-                                <Image
-                                    Source="/Assets/WORLD.png"
-                                    Name="AlbumCover2"
-                                    Width="200"
-                                    Height="200" />
-                                <Arc
-                                    Width="290"
-                                    Height="290"
-                                    StartAngle="0"
-                                    SweepAngle="360"
-                                    StrokeJoin="Round"
-                                    StrokeLineCap="Round"
-                                    StrokeThickness="45">
-                                    <Arc.Stroke>
-                                        <LinearGradientBrush StartPoint="0%,0%" EndPoint="100%,0%">
-                                            <GradientStop Color="#010101" Offset="0" />
-                                            <GradientStop Color="#363636" Offset="0.5" />
-                                            <GradientStop Color="#010101" Offset="1" />
-                                        </LinearGradientBrush>
-                                    </Arc.Stroke>
-                                </Arc>
-                                <Arc
-                                    Width="294"
-                                    Height="294"
-                                    StartAngle="0"
-                                    SweepAngle="360"
-                                    StrokeJoin="Round"
-                                    StrokeLineCap="Round"
-                                    StrokeThickness="4"
-                                    Stroke="Black" />
-                                <Arc
-                                    Width="310"
-                                    Height="310"
-                                    StartAngle="0"
-                                    SweepAngle="360"
-                                    StrokeJoin="Round"
-                                    StrokeLineCap="Round"
-                                    StrokeThickness="10"
-                                    Stroke="#C6CACD"
-                                    Opacity="0.1" />
-                            </Panel>
-
-                        </SplitView>
-                    </Border>
-                </TabItem>
-            </TabControl>
+                <Panel>
+                    <Panel.Styles>
+                        <Style Selector="Image#AlbumCover">
+                            <Style.Animations>
+                                <Animation IterationCount="Infinite" Duration="0:0:40">
+                                    <KeyFrame Cue="0%">
+                                        <Setter Property="RotateTransform.Angle" Value="0" />
+                                    </KeyFrame>
+                                    <KeyFrame Cue="100%">
+                                        <Setter Property="RotateTransform.Angle" Value="360" />
+                                    </KeyFrame>
+                                </Animation>
+                            </Style.Animations>
+                        </Style>
+                    </Panel.Styles>
+                    <Image
+                        Name="AlbumCover"
+                        Width="200"
+                        Height="200"
+                        Source="/Assets/WORLD.png" />
+                    <Arc
+                        Width="290"
+                        Height="290"
+                        StartAngle="0"
+                        StrokeJoin="Round"
+                        StrokeLineCap="Round"
+                        StrokeThickness="45"
+                        SweepAngle="360">
+                        <Arc.Stroke>
+                            <LinearGradientBrush StartPoint="0%,0%" EndPoint="100%,0%">
+                                <GradientStop Offset="0" Color="#010101" />
+                                <GradientStop Offset="0.5" Color="#363636" />
+                                <GradientStop Offset="1" Color="#010101" />
+                            </LinearGradientBrush>
+                        </Arc.Stroke>
+                    </Arc>
+                    <Arc
+                        Width="294"
+                        Height="294"
+                        StartAngle="0"
+                        Stroke="Black"
+                        StrokeJoin="Round"
+                        StrokeLineCap="Round"
+                        StrokeThickness="4"
+                        SweepAngle="360" />
+                    <Arc
+                        Width="310"
+                        Height="310"
+                        Opacity="0.1"
+                        StartAngle="0"
+                        Stroke="#C6CACD"
+                        StrokeJoin="Round"
+                        StrokeLineCap="Round"
+                        StrokeThickness="10"
+                        SweepAngle="360" />
+                </Panel>
+            </SplitView>
         </Grid>
     </Border>
 </UserControl>

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

@@ -7,7 +7,6 @@
     xmlns:vm="clr-namespace:Semi.Avalonia.Demo.ViewModels;assembly=Semi.Avalonia.Demo"
     d:DesignHeight="450"
     d:DesignWidth="800"
-    x:CompileBindings="True"
     x:DataType="vm:TabControlDemoViewModel"
     mc:Ignorable="d">
     <ScrollViewer>

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

@@ -5,7 +5,6 @@
              xmlns:vm="clr-namespace:Semi.Avalonia.Demo.ViewModels"
              mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
              x:Class="Semi.Avalonia.Demo.Pages.TabStripDemo"
-             x:CompileBindings="True"
              x:DataType="vm:TabStripDemoViewModel">
     <Design.DataContext>
         <vm:TabStripDemoViewModel />

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

@@ -8,7 +8,6 @@
     xmlns:vm="clr-namespace:Semi.Avalonia.Demo.Pages"
     d:DesignHeight="450"
     d:DesignWidth="800"
-    x:CompileBindings="True"
     x:DataType="vm:TreeViewVm"
     mc:Ignorable="d">
 

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

@@ -21,33 +21,40 @@ public class TreeViewVm : ObservableObject
 
     public TreeViewVm()
     {
-        Items = new ObservableCollection<TreeViewItemVm>()
-        {
-            new TreeViewItemVm() { Name = "Item 1", Id = "1" },
-            new TreeViewItemVm() { Name = "Item 2", Id = "2" },
-            new TreeViewItemVm()
+        Items =
+        [
+            new TreeViewItemVm { Name = "Item 1", Id = "1" },
+            new TreeViewItemVm { Name = "Item 2", Id = "2" },
+            new TreeViewItemVm
             {
-                Name = "Item 3", Id = "3", Items = new ObservableCollection<TreeViewItemVm>()
-                {
-                    new TreeViewItemVm() { Name = "Item 3.1", Id = "3.1" },
-                    new TreeViewItemVm() { Name = "Item 3.2", Id = "3.2" },
-                    new TreeViewItemVm() { Name = "Item 3.3", Id = "3.3" },
-                },
-            },
-        };
+                Name = "Item 3", Id = "3", Items =
+                [
+                    new TreeViewItemVm { Name = "Item 3.1", Id = "3.1" },
+                    new TreeViewItemVm { Name = "Item 3.2", Id = "3.2" },
+                    new TreeViewItemVm { Name = "Item 3.3", Id = "3.3" }
+                ],
+            }
 
-        MultipleLevelItems = new();
-        for (int i = 1; i < 6; i++)
+        ];
+
+        MultipleLevelItems = [];
+        for (var i = 1; i < 6; i++)
         {
-            FirstItem firstItem = new FirstItem { Id = i, Name = $"FirstItem {i}" };
-            firstItem.SecondItems = new();
-            for (int j = 1; j < 6; j++)
+            var firstItem = new FirstItem
             {
-                SecondItem secondItem = new SecondItem { Id = j, Name = $"SecondItem {j}" };
-                secondItem.ThirdItemItems = new();
-                for (int k = 1; k < 6; k++)
+                Id = i, Name = $"FirstItem {i}",
+                SecondItems = []
+            };
+            for (var j = 1; j < 6; j++)
+            {
+                var secondItem = new SecondItem
                 {
-                    ThirdItem thirdItem = new ThirdItem { Id = k, Name = $"ThirdItem {k}" };
+                    Id = j, Name = $"SecondItem {j}",
+                    ThirdItemItems = []
+                };
+                for (var k = 1; k < 6; k++)
+                {
+                    var thirdItem = new ThirdItem { Id = k, Name = $"ThirdItem {k}" };
                     secondItem.ThirdItemItems.Add(thirdItem);
                 }
 
@@ -61,9 +68,9 @@ public class TreeViewVm : ObservableObject
 
 public partial class TreeViewItemVm : ObservableObject
 {
-    public ObservableCollection<TreeViewItemVm> Items { get; set; }
-    public string Name { get; set; }
-    public string Id { get; set; }
+    public ObservableCollection<TreeViewItemVm> Items { get; set; } = [];
+    public string? Name { get; set; }
+    public string? Id { get; set; }
 }
 
 public class ItemBase

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

@@ -3,6 +3,7 @@
         <TargetFramework>net8.0</TargetFramework>
         <Nullable>enable</Nullable>
         <LangVersion>latest</LangVersion>
+        <AvaloniaUseCompiledBindingsByDefault>true</AvaloniaUseCompiledBindingsByDefault>
     </PropertyGroup>
 
     <ItemGroup>
@@ -12,19 +13,20 @@
     <ItemGroup>
         <PackageReference Include="Avalonia" Version="$(AvaloniaVersion)"/>
         <PackageReference Include="Avalonia.Controls.ColorPicker" Version="$(AvaloniaVersion)"/>
-<!--        <PackageReference Include="Avalonia.Controls.DataGrid" Version="$(DataGridVersion)"/>-->
+        <PackageReference Include="Avalonia.Controls.DataGrid" Version="$(DataGridVersion)"/>
         <!--Condition below is needed to remove Avalonia.Diagnostics package from build output in Release configuration.-->
         <PackageReference Include="Avalonia.Diagnostics" Version="$(AvaloniaVersion)">
             <IncludeAssets Condition="'$(Configuration)' != 'Debug'">None</IncludeAssets>
             <PrivateAssets Condition="'$(Configuration)' != 'Debug'">All</PrivateAssets>
         </PackageReference>
         <PackageReference Include="CommunityToolkit.Mvvm" Version="$(CommunityToolkitVersion)"/>
+        <PackageReference Include="Irihi.Avalonia.Shared" Version="0.3.0" />
     </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"/>-->
+        <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/ColorDetailControl.axaml

@@ -1,8 +1,7 @@
 <ResourceDictionary
     xmlns="https://github.com/avaloniaui"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-    xmlns:controls="clr-namespace:Semi.Avalonia.Demo.Controls"
-    x:CompileBindings="True">
+    xmlns:controls="clr-namespace:Semi.Avalonia.Demo.Controls">
     <ControlTheme x:Key="{x:Type controls:ColorDetailControl}" TargetType="controls:ColorDetailControl">
         <Setter Property="Template">
             <ControlTemplate TargetType="controls:ColorDetailControl">

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

@@ -1,8 +1,7 @@
 <ResourceDictionary
     xmlns="https://github.com/avaloniaui"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-    xmlns:controls="using:Semi.Avalonia.Demo.Controls"
-    x:CompileBindings="True">
+    xmlns:controls="using:Semi.Avalonia.Demo.Controls">
     <Design.PreviewWith>
         <controls:ColorItemControl />
     </Design.PreviewWith>

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/ApplicationViewModel.cs

@@ -1,12 +1,37 @@
 using Avalonia;
+using Avalonia.Controls;
 using Avalonia.Controls.ApplicationLifetimes;
 using CommunityToolkit.Mvvm.ComponentModel;
 using CommunityToolkit.Mvvm.Input;
+using CommunityToolkit.Mvvm.Messaging;
 
 namespace Semi.Avalonia.Demo.ViewModels;
 
 public partial class ApplicationViewModel : ObservableObject
 {
+    [RelayCommand]
+    private void Activate()
+    {
+        if (Application.Current?.ApplicationLifetime is not IClassicDesktopStyleApplicationLifetime desktop) return;
+        var mainWindow = desktop.MainWindow;
+        if (mainWindow is not null && !mainWindow.IsActive)
+        {
+            if (mainWindow.WindowState is WindowState.Minimized)
+            {
+                mainWindow.WindowState = WindowState.Normal;
+            }
+
+            mainWindow.Activate();
+        }
+    }
+
+    [RelayCommand]
+    private void JumpTo(string header)
+    {
+        Activate();
+        WeakReferenceMessenger.Default.Send(header, "JumpTo");
+    }
+
     [RelayCommand]
     private void Exit()
     {

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/IconDemoViewModel.cs

@@ -1,4 +1,5 @@
-using System.Collections.Generic;
+using System;
+using System.Collections.Generic;
 using System.Collections.ObjectModel;
 using System.Linq;
 using Avalonia.Controls;
@@ -9,7 +10,7 @@ namespace Semi.Avalonia.Demo.ViewModels;
 
 public partial class IconDemoViewModel : ObservableObject
 {
-    private readonly IResourceDictionary? _resources = new Icons();
+    private readonly Icons _resources = new();
 
     private readonly Dictionary<string, IconItem> _filledIcons = new();
     private readonly Dictionary<string, IconItem> _strokedIcons = new();
@@ -21,8 +22,6 @@ public partial class IconDemoViewModel : ObservableObject
 
     public void InitializeResources()
     {
-        if (_resources is null) return;
-
         foreach (var provider in _resources.MergedDictionaries)
         {
             if (provider is not ResourceDictionary dic) continue;
@@ -30,16 +29,17 @@ public partial class IconDemoViewModel : ObservableObject
             foreach (var key in dic.Keys)
             {
                 if (dic[key] is not Geometry geometry) continue;
+                var resourceKey = key.ToString() ?? string.Empty;
                 var icon = new IconItem
                 {
-                    ResourceKey = key.ToString(),
+                    ResourceKey = resourceKey,
                     Geometry = geometry
                 };
 
-                if (key.ToString().EndsWith("Stroked"))
-                    _strokedIcons[key.ToString().ToLowerInvariant()] = icon;
+                if (resourceKey.EndsWith("Stroked", StringComparison.InvariantCultureIgnoreCase))
+                    _strokedIcons[resourceKey] = icon;
                 else
-                    _filledIcons[key.ToString().ToLowerInvariant()] = icon;
+                    _filledIcons[resourceKey] = icon;
             }
         }
 
@@ -48,16 +48,16 @@ public partial class IconDemoViewModel : ObservableObject
 
     partial void OnSearchTextChanged(string? value)
     {
-        var search = value?.ToLowerInvariant() ?? string.Empty;
+        var search = string.IsNullOrWhiteSpace(value) ? string.Empty : value.Trim();
 
         FilteredFilledIcons.Clear();
-        foreach (var pair in _filledIcons.Where(i => i.Key.Contains(search)))
+        foreach (var pair in _filledIcons.Where(kv => kv.Key.Contains(search, StringComparison.InvariantCultureIgnoreCase)))
         {
             FilteredFilledIcons.Add(pair.Value);
         }
 
         FilteredStrokedIcons.Clear();
-        foreach (var pair in _strokedIcons.Where(i => i.Key.Contains(search)))
+        foreach (var pair in _strokedIcons.Where(kv => kv.Key.Contains(search, StringComparison.InvariantCultureIgnoreCase)))
         {
             FilteredStrokedIcons.Add(pair.Value);
         }

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

@@ -26,4 +26,12 @@ public class SplitViewDemoViewModel : ObservableObject
         SplitViewDisplayMode.Overlay,
         SplitViewDisplayMode.CompactOverlay,
     ];
+
+    public static ObservableCollection<SplitViewPanePlacement> Placements { get; set; } =
+    [
+        SplitViewPanePlacement.Left,
+        SplitViewPanePlacement.Right,
+        SplitViewPanePlacement.Top,
+        SplitViewPanePlacement.Bottom
+    ];
 }

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

@@ -8,7 +8,6 @@
     xmlns:views="clr-namespace:Semi.Avalonia.Demo.Views"
     d:DesignHeight="450"
     d:DesignWidth="800"
-    x:CompileBindings="True"
     x:DataType="views:MainViewModel"
     mc:Ignorable="d">
     <UserControl.Resources>
@@ -117,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>
@@ -135,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" />
@@ -243,9 +242,6 @@
             <TabItem Header="Flyout">
                 <pages:FlyoutDemo />
             </TabItem>
-            <TabItem Header="GroupBox">
-                <pages:GroupBoxDemo />
-            </TabItem>
             <TabItem Header="HeaderedContentControl">
                 <pages:HeaderedContentControlDemo />
             </TabItem>

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

@@ -9,6 +9,7 @@ using Avalonia.Controls.ApplicationLifetimes;
 using Avalonia.Styling;
 using CommunityToolkit.Mvvm.ComponentModel;
 using CommunityToolkit.Mvvm.Input;
+using CommunityToolkit.Mvvm.Messaging;
 
 namespace Semi.Avalonia.Demo.Views;
 
@@ -18,6 +19,19 @@ public partial class MainView : UserControl
     {
         InitializeComponent();
         this.DataContext = new MainViewModel();
+        WeakReferenceMessenger.Default.Register<string, string>(this, "JumpTo", MessageHandler);
+    }
+
+    private void MessageHandler(object _, string message)
+    {
+        foreach (var item in tab.ItemsView)
+        {
+            if (item is TabItem tabItem && tabItem.Header is not null && tabItem.Header.Equals(message))
+            {
+                tab.SelectedItem = tabItem;
+                break;
+            }
+        }
     }
 }
 
@@ -91,6 +105,42 @@ public partial class MainViewModel : ObservableObject
                         CommandParameter = new CultureInfo("ja-jp")
                     },
                     new MenuItemViewModel
+                    {
+                        Header = "한국어",
+                        Command = SelectLocaleCommand,
+                        CommandParameter = new CultureInfo("ko-kr")
+                    },
+                    new MenuItemViewModel
+                    {
+                        Header = "English (UK)",
+                        Command = SelectLocaleCommand,
+                        CommandParameter = new CultureInfo("en-gb")
+                    },
+                    new MenuItemViewModel
+                    {
+                        Header = "Italiano",
+                        Command = SelectLocaleCommand,
+                        CommandParameter = new CultureInfo("it-it")
+                    },
+                    new MenuItemViewModel
+                    {
+                        Header = "Italiano (Switzerland)",
+                        Command = SelectLocaleCommand,
+                        CommandParameter = new CultureInfo("it-ch")
+                    },
+                    new MenuItemViewModel
+                    {
+                        Header = "Nederlands",
+                        Command = SelectLocaleCommand,
+                        CommandParameter = new CultureInfo("nl-nl")
+                    },
+                    new MenuItemViewModel
+                    {
+                        Header = "Nederlands (Belgium)",
+                        Command = SelectLocaleCommand,
+                        CommandParameter = new CultureInfo("nl-be")
+                    },
+                    new MenuItemViewModel
                     {
                         Header = "Українська",
                         Command = SelectLocaleCommand,
@@ -197,4 +247,4 @@ public class MenuItemViewModel
     public ICommand? Command { get; set; }
     public object? CommandParameter { get; set; }
     public IList<MenuItemViewModel>? Items { get; set; }
-}
+}

src/Package.props

@@ -3,14 +3,14 @@
         <TargetFrameworks>netstandard2.0;net6.0;net8.0</TargetFrameworks>
         <Nullable>enable</Nullable>
         <LangVersion>latest</LangVersion>
-        <Version>11.2.1.9</Version>
+        <Version>11.3.7</Version>
         <Authors>IRIHI Technology Co., Ltd.</Authors>
         <Description>Avalonia Theme inspired by Semi Design.</Description>
         <RepositoryUrl>https://github.com/irihitech/Semi.Avalonia</RepositoryUrl>
         <PackageLicenseExpression>MIT</PackageLicenseExpression>
         <PackageIcon>irihi.png</PackageIcon>
         <PackageProjectUrl>https://github.com/irihitech/Semi.Avalonia</PackageProjectUrl>
-        <AvaloniaVersion>12.0.999-cibuild0058575-alpha</AvaloniaVersion>
+        <AvaloniaVersion>11.3.7</AvaloniaVersion>
         <AvaloniaUseCompiledBindingsByDefault>true</AvaloniaUseCompiledBindingsByDefault>
     </PropertyGroup>
 

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

@@ -4,7 +4,7 @@
 
     <PropertyGroup>
         <Title>Semi.Avalonia.ColorPicker</Title>
-        <PackageReleaseNotes>Update to Semi.Avalonia.ColorPicker 11.2.1.9</PackageReleaseNotes>
+        <PackageReleaseNotes>Update to Semi.Avalonia.ColorPicker 11.3.7</PackageReleaseNotes>
     </PropertyGroup>
 
     <PropertyGroup Condition="$([MSBuild]::IsTargetFrameworkCompatible('$(TargetFramework)', 'net8.0'))">
@@ -13,7 +13,6 @@
 
     <ItemGroup>
         <PackageReference Include="Avalonia.Controls.ColorPicker" Version="$(AvaloniaVersion)"/>
-        <PackageReference Include="Irihi.Avalonia.Shared" Version="0.3.0" />
     </ItemGroup>
 
 </Project>

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

@@ -4,8 +4,8 @@
         <TargetFrameworks>netstandard2.0;net6.0;net8.0</TargetFrameworks>
         <Nullable>enable</Nullable>
         <LangVersion>latest</LangVersion>
-        <Version>11.2.1.9</Version>
-        <PackageReleaseNotes>Update to Semi.Avalonia.DataGrid 11.2.1.9</PackageReleaseNotes>
+        <Version>11.3.7</Version>
+        <PackageReleaseNotes>Update to Semi.Avalonia.DataGrid 11.3.7</PackageReleaseNotes>
         <Authors>IRIHI Technology Co., Ltd.</Authors>
         <Description>Avalonia Theme inspired by Semi Design.</Description>
         <RepositoryUrl>https://github.com/irihitech/Semi.Avalonia</RepositoryUrl>
@@ -20,7 +20,7 @@
     </PropertyGroup>
 
     <ItemGroup>
-        <PackageReference Include="Avalonia.Controls.DataGrid" Version="11.2.1"/>
+        <PackageReference Include="Avalonia.Controls.DataGrid" Version="11.3.7"/>
         <None Include="..\..\irihi.png" Pack="true" PackagePath="\" Link="Properties\irihi.png"/>
         <None Include="..\..\LICENSE" Pack="true" PackagePath="\" Link="Properties\LICENSE"/>
     </ItemGroup>

src/Semi.Avalonia.TreeDataGrid/TreeDataGrid.axaml

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

src/Semi.Avalonia/Controls/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" />
@@ -90,7 +91,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/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/SplitView.axaml

@@ -1,6 +1,4 @@
-<ResourceDictionary 
-    xmlns="https://github.com/avaloniaui" 
-    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+<ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
     <ControlTheme x:Key="{x:Type SplitView}" TargetType="SplitView">
         <Setter Property="OpenPaneLength" Value="{DynamicResource SplitViewOpenPaneThemeLength}" />
         <Setter Property="CompactPaneLength" Value="{DynamicResource SplitViewCompactPaneThemeLength}" />
@@ -100,7 +98,7 @@
 
         <Style Selector="^:right">
             <Setter Property="Template">
-                <ControlTemplate>
+                <ControlTemplate TargetType="SplitView">
                     <Grid Name="Container" Background="{TemplateBinding Background}">
                         <Grid.ColumnDefinitions>
                             <ColumnDefinition Width="*" />
@@ -185,79 +183,13 @@
             </Style>
         </Style>
 
-        <Style Selector="^:open">
-            <Style Selector="^ /template/ Panel#PART_PaneRoot">
-                <Setter Property="Transitions">
-                    <Transitions>
-                        <DoubleTransition
-                            Easing="{StaticResource SplitViewPaneAnimationEasing}"
-                            Property="Width"
-                            Duration="{StaticResource SplitViewPaneAnimationOpenDuration}" />
-                    </Transitions>
-                </Setter>
-                <Setter Property="Width" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=OpenPaneLength}" />
-            </Style>
-            <Style Selector="^ /template/ Rectangle#LightDismissLayer">
-                <Setter Property="Transitions">
-                    <Transitions>
-                        <DoubleTransition
-                            Easing="{StaticResource SplitViewPaneAnimationEasing}"
-                            Property="Opacity"
-                            Duration="{StaticResource SplitViewPaneAnimationOpenDuration}" />
-                    </Transitions>
-                </Setter>
-                <Setter Property="Opacity" Value="1.0" />
-            </Style>
-        </Style>
-
-        <Style Selector="^:closed">
-            <Style Selector="^ /template/ Panel#PART_PaneRoot">
-                <Setter Property="Transitions">
-                    <Transitions>
-                        <DoubleTransition
-                            Easing="{StaticResource SplitViewPaneAnimationEasing}"
-                            Property="Width"
-                            Duration="{StaticResource SplitViewPaneAnimationCloseDuration}" />
-                    </Transitions>
-                </Setter>
-                <Setter Property="Width" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.ClosedPaneWidth}" />
-            </Style>
-            <Style Selector="^ /template/ Rectangle#LightDismissLayer">
-                <Setter Property="Transitions">
-                    <Transitions>
-                        <DoubleTransition
-                            Easing="{StaticResource SplitViewPaneAnimationEasing}"
-                            Property="Opacity"
-                            Duration="{StaticResource SplitViewPaneAnimationCloseDuration}" />
-                    </Transitions>
-                </Setter>
-                <Setter Property="Opacity" Value="0.0" />
-            </Style>
-        </Style>
-
-        <Style Selector="^:lightDismiss /template/ Rectangle#LightDismissLayer">
-            <Setter Property="Fill" Value="{DynamicResource SplitViewMaskBrush}" />
-        </Style>
-        <Style Selector="^:overlay:open /template/ Rectangle#LightDismissLayer">
-            <Setter Property="IsVisible" Value="True" />
-        </Style>
-        <Style Selector="^:compactoverlay:open /template/ Rectangle#LightDismissLayer">
-            <Setter Property="IsVisible" Value="True" />
-        </Style>
-    </ControlTheme>
-    <ControlTheme x:Key="VerticalSplitView" TargetType="SplitView">
-        <Setter Property="OpenPaneLength" Value="{DynamicResource SplitViewOpenPaneThemeLength}" />
-        <Setter Property="CompactPaneLength" Value="{DynamicResource SplitViewCompactPaneThemeLength}" />
-        <Setter Property="PaneBackground" Value="{DynamicResource SplitViewPaneBackground}" />
-
-        <Style Selector="^:left">
+        <Style Selector="^:top">
             <Setter Property="Template">
                 <ControlTemplate TargetType="SplitView">
                     <Grid Name="Container" Background="{TemplateBinding Background}">
                         <Grid.RowDefinitions>
                             <!--  why is this throwing a binding error?  -->
-                            <RowDefinition
-                                Height="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.PaneColumnGridLength}" />
+                            <RowDefinition Height="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.PaneColumnGridLength}" />
                             <RowDefinition Height="*" />
                         </Grid.RowDefinitions>
 
@@ -295,8 +227,7 @@
 
             <Style Selector="^:overlay">
                 <Style Selector="^ /template/ Panel#PART_PaneRoot">
-                    <Setter Property="Height"
-                            Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.ClosedPaneWidth}" />
+                    <Setter Property="Height" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.ClosedPaneWidth}" />
                     <Setter Property="Grid.RowSpan" Value="1" />
                     <Setter Property="Grid.Row" Value="0" />
                 </Style>
@@ -310,8 +241,7 @@
                 <Style Selector="^ /template/ Panel#PART_PaneRoot">
                     <Setter Property="Grid.RowSpan" Value="1" />
                     <Setter Property="Grid.Row" Value="0" />
-                    <Setter Property="Height"
-                            Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.ClosedPaneWidth}" />
+                    <Setter Property="Height" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.ClosedPaneWidth}" />
                 </Style>
                 <Style Selector="^ /template/ Panel#ContentRoot">
                     <Setter Property="Grid.Row" Value="1" />
@@ -324,8 +254,7 @@
                     <!--  RowSpan should be 2  -->
                     <Setter Property="Grid.RowSpan" Value="1" />
                     <Setter Property="Grid.Row" Value="0" />
-                    <Setter Property="Height"
-                            Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.ClosedPaneWidth}" />
+                    <Setter Property="Height" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.ClosedPaneWidth}" />
                 </Style>
                 <Style Selector="^ /template/ Panel#ContentRoot">
                     <Setter Property="Grid.Row" Value="1" />
@@ -337,8 +266,322 @@
                 <Style Selector="^ /template/ Panel#PART_PaneRoot">
                     <Setter Property="Grid.RowSpan" Value="1" />
                     <Setter Property="Grid.Row" Value="0" />
-                    <Setter Property="Height"
-                            Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.ClosedPaneWidth}" />
+                    <Setter Property="Height" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.ClosedPaneWidth}" />
+                </Style>
+                <Style Selector="^ /template/ Panel#ContentRoot">
+                    <Setter Property="Grid.Row" Value="1" />
+                    <Setter Property="Grid.RowSpan" Value="1" />
+                </Style>
+            </Style>
+        </Style>
+
+        <Style Selector="^:bottom">
+            <Setter Property="Template">
+                <ControlTemplate TargetType="SplitView">
+                    <Grid Name="Container" Background="{TemplateBinding Background}">
+                        <Grid.RowDefinitions>
+                            <RowDefinition Height="*" />
+                            <RowDefinition Height="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.PaneColumnGridLength}" />
+                        </Grid.RowDefinitions>
+
+                        <Panel
+                            Name="PART_PaneRoot"
+                            VerticalAlignment="Bottom"
+                            Background="{TemplateBinding PaneBackground}"
+                            ClipToBounds="True"
+                            ZIndex="100">
+                            <ContentPresenter
+                                Name="PART_PanePresenter"
+                                Content="{TemplateBinding Pane}"
+                                ContentTemplate="{TemplateBinding PaneTemplate}" />
+                            <Rectangle
+                                Name="HCPaneBorder"
+                                Height="1"
+                                VerticalAlignment="Top"
+                                Fill="{DynamicResource SplitViewSeparatorBackground}" />
+                        </Panel>
+
+                        <Panel Name="ContentRoot">
+                            <ContentPresenter
+                                Name="PART_ContentPresenter"
+                                Content="{TemplateBinding Content}"
+                                ContentTemplate="{TemplateBinding ContentTemplate}" />
+                            <Rectangle
+                                Name="LightDismissLayer"
+                                Fill="Transparent"
+                                IsVisible="False" />
+                        </Panel>
+
+                    </Grid>
+                </ControlTemplate>
+            </Setter>
+
+            <Style Selector="^:overlay">
+                <Style Selector="^ /template/ Panel#PART_PaneRoot">
+                    <Setter Property="Height" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.ClosedPaneWidth}" />
+                    <Setter Property="Grid.RowSpan" Value="2" />
+                    <Setter Property="Grid.Row" Value="1" />
+                </Style>
+                <Style Selector="^ /template/ Panel#ContentRoot">
+                    <Setter Property="Grid.Row" Value="0" />
+                    <Setter Property="Grid.RowSpan" Value="2" />
+                </Style>
+            </Style>
+
+            <Style Selector="^:compactinline">
+                <Style Selector="^ /template/ Panel#PART_PaneRoot">
+                    <Setter Property="Grid.RowSpan" Value="1" />
+                    <Setter Property="Grid.Row" Value="1" />
+                    <Setter Property="Height" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.ClosedPaneWidth}" />
+                </Style>
+                <Style Selector="^ /template/ Panel#ContentRoot">
+                    <Setter Property="Grid.Row" Value="0" />
+                    <Setter Property="Grid.RowSpan" Value="1" />
+                </Style>
+            </Style>
+
+            <Style Selector="^:compactoverlay">
+                <Style Selector="^ /template/ Panel#PART_PaneRoot">
+                    <Setter Property="Grid.RowSpan" Value="2" />
+                    <Setter Property="Grid.Row" Value="1" />
+                    <Setter Property="Height" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.ClosedPaneWidth}" />
+                </Style>
+                <Style Selector="^ /template/ Panel#ContentRoot">
+                    <Setter Property="Grid.Row" Value="0" />
+                    <Setter Property="Grid.RowSpan" Value="1" />
+                </Style>
+            </Style>
+
+            <Style Selector="^:inline">
+                <Style Selector="^ /template/ Panel#PART_PaneRoot">
+                    <Setter Property="Grid.RowSpan" Value="1" />
+                    <Setter Property="Grid.Row" Value="1" />
+                    <Setter Property="Height" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.ClosedPaneWidth}" />
+                </Style>
+                <Style Selector="^ /template/ Panel#ContentRoot">
+                    <Setter Property="Grid.Row" Value="0" />
+                    <Setter Property="Grid.RowSpan" Value="1" />
+                </Style>
+            </Style>
+        </Style>
+
+        <Style Selector="^:open">
+            <Style Selector="^:left /template/ Panel#PART_PaneRoot">
+                <Setter Property="Transitions">
+                    <Transitions>
+                        <DoubleTransition
+                            Easing="{StaticResource SplitViewPaneAnimationEasing}"
+                            Property="Width"
+                            Duration="{StaticResource SplitViewPaneAnimationOpenDuration}" />
+                    </Transitions>
+                </Setter>
+                <Setter Property="Width" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=OpenPaneLength}" />
+            </Style>
+            <Style Selector="^:right /template/ Panel#PART_PaneRoot">
+                <Setter Property="Transitions">
+                    <Transitions>
+                        <DoubleTransition
+                            Easing="{StaticResource SplitViewPaneAnimationEasing}"
+                            Property="Width"
+                            Duration="{StaticResource SplitViewPaneAnimationOpenDuration}" />
+                    </Transitions>
+                </Setter>
+                <Setter Property="Width" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=OpenPaneLength}" />
+            </Style>
+            <Style Selector="^:top /template/ Panel#PART_PaneRoot">
+                <Setter Property="Transitions">
+                    <Transitions>
+                        <DoubleTransition
+                            Easing="{StaticResource SplitViewPaneAnimationEasing}"
+                            Property="Height"
+                            Duration="{StaticResource SplitViewPaneAnimationOpenDuration}" />
+                    </Transitions>
+                </Setter>
+                <Setter Property="Height" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=OpenPaneLength}" />
+            </Style>
+            <Style Selector="^:bottom /template/ Panel#PART_PaneRoot">
+                <Setter Property="Transitions">
+                    <Transitions>
+                        <DoubleTransition
+                            Easing="{StaticResource SplitViewPaneAnimationEasing}"
+                            Property="Height"
+                            Duration="{StaticResource SplitViewPaneAnimationOpenDuration}" />
+                    </Transitions>
+                </Setter>
+                <Setter Property="Height" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=OpenPaneLength}" />
+            </Style>
+            <Style Selector="^ /template/ Rectangle#LightDismissLayer">
+                <Setter Property="Transitions">
+                    <Transitions>
+                        <DoubleTransition
+                            Easing="{StaticResource SplitViewPaneAnimationEasing}"
+                            Property="Opacity"
+                            Duration="{StaticResource SplitViewPaneAnimationOpenDuration}" />
+                    </Transitions>
+                </Setter>
+                <Setter Property="Opacity" Value="1.0" />
+            </Style>
+        </Style>
+
+        <Style Selector="^:closed">
+            <Style Selector="^:left /template/ Panel#PART_PaneRoot">
+                <Setter Property="Transitions">
+                    <Transitions>
+                        <DoubleTransition
+                            Easing="{StaticResource SplitViewPaneAnimationEasing}"
+                            Property="Width"
+                            Duration="{StaticResource SplitViewPaneAnimationCloseDuration}" />
+                    </Transitions>
+                </Setter>
+                <Setter Property="Width" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.ClosedPaneWidth}" />
+            </Style>
+            <Style Selector="^:right /template/ Panel#PART_PaneRoot">
+                <Setter Property="Transitions">
+                    <Transitions>
+                        <DoubleTransition
+                            Easing="{StaticResource SplitViewPaneAnimationEasing}"
+                            Property="Width"
+                            Duration="{StaticResource SplitViewPaneAnimationCloseDuration}" />
+                    </Transitions>
+                </Setter>
+                <Setter Property="Width" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.ClosedPaneWidth}" />
+            </Style>
+            <Style Selector="^:top /template/ Panel#PART_PaneRoot">
+                <Setter Property="Transitions">
+                    <Transitions>
+                        <DoubleTransition
+                            Easing="{StaticResource SplitViewPaneAnimationEasing}"
+                            Property="Height"
+                            Duration="{StaticResource SplitViewPaneAnimationCloseDuration}" />
+                    </Transitions>
+                </Setter>
+                <Setter Property="Height" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.ClosedPaneWidth}" />
+            </Style>
+            <Style Selector="^:bottom /template/ Panel#PART_PaneRoot">
+                <Setter Property="Transitions">
+                    <Transitions>
+                        <DoubleTransition
+                            Easing="{StaticResource SplitViewPaneAnimationEasing}"
+                            Property="Height"
+                            Duration="{StaticResource SplitViewPaneAnimationCloseDuration}" />
+                    </Transitions>
+                </Setter>
+                <Setter Property="Height" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.ClosedPaneWidth}" />
+            </Style>
+            <Style Selector="^ /template/ Rectangle#LightDismissLayer">
+                <Setter Property="Transitions">
+                    <Transitions>
+                        <DoubleTransition
+                            Easing="{StaticResource SplitViewPaneAnimationEasing}"
+                            Property="Opacity"
+                            Duration="{StaticResource SplitViewPaneAnimationCloseDuration}" />
+                    </Transitions>
+                </Setter>
+                <Setter Property="Opacity" Value="0.0" />
+            </Style>
+        </Style>
+
+        <Style Selector="^:lightDismiss /template/ Rectangle#LightDismissLayer">
+            <Setter Property="Fill" Value="{DynamicResource SplitViewMaskBrush}" />
+        </Style>
+        <Style Selector="^:overlay:open /template/ Rectangle#LightDismissLayer">
+            <Setter Property="IsVisible" Value="True" />
+        </Style>
+        <Style Selector="^:compactoverlay:open /template/ Rectangle#LightDismissLayer">
+            <Setter Property="IsVisible" Value="True" />
+        </Style>
+    </ControlTheme>
+
+    <!--  Obsolete after Avalonia 11.3.7  -->
+    <ControlTheme x:Key="VerticalSplitView" TargetType="SplitView">
+        <Setter Property="OpenPaneLength" Value="{DynamicResource SplitViewOpenPaneThemeLength}" />
+        <Setter Property="CompactPaneLength" Value="{DynamicResource SplitViewCompactPaneThemeLength}" />
+        <Setter Property="PaneBackground" Value="{DynamicResource SplitViewPaneBackground}" />
+
+        <Style Selector="^:left">
+            <Setter Property="Template">
+                <ControlTemplate TargetType="SplitView">
+                    <Grid Name="Container" Background="{TemplateBinding Background}">
+                        <Grid.RowDefinitions>
+                            <!--  why is this throwing a binding error?  -->
+                            <RowDefinition Height="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.PaneColumnGridLength}" />
+                            <RowDefinition Height="*" />
+                        </Grid.RowDefinitions>
+
+                        <Panel
+                            Name="PART_PaneRoot"
+                            VerticalAlignment="Top"
+                            Background="{TemplateBinding PaneBackground}"
+                            ClipToBounds="True"
+                            ZIndex="100">
+                            <ContentPresenter
+                                Name="PART_PanePresenter"
+                                Content="{TemplateBinding Pane}"
+                                ContentTemplate="{TemplateBinding PaneTemplate}" />
+                            <Rectangle
+                                Name="HCPaneBorder"
+                                Height="1"
+                                VerticalAlignment="Bottom"
+                                Fill="{DynamicResource SplitViewSeparatorBackground}" />
+                        </Panel>
+
+                        <Panel Name="ContentRoot">
+                            <ContentPresenter
+                                Name="PART_ContentPresenter"
+                                Content="{TemplateBinding Content}"
+                                ContentTemplate="{TemplateBinding ContentTemplate}" />
+                            <Rectangle
+                                Name="LightDismissLayer"
+                                Fill="Transparent"
+                                IsVisible="False" />
+                        </Panel>
+
+                    </Grid>
+                </ControlTemplate>
+            </Setter>
+
+            <Style Selector="^:overlay">
+                <Style Selector="^ /template/ Panel#PART_PaneRoot">
+                    <Setter Property="Height" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.ClosedPaneWidth}" />
+                    <Setter Property="Grid.RowSpan" Value="1" />
+                    <Setter Property="Grid.Row" Value="0" />
+                </Style>
+                <Style Selector="^ /template/ Panel#ContentRoot">
+                    <Setter Property="Grid.Row" Value="1" />
+                    <Setter Property="Grid.RowSpan" Value="2" />
+                </Style>
+            </Style>
+
+            <Style Selector="^:compactinline">
+                <Style Selector="^ /template/ Panel#PART_PaneRoot">
+                    <Setter Property="Grid.RowSpan" Value="1" />
+                    <Setter Property="Grid.Row" Value="0" />
+                    <Setter Property="Height" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.ClosedPaneWidth}" />
+                </Style>
+                <Style Selector="^ /template/ Panel#ContentRoot">
+                    <Setter Property="Grid.Row" Value="1" />
+                    <Setter Property="Grid.RowSpan" Value="1" />
+                </Style>
+            </Style>
+
+            <Style Selector="^:compactoverlay">
+                <Style Selector="^ /template/ Panel#PART_PaneRoot">
+                    <!--  RowSpan should be 2  -->
+                    <Setter Property="Grid.RowSpan" Value="1" />
+                    <Setter Property="Grid.Row" Value="0" />
+                    <Setter Property="Height" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.ClosedPaneWidth}" />
+                </Style>
+                <Style Selector="^ /template/ Panel#ContentRoot">
+                    <Setter Property="Grid.Row" Value="1" />
+                    <Setter Property="Grid.RowSpan" Value="1" />
+                </Style>
+            </Style>
+
+            <Style Selector="^:inline">
+                <Style Selector="^ /template/ Panel#PART_PaneRoot">
+                    <Setter Property="Grid.RowSpan" Value="1" />
+                    <Setter Property="Grid.Row" Value="0" />
+                    <Setter Property="Height" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.ClosedPaneWidth}" />
                 </Style>
                 <Style Selector="^ /template/ Panel#ContentRoot">
                     <Setter Property="Grid.Row" Value="1" />
@@ -353,8 +596,7 @@
                     <Grid Name="Container" Background="{TemplateBinding Background}">
                         <Grid.RowDefinitions>
                             <RowDefinition Height="*" />
-                            <RowDefinition
-                                Height="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.PaneColumnGridLength}" />
+                            <RowDefinition Height="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.PaneColumnGridLength}" />
                         </Grid.RowDefinitions>
 
                         <Panel
@@ -388,8 +630,7 @@
 
             <Style Selector="^:overlay">
                 <Style Selector="^ /template/ Panel#PART_PaneRoot">
-                    <Setter Property="Height"
-                            Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.ClosedPaneWidth}" />
+                    <Setter Property="Height" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.ClosedPaneWidth}" />
                     <Setter Property="Grid.RowSpan" Value="2" />
                     <Setter Property="Grid.Row" Value="1" />
                 </Style>
@@ -403,8 +644,7 @@
                 <Style Selector="^ /template/ Panel#PART_PaneRoot">
                     <Setter Property="Grid.RowSpan" Value="1" />
                     <Setter Property="Grid.Row" Value="1" />
-                    <Setter Property="Height"
-                            Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.ClosedPaneWidth}" />
+                    <Setter Property="Height" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.ClosedPaneWidth}" />
                 </Style>
                 <Style Selector="^ /template/ Panel#ContentRoot">
                     <Setter Property="Grid.Row" Value="0" />
@@ -416,8 +656,7 @@
                 <Style Selector="^ /template/ Panel#PART_PaneRoot">
                     <Setter Property="Grid.RowSpan" Value="2" />
                     <Setter Property="Grid.Row" Value="1" />
-                    <Setter Property="Height"
-                            Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.ClosedPaneWidth}" />
+                    <Setter Property="Height" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.ClosedPaneWidth}" />
                 </Style>
                 <Style Selector="^ /template/ Panel#ContentRoot">
                     <Setter Property="Grid.Row" Value="0" />
@@ -429,8 +668,7 @@
                 <Style Selector="^ /template/ Panel#PART_PaneRoot">
                     <Setter Property="Grid.RowSpan" Value="1" />
                     <Setter Property="Grid.Row" Value="1" />
-                    <Setter Property="Height"
-                            Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.ClosedPaneWidth}" />
+                    <Setter Property="Height" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.ClosedPaneWidth}" />
                 </Style>
                 <Style Selector="^ /template/ Panel#ContentRoot">
                     <Setter Property="Grid.Row" Value="0" />
@@ -449,8 +687,7 @@
                             Duration="{StaticResource SplitViewPaneAnimationOpenDuration}" />
                     </Transitions>
                 </Setter>
-                <Setter Property="Height"
-                        Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=OpenPaneLength}" />
+                <Setter Property="Height" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=OpenPaneLength}" />
             </Style>
             <Style Selector="^ /template/ Rectangle#LightDismissLayer">
                 <Setter Property="Transitions">
@@ -475,8 +712,7 @@
                             Duration="{StaticResource SplitViewPaneAnimationCloseDuration}" />
                     </Transitions>
                 </Setter>
-                <Setter Property="Height"
-                        Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.ClosedPaneWidth}" />
+                <Setter Property="Height" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.ClosedPaneWidth}" />
             </Style>
             <Style Selector="^ /template/ Rectangle#LightDismissLayer">
                 <Setter Property="Transitions">

src/Semi.Avalonia/Controls/TextBox.axaml

@@ -28,7 +28,6 @@
         <Setter Property="BorderThickness" Value="{DynamicResource TextBoxBorderThickness}" />
         <Setter Property="BackgroundSizing" Value="OuterBorderEdge" />
         <Setter Property="CornerRadius" Value="{DynamicResource TextBoxDefaultCornerRadius}" />
-        <Setter Property="Cursor" Value="Ibeam" />
         <Setter Property="CaretBrush" Value="{DynamicResource TextBoxTextCaretBrush}" />
         <Setter Property="Padding" Value="{DynamicResource TextBoxContentPadding}" />
         <Setter Property="MinHeight" Value="{DynamicResource TextBoxDefaultHeight}" />
@@ -96,6 +95,11 @@
                                         TextAlignment="{TemplateBinding TextAlignment}"
                                         TextWrapping="{TemplateBinding TextWrapping}" />
                                 </Panel>
+                                <ScrollViewer.Styles>
+                                    <Style Selector="ScrollContentPresenter#PART_ContentPresenter">
+                                        <Setter Property="Cursor" Value="Ibeam" />
+                                    </Style>
+                                </ScrollViewer.Styles>
                             </ScrollViewer>
                             <Button
                                 Name="PART_ClearButton"

src/Semi.Avalonia/Controls/_index.axaml

@@ -22,7 +22,6 @@
         <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" />

src/Semi.Avalonia/Locale/_index.cs

@@ -6,12 +6,24 @@ public class de_de : ResourceDictionary;
 
 public class en_us : ResourceDictionary;
 
+public class en_gb : ResourceDictionary;
+
+public class it_it : ResourceDictionary;
+
+public class it_ch : ResourceDictionary;
+
+public class nl_be : ResourceDictionary;
+
+public class nl_nl : ResourceDictionary;
+
 public class es_es : ResourceDictionary;
 
 public class fr_fr : ResourceDictionary;
 
 public class ja_jp : ResourceDictionary;
 
+public class ko_kr : ResourceDictionary;
+
 public class pl_pl : ResourceDictionary;
 
 public class ru_ru : ResourceDictionary;
@@ -20,4 +32,4 @@ public class uk_ua : ResourceDictionary;
 
 public class zh_cn : ResourceDictionary;
 
-public class zh_tw : ResourceDictionary;
+public class zh_tw : ResourceDictionary;

src/Semi.Avalonia/Locale/en-gb.axaml

@@ -0,0 +1,27 @@
+<ResourceDictionary
+    x:Class="Semi.Avalonia.Locale.en_gb"
+    xmlns="https://github.com/avaloniaui"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+    <!--  DatePicker  -->
+    <x:String x:Key="STRING_DATEPICKER_DAY_TEXT">day</x:String>
+    <x:String x:Key="STRING_DATEPICKER_MONTH_TEXT">month</x:String>
+    <x:String x:Key="STRING_DATEPICKER_YEAR_TEXT">year</x:String>
+    <!--  TimePicker  -->
+    <x:String x:Key="STRING_TIMEPICKER_HOUR_TEXT">hour</x:String>
+    <x:String x:Key="STRING_TIMEPICKER_MINUTE_TEXT">minute</x:String>
+    <x:String x:Key="STRING_TIMEPICKER_SECOND_TEXT">second</x:String>
+    <!-- TextBox/SelectableTextBox flyout -->
+    <x:String x:Key="STRING_MENU_CUT">Cut</x:String>
+    <x:String x:Key="STRING_MENU_COPY">Copy</x:String>
+    <x:String x:Key="STRING_MENU_PASTE">Paste</x:String>
+    <!--  ManagedFileChooser  -->
+    <x:String x:Key="STRING_CHOOSER_FILE_NAME">File name</x:String>
+    <x:String x:Key="STRING_CHOOSER_SHOW_HIDDEN_FILES">Show hidden files</x:String>
+    <x:String x:Key="STRING_CHOOSER_DIALOG_OK">OK</x:String>
+    <x:String x:Key="STRING_CHOOSER_DIALOG_CANCEL">Cancel</x:String>
+    <x:String x:Key="STRING_CHOOSER_NAME_COLUMN">Name</x:String>
+    <x:String x:Key="STRING_CHOOSER_DATEMODIFIED_COLUMN">Date Modified</x:String>
+    <x:String x:Key="STRING_CHOOSER_TYPE_COLUMN">Type</x:String>
+    <x:String x:Key="STRING_CHOOSER_SIZE_COLUMN">Size</x:String>
+    <x:String x:Key="STRING_CHOOSER_PROMPT_FILE_ALREADY_EXISTS">{0} already exists. Do you want to replace it?</x:String>
+</ResourceDictionary>

src/Semi.Avalonia/Locale/it-ch.axaml

@@ -0,0 +1,27 @@
+<ResourceDictionary
+    x:Class="Semi.Avalonia.Locale.it_ch"
+    xmlns="https://github.com/avaloniaui"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+    <!--  DatePicker  -->
+    <x:String x:Key="STRING_DATEPICKER_DAY_TEXT">giorno</x:String>
+    <x:String x:Key="STRING_DATEPICKER_MONTH_TEXT">mese</x:String>
+    <x:String x:Key="STRING_DATEPICKER_YEAR_TEXT">anno</x:String>
+    <!--  TimePicker  -->
+    <x:String x:Key="STRING_TIMEPICKER_HOUR_TEXT">ora</x:String>
+    <x:String x:Key="STRING_TIMEPICKER_MINUTE_TEXT">minuto</x:String>
+    <x:String x:Key="STRING_TIMEPICKER_SECOND_TEXT">secondo</x:String>
+    <!-- TextBox/SelectableTextBox flyout -->
+    <x:String x:Key="STRING_MENU_CUT">Taglia</x:String>
+    <x:String x:Key="STRING_MENU_COPY">Copia</x:String>
+    <x:String x:Key="STRING_MENU_PASTE">Incolla</x:String>
+    <!--  ManagedFileChooser  -->
+    <x:String x:Key="STRING_CHOOSER_FILE_NAME">Nome file</x:String>
+    <x:String x:Key="STRING_CHOOSER_SHOW_HIDDEN_FILES">Mostra file nascosti</x:String>
+    <x:String x:Key="STRING_CHOOSER_DIALOG_OK">OK</x:String>
+    <x:String x:Key="STRING_CHOOSER_DIALOG_CANCEL">Annulla</x:String>
+    <x:String x:Key="STRING_CHOOSER_NAME_COLUMN">Nome</x:String>
+    <x:String x:Key="STRING_CHOOSER_DATEMODIFIED_COLUMN">Data Modificata</x:String>
+    <x:String x:Key="STRING_CHOOSER_TYPE_COLUMN">Tipo</x:String>
+    <x:String x:Key="STRING_CHOOSER_SIZE_COLUMN">Dimensione</x:String>
+    <x:String x:Key="STRING_CHOOSER_PROMPT_FILE_ALREADY_EXISTS">{0} è già esistente. Sovrascriverlo?</x:String>
+</ResourceDictionary>

src/Semi.Avalonia/Locale/it-it.axaml

@@ -0,0 +1,27 @@
+<ResourceDictionary
+    x:Class="Semi.Avalonia.Locale.it_it"
+    xmlns="https://github.com/avaloniaui"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+    <!--  DatePicker  -->
+    <x:String x:Key="STRING_DATEPICKER_DAY_TEXT">giorno</x:String>
+    <x:String x:Key="STRING_DATEPICKER_MONTH_TEXT">mese</x:String>
+    <x:String x:Key="STRING_DATEPICKER_YEAR_TEXT">anno</x:String>
+    <!--  TimePicker  -->
+    <x:String x:Key="STRING_TIMEPICKER_HOUR_TEXT">ora</x:String>
+    <x:String x:Key="STRING_TIMEPICKER_MINUTE_TEXT">minuto</x:String>
+    <x:String x:Key="STRING_TIMEPICKER_SECOND_TEXT">secondo</x:String>
+    <!-- TextBox/SelectableTextBox flyout -->
+    <x:String x:Key="STRING_MENU_CUT">Taglia</x:String>
+    <x:String x:Key="STRING_MENU_COPY">Copia</x:String>
+    <x:String x:Key="STRING_MENU_PASTE">Incolla</x:String>
+    <!--  ManagedFileChooser  -->
+    <x:String x:Key="STRING_CHOOSER_FILE_NAME">Nome file</x:String>
+    <x:String x:Key="STRING_CHOOSER_SHOW_HIDDEN_FILES">Mostra file nascosti</x:String>
+    <x:String x:Key="STRING_CHOOSER_DIALOG_OK">OK</x:String>
+    <x:String x:Key="STRING_CHOOSER_DIALOG_CANCEL">Annulla</x:String>
+    <x:String x:Key="STRING_CHOOSER_NAME_COLUMN">Nome</x:String>
+    <x:String x:Key="STRING_CHOOSER_DATEMODIFIED_COLUMN">Data Modificata</x:String>
+    <x:String x:Key="STRING_CHOOSER_TYPE_COLUMN">Tipo</x:String>
+    <x:String x:Key="STRING_CHOOSER_SIZE_COLUMN">Dimensione</x:String>
+    <x:String x:Key="STRING_CHOOSER_PROMPT_FILE_ALREADY_EXISTS">{0} è già esistente. Sovrascriverlo?</x:String>
+</ResourceDictionary>

src/Semi.Avalonia/Locale/ko-kr.axaml

@@ -0,0 +1,27 @@
+<ResourceDictionary
+    x:Class="Semi.Avalonia.Locale.ko_kr"
+    xmlns="https://github.com/avaloniaui"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+    <!-- DatePicker -->
+    <x:String x:Key="STRING_DATEPICKER_DAY_TEXT">일</x:String>
+    <x:String x:Key="STRING_DATEPICKER_MONTH_TEXT">월</x:String>
+    <x:String x:Key="STRING_DATEPICKER_YEAR_TEXT">년</x:String>
+    <!-- TimePicker -->
+    <x:String x:Key="STRING_TIMEPICKER_HOUR_TEXT">시</x:String>
+    <x:String x:Key="STRING_TIMEPICKER_MINUTE_TEXT">분</x:String>
+    <x:String x:Key="STRING_TIMEPICKER_SECOND_TEXT">초</x:String>
+    <!-- TextBox/SelectableTextBox flyout -->
+    <x:String x:Key="STRING_MENU_CUT">잘라내기</x:String>
+    <x:String x:Key="STRING_MENU_COPY">복사</x:String>
+    <x:String x:Key="STRING_MENU_PASTE">붙여넣기</x:String>
+    <!-- ManagedFileChooser -->
+    <x:String x:Key="STRING_CHOOSER_FILE_NAME">파일 이름</x:String>
+    <x:String x:Key="STRING_CHOOSER_SHOW_HIDDEN_FILES">숨긴 파일 표시</x:String>
+    <x:String x:Key="STRING_CHOOSER_DIALOG_OK">확인</x:String>
+    <x:String x:Key="STRING_CHOOSER_DIALOG_CANCEL">취소</x:String>
+    <x:String x:Key="STRING_CHOOSER_NAME_COLUMN">이름</x:String>
+    <x:String x:Key="STRING_CHOOSER_DATEMODIFIED_COLUMN">수정된 날짜</x:String>
+    <x:String x:Key="STRING_CHOOSER_TYPE_COLUMN">유형</x:String>
+    <x:String x:Key="STRING_CHOOSER_SIZE_COLUMN">크기</x:String>
+    <x:String x:Key="STRING_CHOOSER_PROMPT_FILE_ALREADY_EXISTS">{0}이(가) 이미 있습니다. 바꾸시겠습니까?</x:String>
+</ResourceDictionary>

src/Semi.Avalonia/Locale/nl-be.axaml

@@ -0,0 +1,27 @@
+<ResourceDictionary
+    x:Class="Semi.Avalonia.Locale.nl_be"
+    xmlns="https://github.com/avaloniaui"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+    <!-- DatePicker -->
+    <x:String x:Key="STRING_DATEPICKER_DAY_TEXT">dag</x:String>
+    <x:String x:Key="STRING_DATEPICKER_MONTH_TEXT">maand</x:String>
+    <x:String x:Key="STRING_DATEPICKER_YEAR_TEXT">jaar</x:String>
+    <!-- TimePicker -->
+    <x:String x:Key="STRING_TIMEPICKER_HOUR_TEXT">uur</x:String>
+    <x:String x:Key="STRING_TIMEPICKER_MINUTE_TEXT">minuut</x:String>
+    <x:String x:Key="STRING_TIMEPICKER_SECOND_TEXT">seconde</x:String>
+    <!-- TextBox/SelectableTextBox flyout -->
+    <x:String x:Key="STRING_MENU_CUT">Knippen</x:String>
+    <x:String x:Key="STRING_MENU_COPY">Kopiëren</x:String>
+    <x:String x:Key="STRING_MENU_PASTE">Plakken</x:String>
+    <!-- ManagedFileChooser -->
+    <x:String x:Key="STRING_CHOOSER_FILE_NAME">Bestandsnaam</x:String>
+    <x:String x:Key="STRING_CHOOSER_SHOW_HIDDEN_FILES">Toon verborgen bestanden</x:String>
+    <x:String x:Key="STRING_CHOOSER_DIALOG_OK">OK</x:String>
+    <x:String x:Key="STRING_CHOOSER_DIALOG_CANCEL">Annuleren</x:String>
+    <x:String x:Key="STRING_CHOOSER_NAME_COLUMN">Naam</x:String>
+    <x:String x:Key="STRING_CHOOSER_DATEMODIFIED_COLUMN">Datum gewijzigd</x:String>
+    <x:String x:Key="STRING_CHOOSER_TYPE_COLUMN">Type</x:String>
+    <x:String x:Key="STRING_CHOOSER_SIZE_COLUMN">Grootte</x:String>
+    <x:String x:Key="STRING_CHOOSER_PROMPT_FILE_ALREADY_EXISTS">{0} bestaat al. Wilt u het vervangen?</x:String>
+</ResourceDictionary>

src/Semi.Avalonia/Locale/nl-nl.axaml

@@ -0,0 +1,27 @@
+<ResourceDictionary
+    x:Class="Semi.Avalonia.Locale.nl_nl"
+    xmlns="https://github.com/avaloniaui"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+    <!-- DatePicker -->
+    <x:String x:Key="STRING_DATEPICKER_DAY_TEXT">dag</x:String>
+    <x:String x:Key="STRING_DATEPICKER_MONTH_TEXT">maand</x:String>
+    <x:String x:Key="STRING_DATEPICKER_YEAR_TEXT">jaar</x:String>
+    <!-- TimePicker -->
+    <x:String x:Key="STRING_TIMEPICKER_HOUR_TEXT">uur</x:String>
+    <x:String x:Key="STRING_TIMEPICKER_MINUTE_TEXT">minuut</x:String>
+    <x:String x:Key="STRING_TIMEPICKER_SECOND_TEXT">seconde</x:String>
+    <!-- TextBox/SelectableTextBox flyout -->
+    <x:String x:Key="STRING_MENU_CUT">Knippen</x:String>
+    <x:String x:Key="STRING_MENU_COPY">Kopiëren</x:String>
+    <x:String x:Key="STRING_MENU_PASTE">Plakken</x:String>
+    <!-- ManagedFileChooser -->
+    <x:String x:Key="STRING_CHOOSER_FILE_NAME">Bestandsnaam</x:String>
+    <x:String x:Key="STRING_CHOOSER_SHOW_HIDDEN_FILES">Toon verborgen bestanden</x:String>
+    <x:String x:Key="STRING_CHOOSER_DIALOG_OK">OK</x:String>
+    <x:String x:Key="STRING_CHOOSER_DIALOG_CANCEL">Annuleren</x:String>
+    <x:String x:Key="STRING_CHOOSER_NAME_COLUMN">Naam</x:String>
+    <x:String x:Key="STRING_CHOOSER_DATEMODIFIED_COLUMN">Datum gewijzigd</x:String>
+    <x:String x:Key="STRING_CHOOSER_TYPE_COLUMN">Type</x:String>
+    <x:String x:Key="STRING_CHOOSER_SIZE_COLUMN">Grootte</x:String>
+    <x:String x:Key="STRING_CHOOSER_PROMPT_FILE_ALREADY_EXISTS">{0} bestaat al. Wilt u het vervangen?</x:String>
+</ResourceDictionary>

src/Semi.Avalonia/Semi.Avalonia.csproj

@@ -4,7 +4,7 @@
 
     <PropertyGroup>
         <Title>Semi.Avalonia</Title>
-        <PackageReleaseNotes>Update to Semi.Avalonia 11.2.1.9</PackageReleaseNotes>
+        <PackageReleaseNotes>Update to Semi.Avalonia 11.3.7</PackageReleaseNotes>
     </PropertyGroup>
 
     <PropertyGroup Condition="$([MSBuild]::IsTargetFrameworkCompatible('$(TargetFramework)', 'net8.0'))">
@@ -13,7 +13,6 @@
 
     <ItemGroup>
         <PackageReference Include="Avalonia" Version="$(AvaloniaVersion)"/>
-        <PackageReference Include="Irihi.Avalonia.Shared" Version="0.3.0"/>
     </ItemGroup>
 
 </Project>

src/Semi.Avalonia/SemiTheme.axaml.cs

@@ -15,7 +15,13 @@ public class SemiTheme : Styles
     {
         { new CultureInfo("zh-cn"), new zh_cn() },
         { new CultureInfo("en-us"), new en_us() },
+        { new CultureInfo("en-gb"), new en_gb() },
+        { new CultureInfo("it-it"), new it_it() },
+        { new CultureInfo("it-ch"), new it_ch() },
+        { new CultureInfo("nl-be"), new nl_be() },
+        { new CultureInfo("nl-nl"), new nl_nl() },
         { new CultureInfo("ja-jp"), new ja_jp() },
+        { new CultureInfo("ko-kr"), new ko_kr() },
         { new CultureInfo("uk-ua"), new uk_ua() },
         { new CultureInfo("ru-ru"), new ru_ru() },
         { new CultureInfo("zh-tw"), new zh_tw() },
@@ -29,11 +35,6 @@ public class SemiTheme : Styles
 
     private CultureInfo? _locale;
 
-    public SemiTheme(IServiceProvider? provider = null)
-    {
-        AvaloniaXamlLoader.Load(provider, this);
-    }
-
     public static ThemeVariant Aquatic => new(nameof(Aquatic), ThemeVariant.Dark);
     public static ThemeVariant Desert => new(nameof(Desert), ThemeVariant.Light);
     public static ThemeVariant Dusk => new(nameof(Dusk), ThemeVariant.Dark);
@@ -107,4 +108,4 @@ public class SemiTheme : Styles
             element.Resources[kv.Key] = kv.Value;
         }
     }
-}
+}