misc:try

feat: add VerticalSplitView control theme with responsive styles

.github/FUNDING.yml

@@ -0,0 +1,15 @@
+# These are supported funding model platforms
+
+github: # Replace with up to 4 GitHub Sponsors-enabled usernames e.g., [user1, user2]
+patreon: # Replace with a single Patreon username
+open_collective: semiavalonia
+ko_fi: # Replace with a single Ko-fi username
+tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel
+community_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry
+liberapay: # Replace with a single Liberapay username
+issuehunt: # Replace with a single IssueHunt username
+lfx_crowdfunding: # Replace with a single LFX Crowdfunding project-name e.g., cloud-foundry
+polar: # Replace with a single Polar username
+buy_me_a_coffee: # Replace with a single Buy Me a Coffee username
+thanks_dev: # Replace with a single thanks.dev username
+custom: # Replace with up to 4 custom sponsorship URLs e.g., ['link1', 'link2']

.github/workflows/pack-nightly.yml

@@ -21,7 +21,7 @@ on:
       Semi_Avalonia_DataGrid:
         description: 'Pack Semi.Avalonia.DataGrid'
         required: true
-        default: 'true'
+        default: 'false'
         type: boolean
       Semi_Avalonia_TreeDataGrid:
         description: 'Pack Semi.Avalonia.TreeDataGrid'

.github/workflows/pack.yml

@@ -16,7 +16,7 @@ on:
       Semi_Avalonia_DataGrid:
         description: 'Pack Semi.Avalonia.DataGrid'
         required: true
-        default: 'true'
+        default: 'false'
         type: boolean
       Semi_Avalonia_TreeDataGrid:
         description: 'Pack Semi.Avalonia.TreeDataGrid'

.github/workflows/release-tag.yml

@@ -20,9 +20,6 @@ jobs:
       - name: Pack Semi.Avalonia.ColorPicker
         run: dotnet pack ./src/Semi.Avalonia.ColorPicker -o ./nugets
 
-      - name: Pack Semi.Avalonia.DataGrid
-        run: dotnet pack ./src/Semi.Avalonia.DataGrid -o ./nugets
-
       - name: Upload a Build Artifact
         uses: actions/upload-artifact@v4
         with:

README.md

@@ -48,9 +48,9 @@ dotnet add package Semi.Avalonia.TreeDataGrid
 
 ```xaml
 <Application.Styles>
-    <StyleInclude Source="avares://Semi.Avalonia.ColorPicker/Index.axaml" />
+    <semi:ColorPickerSemiTheme />
-    <StyleInclude Source="avares://Semi.Avalonia.DataGrid/Index.axaml" />
+    <semi:DataGridSemiTheme />
-    <StyleInclude Source="avares://Semi.Avalonia.TreeDataGrid/Index.axaml" />
+    <semi:TreeDataGridSemiTheme />
 </Application.Styles>
 ```
 

README_CN.md

@@ -48,9 +48,9 @@ dotnet add package Semi.Avalonia.TreeDataGrid
 
 ```xaml
 <Application.Styles>
-    <StyleInclude Source="avares://Semi.Avalonia.ColorPicker/Index.axaml" />
+    <semi:ColorPickerSemiTheme />
-    <StyleInclude Source="avares://Semi.Avalonia.DataGrid/Index.axaml" />
+    <semi:DataGridSemiTheme />
-    <StyleInclude Source="avares://Semi.Avalonia.TreeDataGrid/Index.axaml" />
+    <semi:TreeDataGridSemiTheme />
 </Application.Styles>
 ```
 

Semi.Avalonia.sln

@@ -39,8 +39,6 @@ Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "Semi.Avalonia.Demo.Drm", "d
 EndProject
 Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "Semi.Avalonia.TreeDataGrid", "src\Semi.Avalonia.TreeDataGrid\Semi.Avalonia.TreeDataGrid.csproj", "{398D2998-0835-41F5-99A3-608CAB8051E2}"
 EndProject
-Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "Semi.Avalonia.TreeDataGrid.Demo", "demo\Semi.Avalonia.TreeDataGrid.Demo\Semi.Avalonia.TreeDataGrid.Demo.csproj", "{6178B545-4BB6-458C-A27C-EE11F3885D38}"
-EndProject
 Global
 	GlobalSection(SolutionConfigurationPlatforms) = preSolution
 		Debug|Any CPU = Debug|Any CPU
@@ -84,10 +82,6 @@ Global
 		{398D2998-0835-41F5-99A3-608CAB8051E2}.Debug|Any CPU.Build.0 = Debug|Any CPU
 		{398D2998-0835-41F5-99A3-608CAB8051E2}.Release|Any CPU.ActiveCfg = Release|Any CPU
 		{398D2998-0835-41F5-99A3-608CAB8051E2}.Release|Any CPU.Build.0 = Release|Any CPU
-		{6178B545-4BB6-458C-A27C-EE11F3885D38}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
-		{6178B545-4BB6-458C-A27C-EE11F3885D38}.Debug|Any CPU.Build.0 = Debug|Any CPU
-		{6178B545-4BB6-458C-A27C-EE11F3885D38}.Release|Any CPU.ActiveCfg = Release|Any CPU
-		{6178B545-4BB6-458C-A27C-EE11F3885D38}.Release|Any CPU.Build.0 = Release|Any CPU
 	EndGlobalSection
 	GlobalSection(SolutionProperties) = preSolution
 		HideSolutionNode = FALSE
@@ -98,7 +92,6 @@ Global
 		{D789AEDB-EBDF-4450-8E8E-B4A03FB257B0} = {43091528-9509-43CB-A003-9C5C11E96DD6}
 		{0C81FC1C-5D2D-478A-9876-923A0C85EC2F} = {43091528-9509-43CB-A003-9C5C11E96DD6}
 		{86D93406-412A-4429-93B2-92AAD0407784} = {43091528-9509-43CB-A003-9C5C11E96DD6}
-		{6178B545-4BB6-458C-A27C-EE11F3885D38} = {43091528-9509-43CB-A003-9C5C11E96DD6}
 	EndGlobalSection
 	GlobalSection(ExtensibilityGlobals) = postSolution
 		SolutionGuid = {7CA41ED3-2CED-40CC-AA21-28C3B42B1E86}

demo/Directory.Build.props

@@ -1,6 +1,7 @@
 <Project>
     <PropertyGroup>
-        <AvaloniaVersion>11.2.3</AvaloniaVersion>
+        <AvaloniaVersion>11.2.5</AvaloniaVersion>
+        <DataGridVersion>11.2.5</DataGridVersion>
         <CommunityToolkitVersion>8.4.0</CommunityToolkitVersion>
     </PropertyGroup>
 </Project>

demo/Semi.Avalonia.Demo/App.axaml

@@ -7,18 +7,16 @@
     xmlns:semi="https://irihi.tech/semi"
     xmlns:viewModels="clr-namespace:Semi.Avalonia.Demo.ViewModels">
     <Application.Styles>
-        <!-- You can still reference in old way.  -->
-        <!-- <StyleInclude Source="avares://Semi.Avalonia/Index.axaml" /> -->
         <semi:SemiTheme Locale="zh-CN" />
         <semi:SemiPopupAnimations />
-        <StyleInclude Source="avares://Semi.Avalonia.DataGrid/Index.axaml" />
+        <semi:ColorPickerSemiTheme />
-        <StyleInclude Source="avares://Semi.Avalonia.ColorPicker/Index.axaml" />
+        <semi:DataGridSemiTheme />
+        <semi:TreeDataGridSemiTheme />
     </Application.Styles>
     <Application.Resources>
         <ResourceDictionary>
             <ResourceDictionary.MergedDictionaries>
-                <ResourceInclude
+                <ResourceInclude Source="Themes/_index.axaml" />
-                    Source="Themes/_index.axaml" />
             </ResourceDictionary.MergedDictionaries>
         </ResourceDictionary>
     </Application.Resources>

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

@@ -3,15 +3,13 @@ using System.Collections.Generic;
 using System.Globalization;
 using Avalonia;
 using Avalonia.Data.Converters;
-using Avalonia.Media;
 using Avalonia.Metadata;
 
-namespace Semi.Avalonia.TreeDataGrid.Demo.Converters;
+namespace Semi.Avalonia.Demo.Converters;
 
-public class FileIconConverter: IMultiValueConverter
+public class FileIconConverter : IMultiValueConverter
 {
-    [Content] 
+    [Content] public IDictionary<string, object?> Items { get; } = new Dictionary<string, object?>();
-    public Dictionary<string, PathGeometry> Items { get; set; } = new Dictionary<string, PathGeometry>();
 
     public object? Convert(IList<object?> values, Type targetType, object? parameter, CultureInfo culture)
     {
@@ -21,8 +19,10 @@ public class FileIconConverter: IMultiValueConverter
             {
                 return Items["file"];
             }
+
             return isOpen ? Items["folderOpen"] : Items["folderClosed"];
         }
+
         return AvaloniaProperty.UnsetValue;
     }
 }

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

@@ -2,8 +2,7 @@
     x:Class="Semi.Avalonia.Demo.Pages.ColorPickerDemo"
     xmlns="https://github.com/avaloniaui"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-    xmlns:colorPicker="clr-namespace:Semi.Avalonia.ColorPicker;assembly=Semi.Avalonia.ColorPicker"
+    xmlns:semi="https://irihi.tech/semi"
-    xmlns:controls="using:Avalonia.Controls"
     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
     d:DesignHeight="1450"
@@ -11,18 +10,15 @@
     mc:Ignorable="d">
     <ScrollViewer>
         <StackPanel Spacing="20">
-            <StackPanel
+            <StackPanel Orientation="Horizontal" Spacing="20">
-                VerticalAlignment="Top"
-                Orientation="Horizontal"
-                Spacing="20">
                 <ColorView Name="Test" ColorSpectrumShape="Ring" />
                 <ColorView ColorSpectrumShape="Box" />
                 <ColorView Palette="{DynamicResource SemiColorPalette}" />
             </StackPanel>
-            <StackPanel VerticalAlignment="Top" Orientation="Horizontal">
+            <StackPanel Orientation="Horizontal">
                 <ColorView
                     Name="SimpleColorViewTest"
-                    HsvColor="hsv(120,11%,10%)"
+                    HsvColor="hsv(180,80%,70%)"
                     IsAlphaVisible="True"
                     Theme="{StaticResource SimpleColorView}" />
                 <StackPanel>
@@ -30,63 +26,55 @@
                     <TextBlock Text="{Binding #SimpleColorViewTest.Color}" />
                 </StackPanel>
             </StackPanel>
-            <StackPanel HorizontalAlignment="Left" Orientation="Horizontal">
+            <StackPanel Orientation="Horizontal" Spacing="8">
-                <ColorPicker Margin="8" ColorSpectrumShape="Ring">
+                <ColorPicker ColorSpectrumShape="Ring">
                     <ColorPicker.Palette>
-                        <controls:FlatHalfColorPalette />
+                        <FlatHalfColorPalette />
                     </ColorPicker.Palette>
                 </ColorPicker>
-                <ColorPicker Margin="8" ColorSpectrumShape="Box">
+                <ColorPicker ColorSpectrumShape="Box">
                     <ColorPicker.Palette>
-                        <colorPicker:SemiColorLightPalette />
+                        <semi:SemiColorLightPalette />
                     </ColorPicker.Palette>
                 </ColorPicker>
-
                 <ColorPicker
-                    Margin="8"
+                    Theme="{DynamicResource HexColorPicker}"
-                    ColorSpectrumShape="Box"
+                    ColorSpectrumShape="Box">
-                    Theme="{DynamicResource HexColorPicker}">
                     <ColorPicker.Palette>
-                        <colorPicker:SemiColorLightPalette />
+                        <semi:SemiColorLightPalette />
                     </ColorPicker.Palette>
                 </ColorPicker>
             </StackPanel>
-            <StackPanel HorizontalAlignment="Left" >
+            <StackPanel HorizontalAlignment="Left">
-                <TextBlock Text="Use Style to customize button"></TextBlock>
+                <TextBlock Text="Use Style to customize button" />
                 <ColorPicker
                     Margin="8"
-                    Width="32"
+                    MinWidth="32"
-                    HsvColor="hsv(120,11%,10%)"
+                    HsvColor="hsv(180,80%,70%)">
-                    >
                     <ColorPicker.Content>
                         <Border
                             Margin="1"
-                            HorizontalAlignment="Stretch"
+                            Background="{Binding $parent[ColorPicker].HsvColor, Converter={StaticResource ToBrushConverter}}"
-                            VerticalAlignment="Stretch"
-                            Background="{Binding $parent[ColorPicker].HsvColor, 
-                                                     Converter={StaticResource ToBrushConverter}}"
                             CornerRadius="1" />
                     </ColorPicker.Content>
                     <ColorPicker.Styles>
                         <Style Selector="DropDownButton">
-                            <Setter Property="Padding" Value="0"/>
+                            <Setter Property="Padding" Value="0" />
                             <Style Selector="^ /template/ PathIcon">
-                                <Setter Property="IsVisible" Value="False"/>
+                                <Setter Property="IsVisible" Value="False" />
                             </Style>
                         </Style>
                     </ColorPicker.Styles>
                 </ColorPicker>
-
             </StackPanel>
-            <StackPanel HorizontalAlignment="Left" Orientation="Horizontal">
+
+            <StackPanel Orientation="Horizontal" Spacing="8">
                 <ColorPicker
-                    Margin="8"
+                    Theme="{StaticResource SimpleColorPicker}"
-                    HsvColor="hsv(120,11%,10%)"
+                    HsvColor="hsv(180,80%,70%)" />
-                    Theme="{StaticResource SimpleColorPicker}" />
                 <ColorPicker
-                    Margin="8"
+                    Theme="{StaticResource HexSimpleColorPicker}"
-                    HsvColor="hsv(120,11%,10%)"
+                    HsvColor="hsv(180,80%,70%)" />
-                    Theme="{StaticResource HexSimpleColorPicker}" />
             </StackPanel>
         </StackPanel>
     </ScrollViewer>

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

@@ -3,7 +3,6 @@
     xmlns="https://github.com/avaloniaui"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
-    xmlns:local="using:Semi.Avalonia.Demo.Pages"
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
     xmlns:vm="clr-namespace:Semi.Avalonia.Demo.ViewModels;assembly=Semi.Avalonia.Demo"
     d:DesignHeight="450"
@@ -15,8 +14,9 @@
         <TabItem Header="DataGrid">
            <Grid RowDefinitions="Auto, *">
                <StackPanel Grid.Row="0" Orientation="Horizontal">
-                   <ToggleSwitch Content="Disable" Name="DisableToggle" />
+                   <ToggleSwitch Content="Enable" Name="enable" IsChecked="True" />
-                   <ToggleSwitch Content="ScrollViewerHide" Name="ScrollViewerHide" />
+                   <ToggleSwitch Content="Inset Content" Name="inset" />
+                   <ToggleSwitch Content="ScrollBar Auto Hide" Name="autohide" />
                </StackPanel>
                <DataGrid Grid.Row="1"
                          Margin="8"
@@ -25,8 +25,9 @@
                          CanUserSortColumns="True"
                          HeadersVisibility="All"
                          IsReadOnly="True"
-                         ScrollViewer.AllowAutoHide="{Binding #ScrollViewerHide.IsChecked}"
+                         Classes.InsetContent="{Binding #inset.IsChecked}"
-                         IsEnabled="{Binding #DisableToggle.IsChecked}"
+                         ScrollViewer.AllowAutoHide="{Binding #autohide.IsChecked}"
+                         IsEnabled="{Binding #enable.IsChecked}"
                          ItemsSource="{Binding GridData1}">
                    <DataGrid.Columns>
                        <DataGridTextColumn

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

@@ -119,11 +119,11 @@
                     <StackPanel Spacing="20">
                         <TextBlock Text="Theme: CheckGroupListBox"/>
                         <ListBox
-                            SelectionMode="Multiple"
+                            SelectionMode="Multiple,Toggle"
                             Theme="{DynamicResource CheckGroupListBox}"
                             ItemsSource="{Binding $parent[local:ListBoxDemo].Items}" />
                         <ListBox Theme="{DynamicResource CheckGroupListBox}"
-                                 SelectionMode="Multiple"
+                                 SelectionMode="Multiple,Toggle"
                                  IsEnabled="False">
                             <ListBoxItem IsSelected="True">Avalonia</ListBoxItem>
                             <ListBoxItem>WPF</ListBoxItem>
@@ -131,11 +131,11 @@
 
                         <TextBlock Text="Theme: CardCheckGroupListBox"/>
                         <ListBox
-                            SelectionMode="Multiple"
+                            SelectionMode="Multiple,Toggle"
                             Theme="{DynamicResource CardCheckGroupListBox}"
                             ItemsSource="{Binding $parent[local:ListBoxDemo].Items}" />
                         <ListBox Theme="{DynamicResource CardCheckGroupListBox}"
-                                 SelectionMode="Multiple"
+                                 SelectionMode="Multiple,Toggle"
                                  IsEnabled="False">
                             <ListBoxItem>Avalonia</ListBoxItem>
                             <ListBoxItem IsSelected="True">WPF</ListBoxItem>

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

@@ -41,9 +41,9 @@
                     <Image.Source>
                         <DrawingImage>
                             <DrawingGroup>
-                                <GeometryDrawing Brush="#8B44AC" Geometry="M74.8535 85.8231C75.0263 85.8231 75.1954 85.8231 75.3679 85.8231C80.7347 85.8231 85.1439 81.8027 85.7614 76.6019L85.8357 41.7604C85.2255 18.5931 66.2537 0 42.9393 0C19.2399 0 0.02771 19.2122 0.02771 42.9116C0.02771 66.3573 18.8309 85.418 42.18 85.8231H74.8535Z" />
+                                <GeometryDrawing Brush="#0D6EFD" Geometry="M74.8535 85.8231C75.0263 85.8231 75.1954 85.8231 75.3679 85.8231C80.7347 85.8231 85.1439 81.8027 85.7614 76.6019L85.8357 41.7604C85.2255 18.5931 66.2537 0 42.9393 0C19.2399 0 0.02771 19.2122 0.02771 42.9116C0.02771 66.3573 18.8309 85.418 42.18 85.8231H74.8535Z" />
-                                <GeometryDrawing Brush="#F9F9FB" Geometry="M43.0585 14.6143C29.5513 14.6143 18.2555 24.082 15.4454 36.7432C18.1357 37.4975 20.1087 39.9679 20.1087 42.8992C20.1087 45.8305 18.1357 48.301 15.4454 49.0552C18.2555 61.7164 29.5513 71.1842 43.0585 71.1842C47.9754 71.1842 52.5993 69.9296 56.6276 67.723V70.9926H71.3435V44.0716C71.3569 43.7138 71.3435 43.2603 71.3435 42.8992C71.3435 27.2779 58.6799 14.6143 43.0585 14.6143ZM29.5096 42.8992C29.5096 35.4164 35.5757 29.3503 43.0585 29.3503C50.5414 29.3503 56.6074 35.4164 56.6074 42.8992C56.6074 50.3821 50.5414 56.4481 43.0585 56.4481C35.5757 56.4481 29.5096 50.3821 29.5096 42.8992Z" />
+                                <GeometryDrawing Brush="White" Geometry="M43.0585 14.6143C29.5513 14.6143 18.2555 24.082 15.4454 36.7432C18.1357 37.4975 20.1087 39.9679 20.1087 42.8992C20.1087 45.8305 18.1357 48.301 15.4454 49.0552C18.2555 61.7164 29.5513 71.1842 43.0585 71.1842C47.9754 71.1842 52.5993 69.9296 56.6276 67.723V70.9926H71.3435V44.0716C71.3569 43.7138 71.3435 43.2603 71.3435 42.8992C71.3435 27.2779 58.6799 14.6143 43.0585 14.6143ZM29.5096 42.8992C29.5096 35.4164 35.5757 29.3503 43.0585 29.3503C50.5414 29.3503 56.6074 35.4164 56.6074 42.8992C56.6074 50.3821 50.5414 56.4481 43.0585 56.4481C35.5757 56.4481 29.5096 50.3821 29.5096 42.8992Z" />
-                                <GeometryDrawing Brush="#F9F9FB" Geometry="M18.105 42.8805C18.105 45.3803 16.0785 47.4068 13.5787 47.4068C11.0789 47.4068 9.05237 45.3803 9.05237 42.8805C9.05237 40.3807 11.0789 38.3542 13.5787 38.3542C16.0785 38.3542 18.105 40.3807 18.105 42.8805Z" />
+                                <GeometryDrawing Brush="White" Geometry="M18.105 42.8805C18.105 45.3803 16.0785 47.4068 13.5787 47.4068C11.0789 47.4068 9.05237 45.3803 9.05237 42.8805C9.05237 40.3807 11.0789 38.3542 13.5787 38.3542C16.0785 38.3542 18.105 40.3807 18.105 42.8805Z" />
                             </DrawingGroup>
                         </DrawingImage>
                     </Image.Source>
@@ -234,7 +234,7 @@
                             VerticalAlignment="Top"
                             Palette="{DynamicResource SemiColorPalette}"
                             SelectedIndex="2"
-                            Color="#8B44AC" />
+                            Color="#0D6EFD" />
                         <StackPanel Width="300" Margin="8">
                             <StackPanel Orientation="Horizontal">
                                 <Slider

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

@@ -9,41 +9,39 @@ public partial class Overview : UserControl
         InitializeComponent();
     }
 
-    public string MainInstall { get; set; } = "dotnet add package Semi.Avalonia --version 11.2.1.4";
+    public string MainInstall { get; set; } = "dotnet add package Semi.Avalonia --version 11.2.1.7";
 
     public string MainStyle { get; set; } =
         """
         <Application.Styles>
-        <!-- You can still reference in old way.  -->
-        <!-- <StyleInclude Source="avares://Semi.Avalonia/Index.axaml" /> -->
             <semi:SemiTheme Locale="zh-CN" />
         </Application.Styles>
         """;
 
-    public string ColorPickerInstall { get; set; } = "dotnet add package Semi.Avalonia.ColorPicker --version 11.2.1.4";
+    public string ColorPickerInstall { get; set; } = "dotnet add package Semi.Avalonia.ColorPicker --version 11.2.1.7";
 
     public string ColorPickerStyle { get; set; } =
         """
         <Application.Styles>
-            <StyleInclude Source="avares://Semi.Avalonia.ColorPicker/Index.axaml" />
+            <semi:ColorPickerSemiTheme />
         </Application.Styles>
         """;
 
-    public string DataGridInstall { get; set; } = "dotnet add package Semi.Avalonia.DataGrid --version 11.2.1.4";
+    public string DataGridInstall { get; set; } = "dotnet add package Semi.Avalonia.DataGrid --version 11.2.1.7";
 
     public string DataGridStyle { get; set; } =
         """
         <Application.Styles>
-            <StyleInclude Source="avares://Semi.Avalonia.DataGrid/Index.axaml" />
+            <semi:DataGridSemiTheme />
         </Application.Styles>
         """;
 
-    public string TreeDataGridInstall { get; set; } = "dotnet add package Semi.Avalonia.TreeDataGrid --version 11.0.10.1";
+    public string TreeDataGridInstall { get; set; } = "dotnet add package Semi.Avalonia.TreeDataGrid --version 11.0.10.3";
 
     public string TreeDataGridStyle { get; set; } =
         """
         <Application.Styles>
-            <StyleInclude Source="avares://Semi.Avalonia.TreeDataGrid/Index.axaml" />
+            <semi:TreeDataGridSemiTheme />
         </Application.Styles>
         """;
 }

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

@@ -9,66 +9,22 @@
     mc:Ignorable="d">
     <ScrollViewer>
         <StackPanel HorizontalAlignment="Left" Spacing="20">
+            <ToggleSwitch Name="inset" Content="Inset Content" />
+            <ToggleSwitch Name="autohide" Content="Allow AutoHide" />
             <ScrollViewer
-                Width="200"
-                Height="200"
                 Margin="10"
+                Width="200" Height="200"
+                AllowAutoHide="{Binding #autohide.IsChecked}"
+                Classes.InsetContent="{Binding #inset.IsChecked}"
                 HorizontalScrollBarVisibility="Auto">
-                <Grid RowDefinitions="Auto,Auto"
+                <UniformGrid
-                      ColumnDefinitions="Auto,Auto"
+                    Rows="2" Columns="2"
-                      Width="300" Height="300">
+                    Width="300" Height="300">
-                    <Rectangle
+                    <Rectangle Fill="{DynamicResource SemiYellow2}" />
-                        Grid.Row="0" Grid.Column="0"
+                    <Rectangle Fill="{DynamicResource SemiBlue2}" />
-                        Width="150"
+                    <Rectangle Fill="{DynamicResource SemiPink2}" />
-                        Height="150"
+                    <Rectangle Fill="{DynamicResource SemiGreen2}" />
-                        Fill="{DynamicResource SemiYellow2}" />
+                </UniformGrid>
-                    <Rectangle
-                        Grid.Row="0" Grid.Column="1"
-                        Width="150"
-                        Height="150"
-                        Fill="{DynamicResource SemiBlue2}" />
-                    <Rectangle
-                        Grid.Row="1" Grid.Column="0"
-                        Width="150"
-                        Height="150"
-                        Fill="{DynamicResource SemiPink2}" />
-                    <Rectangle
-                        Grid.Row="1" Grid.Column="1"
-                        Width="150"
-                        Height="150"
-                        Fill="{DynamicResource SemiGreen2}" />
-                </Grid>
-            </ScrollViewer>
-            <ScrollViewer
-                Width="200"
-                Height="200"
-                Margin="10"
-                HorizontalScrollBarVisibility="Auto"
-                Theme="{DynamicResource StaticScrollViewer}">
-                <Grid RowDefinitions="Auto,Auto"
-                      ColumnDefinitions="Auto,Auto"
-                      Width="300" Height="300">
-                    <Rectangle
-                        Grid.Row="0" Grid.Column="0"
-                        Width="150"
-                        Height="150"
-                        Fill="{DynamicResource SemiYellow2}" />
-                    <Rectangle
-                        Grid.Row="0" Grid.Column="1"
-                        Width="150"
-                        Height="150"
-                        Fill="{DynamicResource SemiBlue2}" />
-                    <Rectangle
-                        Grid.Row="1" Grid.Column="0"
-                        Width="150"
-                        Height="150"
-                        Fill="{DynamicResource SemiPink2}" />
-                    <Rectangle
-                        Grid.Row="1" Grid.Column="1"
-                        Width="150"
-                        Height="150"
-                        Fill="{DynamicResource SemiGreen2}" />
-                </Grid>
             </ScrollViewer>
         </StackPanel>
     </ScrollViewer>

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

@@ -21,8 +21,7 @@
                         Content="IsPaneOpen" />
                     <ToggleSwitch
                         Grid.Row="0" Grid.Column="1"
-                        Name="PaneOpenButton"
+                        Name="PaneOpenButton" />
-                        IsChecked="{Binding #SplitView.IsPaneOpen}" />
 
                     <Label
                         Grid.Row="1" Grid.Column="0"
@@ -30,8 +29,7 @@
                         Content="UseLightDismissOverlayMode" />
                     <ToggleSwitch
                         Grid.Row="1" Grid.Column="1"
-                        Name="UseLightDismissOverlayModeButton"
+                        Name="UseLightDismissOverlayModeButton" />
-                        IsChecked="{Binding #SplitView.UseLightDismissOverlayMode}" />
 
                     <Label
                         Grid.Row="2" Grid.Column="0"
@@ -39,9 +37,9 @@
                         Content="Placement" />
                     <ToggleSwitch
                         Grid.Row="2" Grid.Column="1"
+                        Name="PanePlacementButton"
                         OffContent="Left"
-                        OnContent="Right"
+                        OnContent="Right" />
-                        IsChecked="{Binding #SplitView.PanePlacement}" />
 
                     <Label
                         Grid.Row="3" Grid.Column="0"
@@ -51,8 +49,8 @@
                         Grid.Row="3" Grid.Column="1"
                         Name="DisplayModeSelector"
                         HorizontalAlignment="Stretch"
-                        ItemsSource="{Binding DisplayModes}"
+                        ItemsSource="{x:Static pages:SplitViewDemoViewModel.DisplayModes}"
-                        SelectedIndex="{Binding #SplitView.DisplayMode}" />
+                        SelectedItem="{x:Static SplitViewDisplayMode.CompactInline}" />
 
                     <Label
                         Grid.Row="4" Grid.Column="0"
@@ -65,7 +63,7 @@
                         Minimum="0"
                         TickFrequency="1"
                         IsSnapToTickEnabled="True"
-                        Value="{Binding #SplitView.CompactPaneLength}" />
+                        Value="48" />
 
                     <Label
                         Grid.Row="5" Grid.Column="0"
@@ -78,105 +76,209 @@
                         Minimum="128"
                         TickFrequency="1"
                         IsSnapToTickEnabled="True"
-                        Value="{Binding #SplitView.OpenPaneLength}" />
+                        Value="256" />
                 </Grid>
             </Border>
-            <Border
+            <TabControl Grid.Column="0">
-                Grid.Column="0"
+                <TabItem Header="Default">
-                BorderBrush="{DynamicResource SemiGrey1}"
+                    <Border
-                BorderThickness="1">
+                        BorderBrush="{DynamicResource SemiGrey1}"
-                <SplitView
+                        BorderThickness="1">
-                    Name="SplitView"
+                        <SplitView
-                    DisplayMode="CompactOverlay"
+                            Name="SplitView"
-                    CompactPaneLength="48"
+                            IsPaneOpen="{Binding #PaneOpenButton.IsChecked,Mode=TwoWay}"
-                    OpenPaneLength="256">
+                            UseLightDismissOverlayMode="{Binding #UseLightDismissOverlayModeButton.IsChecked}"
-                    <SplitView.Background>
+                            PanePlacement="{Binding #PanePlacementButton.IsChecked}"
-                        <LinearGradientBrush StartPoint="0%,0%" EndPoint="0%,100%">
+                            DisplayMode="{Binding #DisplayModeSelector.SelectedItem}"
-                            <GradientStop Color="#6b4c1b" Offset="0" />
+                            CompactPaneLength="{Binding #CompactPaneLengthSlider.Value}"
-                            <GradientStop Color="#291e10" Offset="1" />
+                            OpenPaneLength="{Binding #OpenPaneLengthSlider.Value}">
-                        </LinearGradientBrush>
+                            <SplitView.Background>
-                    </SplitView.Background>
+                                <LinearGradientBrush StartPoint="0%,0%" EndPoint="0%,100%">
-                    <SplitView.Pane>
+                                    <GradientStop Color="#6b4c1b" Offset="0" />
-                        <Grid RowDefinitions="Auto,*,Auto">
+                                    <GradientStop Color="#291e10" Offset="1" />
-                            <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}">
-                            </ToggleSwitch>
-                        </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>
+                            </SplitView.Background>
-                        </Arc>
+                            <SplitView.Pane>
-                        <Arc
+                                <Grid RowDefinitions="Auto,*,Auto">
-                            Width="294"
+                                    <TextBlock
-                            Height="294"
+                                        Grid.Row="0"
-                            StartAngle="0"
+                                        Name="PaneHeader"
-                            SweepAngle="360"
+                                        Margin="8,12"
-                            StrokeJoin="Round"
+                                        FontWeight="Bold"
-                            StrokeLineCap="Round"
+                                        Text="Playlist" />
-                            StrokeThickness="4"
+                                    <ListBox
-                            Stroke="Black" />
+                                        Grid.Row="1"
-                        <Arc
+                                        ItemsSource="{Binding Songs}" />
-                            Width="310"
+                                    <ToggleSwitch
-                            Height="310"
+                                        Grid.Row="2"
-                            StartAngle="0"
+                                        Theme="{DynamicResource IconBorderlessToggleSwitch}"
-                            SweepAngle="360"
+                                        Content="{StaticResource SemiIconSidebar}"
-                            StrokeJoin="Round"
+                                        HorizontalAlignment="Left"
-                            StrokeLineCap="Round"
+                                        IsChecked="{Binding #SplitView.IsPaneOpen}">
-                            StrokeThickness="10"
+                                    </ToggleSwitch>
-                            Stroke="#C6CACD"
+                                </Grid>
-                            Opacity="0.1" />
+                            </SplitView.Pane>
-                    </Panel>
 
-                </SplitView>
+                            <Panel>
-            </Border>
+                                <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}">
+                                    </ToggleSwitch>
+                                    <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>
         </Grid>
     </Border>
 </UserControl>

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

@@ -34,7 +34,7 @@ public class SplitViewDemoViewModel : ObservableObject
         "世界所有的烂漫",
     ];
 
-    public ObservableCollection<SplitViewDisplayMode> DisplayModes { get; set; } =
+    public static ObservableCollection<SplitViewDisplayMode> DisplayModes { get; set; } =
     [
         SplitViewDisplayMode.Inline,
         SplitViewDisplayMode.CompactInline,

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

@@ -11,85 +11,122 @@
     x:DataType="vm:TabControlDemoViewModel"
     mc:Ignorable="d">
     <ScrollViewer>
-        <StackPanel Spacing="20">
+        <StackPanel>
-            <Border Theme="{StaticResource CardBorder}">
+            <Border
-                <TabControl TabStripPlacement="Top">
+                Margin="8"
-                    <TabItem Content="Hello 1" Header="Tab 1" />
+                HorizontalAlignment="Left"
-                    <TabItem Content="Hello 2" Header="Tab 2" />
+                Theme="{StaticResource RadioButtonGroupBorder}">
-                    <TabItem Content="Hello 3" Header="Tab 3" />
+                <ListBox Name="place" Theme="{StaticResource ButtonRadioGroupListBox}">
-                    <TabItem Content="中文内容" Header="中文中文" />
+                    <Dock>Left</Dock>
-                    <TabItem
+                    <Dock>Bottom</Dock>
-                        Content="Hello 4"
+                    <Dock>Right</Dock>
-                        Header="Tab 4"
+                    <Dock>Top</Dock>
-                        IsEnabled="False" />
+                </ListBox>
-                </TabControl>
-            </Border>
-            <Border Theme="{StaticResource CardBorder}">
-                <TabControl TabStripPlacement="Left">
-                    <TabItem Content="Hello 1" Header="Tab 1" />
-                    <TabItem Content="Hello 2" Header="Tab 2" />
-                    <TabItem Content="Hello 3" Header="Tab 3" />
-                    <TabItem Content="中文内容" Header="中文中文" />
-                    <TabItem
-                        Content="Hello 4"
-                        Header="Tab 4"
-                        IsEnabled="False" />
-                </TabControl>
-            </Border>
-            <Border Theme="{StaticResource CardBorder}">
-                <TabControl TabStripPlacement="Right">
-                    <TabItem Content="Hello 1" Header="Tab 1" />
-                    <TabItem Content="Hello 2" Header="Tab 2" />
-                    <TabItem Content="Hello 3" Header="Tab 3" />
-                    <TabItem Content="中文内容" Header="中文中文" />
-                    <TabItem
-                        Content="Hello 4"
-                        Header="Tab 4"
-                        IsEnabled="False" />
-                </TabControl>
-            </Border>
-            <Border Theme="{StaticResource CardBorder}">
-                <TabControl TabStripPlacement="Bottom">
-                    <TabItem Content="Hello 1" Header="Tab 1" />
-                    <TabItem Content="Hello 2" Header="Tab 2" />
-                    <TabItem Content="Hello 3" Header="Tab 3" />
-                    <TabItem Content="中文内容" Header="中文中文" />
-                    <TabItem
-                        Content="Hello 4"
-                        Header="Tab 4"
-                        IsEnabled="False" />
-                </TabControl>
-            </Border>
-            <Border Theme="{StaticResource CardBorder}">
-                <TabStrip>
-                    <TabStripItem>Tab 1</TabStripItem>
-                    <TabStripItem>Tab 2</TabStripItem>
-                </TabStrip>
-            </Border>
-            <Border Height="300" Theme="{DynamicResource CardBorder}">
-                <TabControl
-                    ItemsSource="{Binding Items}"
-                    TabStripPlacement="Top"
-                    Theme="{DynamicResource ScrollTabControl}" />
-            </Border>
-            <Border Height="300" Theme="{DynamicResource CardBorder}">
-                <TabControl
-                    ItemsSource="{Binding Items}"
-                    TabStripPlacement="Left"
-                    Theme="{DynamicResource ScrollTabControl}" />
-            </Border>
-            <Border Height="300" Theme="{DynamicResource CardBorder}">
-                <TabControl
-                    ItemsSource="{Binding Items}"
-                    TabStripPlacement="Bottom"
-                    Theme="{DynamicResource ScrollTabControl}" />
-            </Border>
-            <Border Height="300" Theme="{DynamicResource CardBorder}">
-                <TabControl
-                    ItemsSource="{Binding Items}"
-                    TabStripPlacement="Right"
-                    Theme="{DynamicResource ScrollTabControl}" />
             </Border>
+            <TabControl Theme="{StaticResource LineTabControl}">
+                <TabItem Header="Default">
+                    <StackPanel>
+                        <StackPanel
+                            Margin="8"
+                            Orientation="Horizontal"
+                            Spacing="8">
+                            <TextBlock VerticalAlignment="Center" Text="ReverseSeparator" />
+                            <ToggleSwitch Name="reverse" Theme="{StaticResource SimpleToggleSwitch}" />
+                        </StackPanel>
+                        <Border MinHeight="150" Theme="{StaticResource CardBorder}">
+                            <TabControl Classes.ReverseSeparator="{Binding #reverse.IsChecked}" TabStripPlacement="{Binding #place.SelectedValue}">
+                                <TabItem Content="Hello 1" Header="Tab 1" />
+                                <TabItem Content="Hello 2" Header="Tab 2" />
+                                <TabItem Content="Hello 3" Header="Tab 3" />
+                                <TabItem Content="中文内容" Header="中文中文" />
+                                <TabItem
+                                    Content="Hello 4"
+                                    Header="Tab 4"
+                                    IsEnabled="False" />
+                            </TabControl>
+                        </Border>
+                        <Border Height="300" Theme="{StaticResource CardBorder}">
+                            <TabControl
+                                Classes.ReverseSeparator="{Binding #reverse.IsChecked}"
+                                ItemsSource="{Binding Items}"
+                                TabStripPlacement="{Binding #place.SelectedValue}"
+                                Theme="{StaticResource ScrollTabControl}" />
+                        </Border>
+                    </StackPanel>
+                </TabItem>
+                <TabItem Header="Line">
+                    <StackPanel>
+                        <Border MinHeight="150" Theme="{StaticResource CardBorder}">
+                            <TabControl TabStripPlacement="{Binding #place.SelectedValue}" Theme="{StaticResource LineTabControl}">
+                                <TabItem Content="Hello 1" Header="Tab 1" />
+                                <TabItem Content="Hello 2" Header="Tab 2" />
+                                <TabItem Content="Hello 3" Header="Tab 3" />
+                                <TabItem Content="中文内容" Header="中文中文" />
+                                <TabItem
+                                    Content="Hello 4"
+                                    Header="Tab 4"
+                                    IsEnabled="False" />
+                            </TabControl>
+                        </Border>
+                        <Border Height="300" Theme="{StaticResource CardBorder}">
+                            <TabControl
+                                ItemsSource="{Binding Items}"
+                                TabStripPlacement="{Binding #place.SelectedValue}"
+                                Theme="{StaticResource ScrollLineTabControl}" />
+                        </Border>
+                    </StackPanel>
+                </TabItem>
+                <TabItem Header="Card">
+                    <StackPanel>
+                        <Border
+                            MinHeight="150"
+                            Background="Transparent"
+                            Theme="{StaticResource CardBorder}">
+                            <TabControl TabStripPlacement="{Binding #place.SelectedValue}" Theme="{StaticResource CardTabControl}">
+                                <TabItem Content="Hello 1" Header="Tab 1" />
+                                <TabItem Content="Hello 2" Header="Tab 2" />
+                                <TabItem Content="Hello 3" Header="Tab 3" />
+                                <TabItem Content="中文内容" Header="中文中文" />
+                                <TabItem
+                                    Content="Hello 4"
+                                    Header="Tab 4"
+                                    IsEnabled="False" />
+                            </TabControl>
+                        </Border>
+                        <Border
+                            Height="300"
+                            Background="Transparent"
+                            Theme="{StaticResource CardBorder}">
+                            <TabControl
+                                ItemsSource="{Binding Items}"
+                                TabStripPlacement="{Binding #place.SelectedValue}"
+                                Theme="{StaticResource ScrollCardTabControl}" />
+                        </Border>
+                    </StackPanel>
+                </TabItem>
+                <TabItem Header="Button">
+                    <StackPanel>
+                        <Border MinHeight="150" Theme="{StaticResource CardBorder}">
+                            <TabControl TabStripPlacement="{Binding #place.SelectedValue}" Theme="{StaticResource ButtonTabControl}">
+                                <TabItem Content="Hello 1" Header="Tab 1" />
+                                <TabItem Content="Hello 2" Header="Tab 2" />
+                                <TabItem Content="Hello 3" Header="Tab 3" />
+                                <TabItem Content="中文内容" Header="中文中文" />
+                                <TabItem
+                                    Content="Hello 4"
+                                    Header="Tab 4"
+                                    IsEnabled="False" />
+                            </TabControl>
+                        </Border>
+                        <Border Height="300" Theme="{StaticResource CardBorder}">
+                            <TabControl
+                                ItemsSource="{Binding Items}"
+                                TabStripPlacement="{Binding #place.SelectedValue}"
+                                Theme="{StaticResource ScrollButtonTabControl}" />
+                        </Border>
+                    </StackPanel>
+                </TabItem>
+            </TabControl>
         </StackPanel>
     </ScrollViewer>
-</UserControl>
+</UserControl>

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

@@ -0,0 +1,94 @@
+<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"
+             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 />
+    </Design.DataContext>
+    <ScrollViewer>
+        <StackPanel>
+            <TabControl Theme="{StaticResource LineTabControl}">
+                <TabItem Header="Default">
+                    <StackPanel>
+                        <Border Theme="{StaticResource CardBorder}">
+                            <TabStrip>
+                                <TabStripItem Content="Tab 1" />
+                                <TabStripItem Content="Tab 2" />
+                                <TabStripItem Content="Tab 3" />
+                                <TabStripItem Content="中文中文" />
+                                <TabStripItem Content="Tab 4" IsEnabled="False" />
+                            </TabStrip>
+                        </Border>
+                        <Border Theme="{StaticResource CardBorder}">
+                            <TabStrip
+                                ItemsSource="{Binding Items}" />
+                        </Border>
+                    </StackPanel>
+                </TabItem>
+                <TabItem Header="Line">
+                    <StackPanel>
+                        <Border Theme="{StaticResource CardBorder}">
+                            <TabStrip Theme="{StaticResource LineTabStrip}">
+                                <TabStripItem Content="Tab 1" />
+                                <TabStripItem Content="Tab 2" />
+                                <TabStripItem Content="Tab 3" />
+                                <TabStripItem Content="中文中文" />
+                                <TabStripItem Content="Tab 4" IsEnabled="False" />
+                            </TabStrip>
+                        </Border>
+                        <Border Theme="{StaticResource CardBorder}">
+                            <TabStrip
+                                ItemsSource="{Binding Items}"
+                                Theme="{StaticResource LineTabStrip}" />
+                        </Border>
+                    </StackPanel>
+                </TabItem>
+                <TabItem Header="Card">
+                    <StackPanel>
+                        <Border
+                            Background="Transparent"
+                            Theme="{StaticResource CardBorder}">
+                            <TabStrip Theme="{StaticResource CardTabStrip}">
+                                <TabStripItem Content="Tab 1" />
+                                <TabStripItem Content="Tab 2" />
+                                <TabStripItem Content="Tab 3" />
+                                <TabStripItem Content="中文中文" />
+                                <TabStripItem Content="Tab 4" IsEnabled="False" />
+                            </TabStrip>
+                        </Border>
+                        <Border
+                            Background="Transparent"
+                            Theme="{StaticResource CardBorder}">
+                            <TabStrip
+                                ItemsSource="{Binding Items}"
+                                Theme="{StaticResource CardTabStrip}" />
+                        </Border>
+                    </StackPanel>
+                </TabItem>
+                <TabItem Header="Button">
+                    <StackPanel>
+                        <Border Theme="{StaticResource CardBorder}">
+                            <TabStrip Theme="{StaticResource ButtonTabStrip}">
+                                <TabStripItem Content="Tab 1" />
+                                <TabStripItem Content="Tab 2" />
+                                <TabStripItem Content="Tab 3" />
+                                <TabStripItem Content="中文中文" />
+                                <TabStripItem Content="Tab 4" IsEnabled="False" />
+                            </TabStrip>
+                        </Border>
+                        <Border Theme="{StaticResource CardBorder}">
+                            <TabStrip
+                                ItemsSource="{Binding Items}"
+                                Theme="{StaticResource ButtonTabStrip}" />
+                        </Border>
+                    </StackPanel>
+                </TabItem>
+            </TabControl>
+        </StackPanel>
+    </ScrollViewer>
+</UserControl>

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

@@ -0,0 +1,13 @@
+using Avalonia.Controls;
+using Semi.Avalonia.Demo.ViewModels;
+
+namespace Semi.Avalonia.Demo.Pages;
+
+public partial class TabStripDemo : UserControl
+{
+    public TabStripDemo()
+    {
+        InitializeComponent();
+        this.DataContext = new TabStripDemoViewModel();
+    }
+}

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

@@ -15,6 +15,7 @@
             <TextBox Width="300" Classes="revealPasswordButton" Text="123456" />
             <TextBox
                 Width="300"
+                IsReadOnly="True"
                 Classes="ClearButton RevealPasswordButton"
                 InnerLeftContent="https://"
                 InnerRightContent=".com"

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

@@ -0,0 +1,127 @@
+<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:CompileBindings="True"
+             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,23 @@
+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)
+        {
+            var vm = DataContext as TreeDataGridDemoViewModel;
+            vm.FilesContext.SelectedPath = (sender as TextBox)!.Text;
+        }
+    }
+}

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

@@ -1,6 +1,6 @@
 <Project Sdk="Microsoft.NET.Sdk">
     <PropertyGroup>
-        <TargetFramework>netstandard2.0</TargetFramework>
+        <TargetFramework>net8.0</TargetFramework>
         <Nullable>enable</Nullable>
         <LangVersion>latest</LangVersion>
     </PropertyGroup>
@@ -12,7 +12,7 @@
     <ItemGroup>
         <PackageReference Include="Avalonia" Version="$(AvaloniaVersion)"/>
         <PackageReference Include="Avalonia.Controls.ColorPicker" Version="$(AvaloniaVersion)"/>
-        <PackageReference Include="Avalonia.Controls.DataGrid" Version="$(AvaloniaVersion)"/>
+        <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>
@@ -22,8 +22,9 @@
     </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\Semi.Avalonia.csproj"/>
+        <ProjectReference Include="..\..\src\Semi.Avalonia.TreeDataGrid\Semi.Avalonia.TreeDataGrid.csproj"/>
     </ItemGroup>
 </Project>

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

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

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

@@ -4,7 +4,6 @@
         <ResourceInclude Source="ColorItemControl.axaml" />
         <ResourceInclude Source="FunctionalColorGroupControl.axaml" />
         <ResourceInclude Source="ShadowGroupControl.axaml" />
-        <ResourceInclude Source="TabMenu.axaml" />
         <ResourceInclude Source="ToggleSwitch.axaml" />
     </ResourceDictionary.MergedDictionaries>
 </ResourceDictionary>

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

@@ -59,6 +59,25 @@ public class Song
         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),

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

@@ -4,12 +4,7 @@ using CommunityToolkit.Mvvm.ComponentModel;
 
 namespace Semi.Avalonia.Demo.ViewModels;
 
-public class TabControlDemoViewModel: ObservableObject
+public class TabControlDemoViewModel : ObservableObject
 {
-    public ObservableCollection<string> Items { get; set; }
+    public ObservableCollection<string> Items => new(Enumerable.Range(1, 200).Select(a => "Tab " + a));
-
-    public TabControlDemoViewModel()
-    {
-        Items = new ObservableCollection<string>(Enumerable.Range(1, 200).Select(a => "Tab " + a));
-    }
 }

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

@@ -0,0 +1,10 @@
+using System.Collections.ObjectModel;
+using System.Linq;
+using CommunityToolkit.Mvvm.ComponentModel;
+
+namespace Semi.Avalonia.Demo.ViewModels;
+
+public class TabStripDemoViewModel : ObservableObject
+{
+    public ObservableCollection<string> Items => new(Enumerable.Range(1, 10).Select(a => "Tab " + a));
+}

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

@@ -2,6 +2,7 @@ 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;
@@ -11,43 +12,40 @@ using Avalonia.Controls.Selection;
 using Avalonia.Threading;
 using CommunityToolkit.Mvvm.ComponentModel;
 
-namespace Semi.Avalonia.TreeDataGrid.Demo.ViewModels;
+namespace Semi.Avalonia.Demo.ViewModels;
 
-public class FilesPageViewModel: ObservableObject
+public partial class FilesPageViewModel : ObservableObject
 {
     public IList<string> Drives { get; }
-    private string _selectedDrive;
+    public HierarchicalTreeDataGridSource<FileNodeViewModel> Source { get; }
-    private string? _selectedPath;
+    [ObservableProperty] private string _selectedDrive;
-    private FileNodeViewModel? _root;
+    [ObservableProperty] private string? _selectedPath;
-    public string SelectedDrive
+    [ObservableProperty] private FileNodeViewModel? _root;
+
+    partial void OnSelectedDriveChanged(string value)
     {
-        get => _selectedDrive;
+        Root = new FileNodeViewModel(value, true, true);
-        set
+        if (Source is not null)
         {
-            SetProperty(ref _selectedDrive, value);
+            Source.Items = [Root];
-            _root = new FileNodeViewModel(_selectedDrive, isDirectory: true, isRoot: true);
-            Source.Items = new[] { _root };
         }
     }
     
-    public string? SelectedPath
+    partial void OnSelectedPathChanged(string? value)
     {
-        get => _selectedPath;
+        SetSelectedPath(value);
-        set => SetSelectedPath(value);
     }
-    
-    public HierarchicalTreeDataGridSource<FileNodeViewModel> Source { get; }
 
     public FilesPageViewModel()
     {
-        Drives= DriveInfo.GetDrives().Select(x => x.Name).ToList();
+        Drives = DriveInfo.GetDrives().Select(x => x.Name).ToList();
         if (RuntimeInformation.IsOSPlatform(OSPlatform.Windows))
         {
-            _selectedDrive = "C:\\";
+            SelectedDrive = @"C:\";
         }
         else
         {
-            _selectedDrive = Drives.FirstOrDefault() ?? "/";
+            SelectedDrive = Drives.FirstOrDefault() ?? "/";
         }
 
         Source = new HierarchicalTreeDataGridSource<FileNodeViewModel>(Array.Empty<FileNodeViewModel>())
@@ -58,7 +56,7 @@ public class FilesPageViewModel: ObservableObject
                     null,
                     x => x.IsChecked,
                     (o, v) => o.IsChecked = v,
-                    options: new()
+                    options: new CheckBoxColumnOptions<FileNodeViewModel>
                     {
                         CanUserResizeColumn = false,
                     }),
@@ -68,20 +66,20 @@ public class FilesPageViewModel: ObservableObject
                         "FileNameCell",
                         "FileNameEditCell",
                         new GridLength(1, GridUnitType.Star),
-                        new()
+                        new TemplateColumnOptions<FileNodeViewModel>
                         {
-                            CompareAscending = FileNodeViewModel.SortAscending(x => x.Name),
+                            CompareAscending = FileNodeViewModel.SortAscending(vm => vm.Name),
-                            CompareDescending = FileNodeViewModel.SortDescending(x => x.Name),
+                            CompareDescending = FileNodeViewModel.SortDescending(vm => vm.Name),
                             IsTextSearchEnabled = true,
-                            TextSearchValueSelector = x => x.Name
+                            TextSearchValueSelector = vm => vm.Name
                         }),
-                    x => x.Children,
+                    vm => vm.Children,
-                    x => x.HasChildren,
+                    vm => vm.HasChildren,
-                    x => x.IsExpanded),
+                    vm => vm.IsExpanded),
                 new TextColumn<FileNodeViewModel, long?>(
                     "Size",
-                    x => x.Size,
+                    vm => vm.Size,
-                    options: new()
+                    options: new TextColumnOptions<FileNodeViewModel>
                     {
                         CompareAscending = FileNodeViewModel.SortAscending(x => x.Size),
                         CompareDescending = FileNodeViewModel.SortDescending(x => x.Size),
@@ -89,7 +87,7 @@ public class FilesPageViewModel: ObservableObject
                 new TextColumn<FileNodeViewModel, DateTimeOffset?>(
                     "Modified",
                     x => x.Modified,
-                    options: new()
+                    options: new TextColumnOptions<FileNodeViewModel>
                     {
                         CompareAscending = FileNodeViewModel.SortAscending(x => x.Modified),
                         CompareDescending = FileNodeViewModel.SortDescending(x => x.Modified),
@@ -99,18 +97,18 @@ public class FilesPageViewModel: ObservableObject
         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)
-            System.Diagnostics.Trace.WriteLine($"Deselected '{i?.Path}'");
+            Trace.WriteLine($"Deselected '{i?.Path}'");
         foreach (var i in e.SelectedItems)
-            System.Diagnostics.Trace.WriteLine($"Selected '{i?.Path}'");
+            Trace.WriteLine($"Selected '{i?.Path}'");
     }
-    
+
     private void SetSelectedPath(string? value)
     {
         if (string.IsNullOrEmpty(value))
@@ -164,27 +162,28 @@ public class FilesPageViewModel: ObservableObject
             }
         }
 
+        Source.Items = [Root];
         Source.RowSelection!.SelectedIndex = index;
     }
 }
 
-public class FileNodeViewModel: ObservableObject, IEditableObject
+public partial class FileNodeViewModel : ObservableObject, IEditableObject
 {
-    private string _path;
+    [ObservableProperty] private string _path;
-    private string _name;
+    [ObservableProperty] private string _name;
     private string? _undoName;
-    private long? _size;
+    [ObservableProperty] private long? _size;
-    private DateTimeOffset? _modified;
+    [ObservableProperty] private DateTimeOffset? _modified;
     private FileSystemWatcher? _watcher;
     private ObservableCollection<FileNodeViewModel>? _children;
-    private bool _hasChildren = true;
+    [ObservableProperty] private bool _hasChildren = true;
-    private bool _isExpanded;
+    [ObservableProperty] private bool _isExpanded;
 
-    public FileNodeViewModel( string path, bool isDirectory, bool isRoot = false)
+    public FileNodeViewModel(string path, bool isDirectory, bool isRoot = false)
     {
-        _path = path;
+        Path = path;
-        _name = isRoot ? path : System.IO.Path.GetFileName(Path);
+        Name = isRoot ? path : System.IO.Path.GetFileName(Path);
-        _isExpanded = isRoot;
+        IsExpanded = isRoot;
         IsDirectory = isDirectory;
         HasChildren = isDirectory;
 
@@ -196,42 +195,6 @@ public class FileNodeViewModel: ObservableObject, IEditableObject
         }
     }
 
-    public string Path 
-    {
-        get => _path;
-        private set => SetProperty(ref _path, value);
-    }
-
-    public string Name 
-    {
-        get => _name;
-        private set => SetProperty(ref _name, value);
-    }
-
-    public long? Size 
-    {
-        get => _size;
-        private set => SetProperty(ref _size, value);
-    }
-
-    public DateTimeOffset? Modified 
-    {
-        get => _modified;
-        private set => SetProperty(ref _modified, value);
-    }
-
-    public bool HasChildren
-    {
-        get => _hasChildren;
-        private set => SetProperty(ref _hasChildren, value);
-    }
-
-    public bool IsExpanded
-    {
-        get => _isExpanded;
-        set => SetProperty(ref _isExpanded, value);
-    }
-
     public bool IsChecked { get; set; }
     public bool IsDirectory { get; }
     public IReadOnlyList<FileNodeViewModel> Children => _children ??= LoadChildren();
@@ -332,6 +295,7 @@ public class FileNodeViewModel: ObservableObject, IEditableObject
                             child.Size = info.Length;
                             child.Modified = info.LastWriteTimeUtc;
                         }
+
                         break;
                     }
                 }
@@ -359,7 +323,7 @@ public class FileNodeViewModel: ObservableObject, IEditableObject
                 if (_children[i].Path == e.FullPath)
                 {
                     _children.RemoveAt(i);
-                    System.Diagnostics.Debug.WriteLine($"Removed {e.FullPath}");
+                    Debug.WriteLine($"Removed {e.FullPath}");
                     break;
                 }
             }
@@ -394,6 +358,7 @@ internal static class ListExtensions
                 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

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

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

@@ -11,6 +11,23 @@
     x:CompileBindings="True"
     x:DataType="views:MainViewModel"
     mc:Ignorable="d">
+    <UserControl.Resources>
+        <ControlTheme x:Key="CategoryTabItem" TargetType="TabItem">
+            <Setter Property="IsEnabled" Value="False" />
+            <Setter Property="Template">
+                <ControlTemplate TargetType="TabItem">
+                    <TextBlock
+                        FontWeight="Bold"
+                        FontSize="12"
+                        Margin="4"
+                        Text="{TemplateBinding Header}" />
+                </ControlTemplate>
+            </Setter>
+            <Style Selector="^:disabled /template/ TextBlock">
+                <Setter Property="Foreground" Value="{DynamicResource SemiColorText1}" />
+            </Style>
+        </ControlTheme>
+    </UserControl.Resources>
     <Grid RowDefinitions="Auto, *">
         <Border
             Grid.Row="0"
@@ -78,13 +95,25 @@
             Grid.Row="1"
             Margin="8"
             Padding="20,0,0,0"
-            HorizontalAlignment="Stretch"
             TabStripPlacement="Left"
             Classes.Dismiss="{Binding #ExpandButton.IsChecked}"
-            Theme="{DynamicResource NavigationTab}">
+            Theme="{DynamicResource ScrollLineTabControl}">
+            <TabControl.Styles>
+                <Style Selector=".Dismiss /template/ ScrollViewer#PART_ScrollViewer">
+                    <Setter Property="IsVisible" Value="False" />
+                </Style>
+            </TabControl.Styles>
+            <TabControl.ItemsPanel>
+                <ItemsPanelTemplate>
+                    <StackPanel />
+                </ItemsPanelTemplate>
+            </TabControl.ItemsPanel>
             <TabItem Header="Overview">
                 <pages:Overview />
             </TabItem>
+            <TabItem
+                Theme="{DynamicResource CategoryTabItem}"
+                Header="Resource Browser" />
             <TabItem Header="Palette">
                 <pages:PaletteDemo />
             </TabItem>
@@ -97,133 +126,165 @@
             <TabItem Header="Icon">
                 <pages:IconDemo />
             </TabItem>
-            <TabItem Header="AutoCompleteBox">
+            <TabItem
-                <pages:AutoCompleteBoxDemo />
+                Theme="{DynamicResource CategoryTabItem}"
+                Header="Separate Pack" />
+            <TabItem Header="ColorPicker">
+                <pages:ColorPickerDemo />
+            </TabItem>
+            <TabItem Header="DataGrid">
+                <pages:DataGridDemo />
+            </TabItem>
+            <TabItem Header="TreeDataGrid">
+                <pages:TreeDataGridDemo />
+            </TabItem>
+            <TabItem
+                Theme="{DynamicResource CategoryTabItem}"
+                Header="Basic" />
+            <TabItem Header="TextBlock">
+                <pages:TextBlockDemo />
+            </TabItem>
+            <TabItem Header="SelectableTextBlock">
+                <pages:SelectableTextBlockDemo />
             </TabItem>
             <TabItem Header="Border">
                 <pages:BorderDemo />
             </TabItem>
+            <TabItem Header="PathIcon">
+                <pages:PathIconDemo />
+            </TabItem>
+            <TabItem
+                Theme="{DynamicResource CategoryTabItem}"
+                Header="Button" />
             <TabItem Header="Button">
                 <pages:ButtonDemo />
             </TabItem>
+            <TabItem Header="RepeatButton">
+                <pages:RepeatButtonDemo />
+            </TabItem>
+            <TabItem Header="HyperlinkButton">
+                <pages:HyperlinkButtonDemo />
+            </TabItem>
+            <TabItem Header="ToggleButton">
+                <pages:ToggleButtonDemo />
+            </TabItem>
+            <TabItem Header="CheckBox">
+                <pages:CheckBoxDemo />
+            </TabItem>
+            <TabItem Header="RadioButton">
+                <pages:RadioButtonDemo />
+            </TabItem>
+            <TabItem Header="ToggleSwitch">
+                <pages:ToggleSwitchDemo />
+            </TabItem>
+            <TabItem
+                Theme="{DynamicResource CategoryTabItem}"
+                Header="Input" />
+            <TabItem Header="TextBox">
+                <pages:TextBoxDemo />
+            </TabItem>
+            <TabItem Header="AutoCompleteBox">
+                <pages:AutoCompleteBoxDemo />
+            </TabItem>
+            <TabItem Header="ComboBox">
+                <pages:ComboBoxDemo />
+            </TabItem>
             <TabItem Header="ButtonSpinner">
                 <pages:ButtonSpinnerDemo />
             </TabItem>
+            <TabItem Header="NumericUpDown">
+                <pages:NumericUpDownDemo />
+            </TabItem>
+            <TabItem Header="Slider">
+                <pages:SliderDemo />
+            </TabItem>
+            <TabItem Header="ManagedFileChooser">
+                <pages:ManagedFileChooserDemo />
+            </TabItem>
+            <TabItem
+                Theme="{DynamicResource CategoryTabItem}"
+                Header="Date/Time" />
             <TabItem Header="Calendar">
                 <pages:CalendarDemo />
             </TabItem>
             <TabItem Header="CalendarDatePicker">
                 <pages:CalendarDatePickerDemo />
             </TabItem>
-            <TabItem Header="Carousel">
-                <pages:CarouselDemo />
-            </TabItem>
-            <TabItem Header="CheckBox">
-                <pages:CheckBoxDemo />
-            </TabItem>
-            <TabItem Header="ColorPicker">
-                <pages:ColorPickerDemo />
-            </TabItem>
-            <TabItem Header="ComboBox">
-                <pages:ComboBoxDemo />
-            </TabItem>
-            <TabItem Header="DataValidationErrors">
-                <pages:DataValidationErrorsDemo />
-            </TabItem>
-            <TabItem Header="DataGrid">
-                <pages:DataGridDemo />
-            </TabItem>
             <TabItem Header="DatePicker">
                 <pages:DatePickerDemo />
             </TabItem>
+            <TabItem Header="TimePicker">
+                <pages:TimePickerDemo />
+            </TabItem>
+            <TabItem
+                Theme="{DynamicResource CategoryTabItem}"
+                Header="Navigation" />
+            <TabItem Header="TabControl">
+                <pages:TabControlDemo />
+            </TabItem>
+            <TabItem Header="TabStrip">
+                <pages:TabStripDemo />
+            </TabItem>
+            <TabItem Header="TreeView">
+                <pages:TreeViewDemo />
+            </TabItem>
+            <TabItem
+                Theme="{DynamicResource CategoryTabItem}"
+                Header="Show" />
+            <TabItem Header="Carousel">
+                <pages:CarouselDemo />
+            </TabItem>
             <TabItem Header="Expander">
                 <pages:ExpanderDemo />
             </TabItem>
             <TabItem Header="Flyout">
                 <pages:FlyoutDemo />
             </TabItem>
-            <TabItem Header="GridSplitter">
-                <pages:GridSplitterDemo />
-            </TabItem>
             <TabItem Header="HeaderedContentControl">
                 <pages:HeaderedContentControlDemo />
             </TabItem>
-            <TabItem Header="HyperlinkButton">
-                <pages:HyperlinkButtonDemo />
-            </TabItem>
             <TabItem Header="Label">
                 <pages:LabelDemo />
             </TabItem>
             <TabItem Header="ListBox">
                 <pages:ListBoxDemo />
             </TabItem>
-            <TabItem Header="ManagedFileChooser">
-                <pages:ManagedFileChooserDemo />
-            </TabItem>
-            <TabItem Header="Menu">
-                <pages:MenuDemo />
-            </TabItem>
-            <TabItem Header="Notification">
-                <pages:NotificationDemo />
-            </TabItem>
-            <TabItem Header="NumericUpDown">
-                <pages:NumericUpDownDemo />
-            </TabItem>
-            <TabItem Header="PathIcon">
-                <pages:PathIconDemo />
-            </TabItem>
-            <TabItem Header="ProgressBar">
-                <pages:ProgressBarDemo />
-            </TabItem>
-            <TabItem Header="RadioButton">
-                <pages:RadioButtonDemo />
-            </TabItem>
-            <TabItem Header="RefreshContainer">
-                <pages:RefreshContainerDemo />
-            </TabItem>
-            <TabItem Header="RepeatButton">
-                <pages:RepeatButtonDemo />
-            </TabItem>
-            <TabItem Header="ScrollViewer">
-                <pages:ScrollViewerDemo />
-            </TabItem>
-            <TabItem Header="SelectableTextBlock">
-                <pages:SelectableTextBlockDemo />
-            </TabItem>
-            <TabItem Header="Slider">
-                <pages:SliderDemo />
-            </TabItem>
             <TabItem Header="SplitView">
                 <pages:SplitViewDemo />
             </TabItem>
-            <TabItem Header="TabControl">
-                <pages:TabControlDemo />
-            </TabItem>
-            <TabItem Header="TextBlock">
-                <pages:TextBlockDemo />
-            </TabItem>
-            <TabItem Header="TextBox">
-                <pages:TextBoxDemo />
-            </TabItem>
-            <TabItem Header="ThemeVariantScope">
-                <pages:ThemeVariantDemo />
-            </TabItem>
-            <TabItem Header="TimePicker">
-                <pages:TimePickerDemo />
-            </TabItem>
-            <TabItem Header="ToggleButton">
-                <pages:ToggleButtonDemo />
-            </TabItem>
-            <TabItem Header="ToggleSwitch">
-                <pages:ToggleSwitchDemo />
-            </TabItem>
             <TabItem Header="ToolTip">
                 <pages:ToolTipDemo />
             </TabItem>
-            <TabItem Header="TreeView">
+            <TabItem
-                <pages:TreeViewDemo />
+                Theme="{DynamicResource CategoryTabItem}"
+                Header="Feedback" />
+            <TabItem Header="DataValidationErrors">
+                <pages:DataValidationErrorsDemo />
+            </TabItem>
+            <TabItem Header="Notification">
+                <pages:NotificationDemo />
+            </TabItem>
+            <TabItem Header="ProgressBar">
+                <pages:ProgressBarDemo />
+            </TabItem>
+            <TabItem Header="RefreshContainer">
+                <pages:RefreshContainerDemo />
+            </TabItem>
+            <TabItem
+                Theme="{DynamicResource CategoryTabItem}"
+                Header="Other" />
+            <TabItem Header="GridSplitter">
+                <pages:GridSplitterDemo />
+            </TabItem>
+            <TabItem Header="Menu">
+                <pages:MenuDemo />
+            </TabItem>
+            <TabItem Header="ScrollViewer">
+                <pages:ScrollViewerDemo />
+            </TabItem>
+            <TabItem Header="ThemeVariantScope">
+                <pages:ThemeVariantDemo />
             </TabItem>
         </TabControl>
     </Grid>
-
 </UserControl>

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

@@ -114,6 +114,12 @@ public partial class MainViewModel : ObservableObject
                         Command = SelectLocaleCommand,
                         CommandParameter = new CultureInfo("de-de")
                     },
+                    new MenuItemViewModel
+                    {
+                        Header = "Español",
+                        Command = SelectLocaleCommand,
+                        CommandParameter = new CultureInfo("es-es")
+                    },
                 ]
             }
         ];

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

@@ -1,11 +0,0 @@
-<Application
-    x:Class="Semi.Avalonia.TreeDataGrid.Demo.App"
-    xmlns="https://github.com/avaloniaui"
-    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-    xmlns:semi="https://irihi.tech/semi">
-
-    <Application.Styles>
-        <semi:SemiTheme Locale="zh-CN" />
-        <StyleInclude Source="avares://Semi.Avalonia.TreeDataGrid/Index.axaml" />
-    </Application.Styles>
-</Application>

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

@@ -1,23 +0,0 @@
-using Avalonia;
-using Avalonia.Controls.ApplicationLifetimes;
-using Avalonia.Markup.Xaml;
-
-namespace Semi.Avalonia.TreeDataGrid.Demo;
-
-public partial class App : Application
-{
-    public override void Initialize()
-    {
-        AvaloniaXamlLoader.Load(this);
-    }
-
-    public override void OnFrameworkInitializationCompleted()
-    {
-        if (ApplicationLifetime is IClassicDesktopStyleApplicationLifetime desktop)
-        {
-            desktop.MainWindow = new MainWindow();
-        }
-
-        base.OnFrameworkInitializationCompleted();
-    }
-}

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

@@ -1,138 +0,0 @@
-<Window
-    x:Class="Semi.Avalonia.TreeDataGrid.Demo.MainWindow"
-    xmlns="https://github.com/avaloniaui"
-    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-    xmlns:converters="clr-namespace:Semi.Avalonia.TreeDataGrid.Demo.Converters"
-    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
-    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
-    xmlns:vm="clr-namespace:Semi.Avalonia.TreeDataGrid.Demo.ViewModels;assembly=Semi.Avalonia.TreeDataGrid.Demo"
-    Title="Semi.Avalonia.TreeDataGrid.Demo"
-    d:DesignHeight="450"
-    d:DesignWidth="800"
-    x:DataType="vm:MainViewModel"
-    mc:Ignorable="d">
-    <Window.Resources>
-        <converters:FileIconConverter x:Key="FileIconConverter">
-            <PathGeometry x:Key="file">M14,2H6A2,2 0 0,0 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2M18,20H6V4H13V9H18V20Z</PathGeometry>
-            <PathGeometry x:Key="folderOpen">M6.1,10L4,18V8H21A2,2 0 0,0 19,6H12L10,4H4A2,2 0 0,0 2,6V18A2,2 0 0,0 4,20H19C19.9,20 20.7,19.4 20.9,18.5L23.2,10H6.1M19,18H6L7.6,12H20.6L19,18Z</PathGeometry>
-            <PathGeometry x:Key="folderClosed">M20,18H4V8H20M20,6H12L10,4H4C2.89,4 2,4.89 2,6V18A2,2 0 0,0 4,20H20A2,2 0 0,0 22,18V8C22,6.89 21.1,6 20,6Z</PathGeometry>
-        </converters:FileIconConverter>
-    </Window.Resources>
-    <Grid RowDefinitions="Auto, *">
-        <Button
-            HorizontalAlignment="Right"
-            Click="Button_OnClick"
-            Content="Theme" />
-        <TabControl Grid.Row="1">
-            <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="#20808080" />
-                        </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
-                                        Width="16"
-                                        Height="16"
-                                        Margin="8,0"
-                                        VerticalAlignment="Center">
-                                        <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="#20808080" />
-                            </Style>
-                        </TreeDataGrid.Styles>
-                    </TreeDataGrid>
-                </Grid>
-            </TabItem>
-        </TabControl>
-    </Grid>
-</Window>

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

@@ -1,36 +0,0 @@
-using Avalonia;
-using Avalonia.Controls;
-using Avalonia.Input;
-using Avalonia.Interactivity;
-using Avalonia.Styling;
-using Semi.Avalonia.TreeDataGrid.Demo.ViewModels;
-
-namespace Semi.Avalonia.TreeDataGrid.Demo;
-
-public partial class MainWindow : Window
-{
-    public MainWindow()
-    {
-        InitializeComponent();
-        this.DataContext = new MainViewModel();
-    }
-
-    private void Button_OnClick(object? sender, RoutedEventArgs e)
-    {
-        var app = Application.Current;
-        if (app is not null)
-        {
-            var theme = app.ActualThemeVariant;
-            app.RequestedThemeVariant = theme == ThemeVariant.Dark ? ThemeVariant.Light : ThemeVariant.Dark;
-        }
-    }
-    
-    private void SelectedPath_KeyDown(object? sender, KeyEventArgs e)
-    {
-        if (e.Key == Key.Enter)
-        {
-            var vm = (MainViewModel)DataContext!;
-            vm.FilesContext.SelectedPath = ((TextBox)sender!).Text;
-        }
-    }
-}

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

@@ -1,31 +0,0 @@
-using System;
-using Avalonia;
-using Avalonia.Media;
-
-namespace Semi.Avalonia.TreeDataGrid.Demo;
-
-sealed class Program
-{
-    // Initialization code. Don't use any Avalonia, third-party APIs or any
-    // SynchronizationContext-reliant code before AppMain is called: things aren't initialized
-    // yet and stuff might break.
-    [STAThread]
-    public static void Main(string[] args) => BuildAvaloniaApp()
-        .With(new FontManagerOptions
-        {
-            FontFallbacks =
-            [
-                new FontFallback
-                {
-                    FontFamily = new FontFamily("Microsoft YaHei")
-                }
-            ]
-        })
-        .StartWithClassicDesktopLifetime(args);
-
-    // Avalonia configuration, don't remove; also used by visual designer.
-    public static AppBuilder BuildAvaloniaApp()
-        => AppBuilder.Configure<App>()
-            .UsePlatformDetect()
-            .LogToTrace();
-}

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

@@ -1,32 +0,0 @@
-<Project Sdk="Microsoft.NET.Sdk">
-    <PropertyGroup>
-        <OutputType>WinExe</OutputType>
-        <TargetFramework>net8.0</TargetFramework>
-        <Nullable>enable</Nullable>
-        <BuiltInComInteropSupport>true</BuiltInComInteropSupport>
-        <LangVersion>latest</LangVersion>
-        <ApplicationManifest>app.manifest</ApplicationManifest>
-        <AvaloniaUseCompiledBindingsByDefault>true</AvaloniaUseCompiledBindingsByDefault>
-        <!-- Uncomment below to enable Native AOT compilation-->
-        <!--<PublishAot>true</PublishAot>-->
-        <!--<IncludeNativeLibrariesForSelfExtract>true</IncludeNativeLibrariesForSelfExtract>-->
-    </PropertyGroup>
-
-    <Import Project="../Directory.Build.props"/>
-
-    <ItemGroup>
-        <PackageReference Include="Avalonia" Version="$(AvaloniaVersion)"/>
-        <PackageReference Include="Avalonia.Desktop" Version="$(AvaloniaVersion)"/>
-        <!--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)"/>
-    </ItemGroup>
-
-    <ItemGroup>
-        <ProjectReference Include="..\..\src\Semi.Avalonia.TreeDataGrid\Semi.Avalonia.TreeDataGrid.csproj"/>
-        <ProjectReference Include="..\..\src\Semi.Avalonia\Semi.Avalonia.csproj"/>
-    </ItemGroup>
-</Project>

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

@@ -1,184 +0,0 @@
-using System;
-using System.Collections.Generic;
-using System.Collections.ObjectModel;
-using System.Linq;
-using Avalonia.Controls;
-using Avalonia.Controls.Models.TreeDataGrid;
-using CommunityToolkit.Mvvm.ComponentModel;
-
-namespace Semi.Avalonia.TreeDataGrid.Demo.ViewModels;
-
-public class SongsPageViewModel: ObservableObject
-{
-    private readonly ObservableCollection<SongViewModel> _songs;
-    
-    public FlatTreeDataGridSource<SongViewModel> Songs { get; }
-
-    public SongsPageViewModel()
-    {
-        _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)),
-            }
-        };
-    }
-
-}
-
-
-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 { get; set; } = new List<string>()
-    {
-        "A.S.I.A",
-        "饕餮人间",
-        "七步咙咚呛",
-        "大惊小怪",
-        "The ONE",
-        "以梦为马 (壮志骄阳版)",
-        "emo了",
-        "一眼万年",
-        "冲刺吧",
-        "爱的赏味期限",
-        "COSMIC ANTHEM / 手紙",
-        "世界晚安",
-        "明年也要好好长大",
-        "320万年前",
-        "W.O.R.L.D.",
-    };
-
-    public static List<Song> Songs { get; set; } = new List<Song>()
-    {
-        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 class SongViewModel: ObservableObject
-{
-    private string? _title;
-    private string? _artist;
-    private string? _album;
-    private int? _countOfComment;
-    private bool? _isSelected;
-    public string? Title
-    {
-        get => _title;
-        set => SetProperty(ref _title, value);
-    }
-    public string? Artist
-    {
-        get => _artist;
-        set => SetProperty(ref _artist, value);
-    }
-    public string? Album
-    {
-        get => _album;
-        set => SetProperty(ref _album, value);
-    }
-    public int? CountOfComment
-    {
-        get => _countOfComment;
-        set => SetProperty(ref _countOfComment, value);
-    }
-    public bool? IsSelected
-    {
-        get => _isSelected;
-        set => SetProperty(ref _isSelected, value);
-    }
-    
-}

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

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

src/Package.props

@@ -1,9 +1,9 @@
 <Project>
     <PropertyGroup>
-        <TargetFrameworks>net6.0;net8.0;netstandard2.0</TargetFrameworks>
+        <TargetFrameworks>netstandard2.0;net6.0;net8.0</TargetFrameworks>
         <Nullable>enable</Nullable>
         <LangVersion>latest</LangVersion>
-        <Version>11.2.1.4</Version>
+        <Version>11.2.1.7</Version>
         <Authors>IRIHI Technology Co., Ltd.</Authors>
         <Description>Avalonia Theme inspired by Semi Design.</Description>
         <RepositoryUrl>https://github.com/irihitech/Semi.Avalonia</RepositoryUrl>

src/Semi.Avalonia.ColorPicker/AssemblyInfo.cs

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

src/Semi.Avalonia.ColorPicker/ColorPickerSemiTheme.axaml

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

src/Semi.Avalonia.ColorPicker/ColorPickerSemiTheme.axaml.cs

@@ -0,0 +1,7 @@
+using Avalonia.Styling;
+
+namespace Semi.Avalonia.ColorPicker;
+
+public class ColorPickerSemiTheme : Styles
+{
+}

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

@@ -1,62 +1,48 @@
 <ResourceDictionary
     xmlns="https://github.com/avaloniaui"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-    xmlns:controls="using:Avalonia.Controls"
     xmlns:converters="using:Avalonia.Controls.Converters"
-    xmlns:primitives="using:Avalonia.Controls.Primitives"
     x:CompileBindings="True">
-    <ResourceDictionary.MergedDictionaries>
-        <ResourceInclude Source="avares://Semi.Avalonia.ColorPicker/Controls/ColorPreviewer.axaml" />
-        <ResourceInclude Source="avares://Semi.Avalonia.ColorPicker/Controls/ColorSlider.axaml" />
-        <ResourceInclude Source="avares://Semi.Avalonia.ColorPicker/Controls/ColorSpectrum.axaml" />
-        <ResourceInclude Source="avares://Semi.Avalonia.ColorPicker/Controls/ColorView.axaml" />
-    </ResourceDictionary.MergedDictionaries>
-
     <converters:CornerRadiusFilterConverter x:Key="LeftCornerRadiusFilterConverter" Filter="TopLeft, BottomLeft" />
     <converters:ToBrushConverter x:Key="ToBrushConverter" />
 
     <ControlTheme x:Key="{x:Type ColorPicker}" TargetType="ColorPicker">
-        <Setter Property="CornerRadius" Value="3" />
-        <Setter Property="Height" Value="32" />
-        <Setter Property="Width" Value="64" />
         <Setter Property="MinWidth" Value="64" />
-        <Setter Property="HorizontalContentAlignment" Value="Stretch" />
+        <Setter Property="HorizontalAlignment" Value="Center" />
-        <Setter Property="VerticalContentAlignment" Value="Stretch" />
+        <Setter Property="MinHeight" Value="{DynamicResource ColorPickerMinHeight}" />
+        <Setter Property="CornerRadius" Value="{DynamicResource ColorPickerCornerRadius}" />
         <Setter Property="Content">
             <Template>
                 <Panel>
                     <Border
                         Margin="1,1,0,1"
-                        HorizontalAlignment="Stretch"
-                        VerticalAlignment="Stretch"
                         Background="{DynamicResource ColorControlCheckeredBackgroundBrush}"
-                        CornerRadius="{TemplateBinding CornerRadius,
+                        CornerRadius="{TemplateBinding CornerRadius, Converter={StaticResource LeftCornerRadiusFilterConverter}}" />
-                                                       Converter={StaticResource LeftCornerRadiusFilterConverter}}" />
                     <Border
                         Margin="1,1,0,1"
-                        HorizontalAlignment="Stretch"
+                        Background="{TemplateBinding HsvColor, Converter={StaticResource ToBrushConverter}}"
-                        VerticalAlignment="Stretch"
+                        CornerRadius="{TemplateBinding CornerRadius, Converter={StaticResource LeftCornerRadiusFilterConverter}}" />
-                        Background="{TemplateBinding HsvColor,
-                                                     Converter={StaticResource ToBrushConverter}}"
-                        CornerRadius="{TemplateBinding CornerRadius,
-                                                       Converter={StaticResource LeftCornerRadiusFilterConverter}}" />
                 </Panel>
             </Template>
         </Setter>
         <Setter Property="Palette">
-            <controls:FluentColorPalette />
+            <FluentColorPalette />
         </Setter>
         <Setter Property="Template">
             <ControlTemplate TargetType="{x:Type ColorPicker}">
                 <DropDownButton
                     Width="{TemplateBinding Width}"
                     Height="{TemplateBinding Height}"
-                    HorizontalContentAlignment="Stretch"
+                    MinWidth="{TemplateBinding MinWidth}"
-                    VerticalContentAlignment="Stretch"
+                    MinHeight="{TemplateBinding MinHeight}"
-                    ClipToBounds="True"
+                    HorizontalAlignment="{TemplateBinding HorizontalAlignment}"
+                    VerticalAlignment="{TemplateBinding VerticalAlignment}"
+                    HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
+                    VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
                     Content="{TemplateBinding Content}"
                     ContentTemplate="{TemplateBinding ContentTemplate}"
                     CornerRadius="{TemplateBinding CornerRadius}"
+                    ClipToBounds="True"
                     UseLayoutRounding="False">
                     <DropDownButton.Styles>
                         <Style Selector="FlyoutPresenter.nopadding">
@@ -113,13 +99,10 @@
                                     <!--  Spectrum Tab  -->
                                     <TabItem IsVisible="{TemplateBinding IsColorSpectrumVisible}">
                                         <TabItem.Header>
-                                            <Border Height="{DynamicResource ColorViewTabStripHeight}">
+                                            <PathIcon
-                                                <PathIcon
+                                                Theme="{StaticResource InnerPathIcon}"
-                                                    Width="16"
+                                                Data="{DynamicResource ColorViewSpectrumIconGlyph}"
-                                                    Height="16"
+                                                Foreground="{Binding $parent[TabItem].Foreground}" />
-                                                    Data="{DynamicResource ColorViewSpectrumIconGlyph}"
-                                                    Foreground="{Binding $parent[TabItem].Foreground}" />
-                                            </Border>
                                         </TabItem.Header>
                                         <Grid Margin="12" RowDefinitions="*">
                                             <Grid.ColumnDefinitions>
@@ -127,7 +110,7 @@
                                                 <ColumnDefinition Width="*" />
                                                 <ColumnDefinition Width="Auto" MinWidth="32" />
                                             </Grid.ColumnDefinitions>
-                                            <primitives:ColorSlider
+                                            <ColorSlider
                                                 Name="ColorSpectrumThirdComponentSlider"
                                                 Grid.Column="0"
                                                 Margin="0,0,12,0"
@@ -141,8 +124,8 @@
                                                 IsPerceptive="False"
                                                 IsVisible="{TemplateBinding IsColorSpectrumSliderVisible}"
                                                 Orientation="Vertical" />
-                                            <primitives:ColorSpectrum
+                                            <ColorSpectrum
-                                                x:Name="ColorSpectrum"
+                                                Name="ColorSpectrum"
                                                 Grid.Column="1"
                                                 HorizontalAlignment="Stretch"
                                                 VerticalAlignment="Stretch"
@@ -155,7 +138,7 @@
                                                 MinSaturation="{TemplateBinding MinSaturation}"
                                                 MinValue="{TemplateBinding MinValue}"
                                                 Shape="{TemplateBinding ColorSpectrumShape}" />
-                                            <primitives:ColorSlider
+                                            <ColorSlider
                                                 Name="ColorSpectrumAlphaSlider"
                                                 Grid.Column="2"
                                                 Margin="12,0,0,0"
@@ -167,24 +150,21 @@
                                                 HsvColor="{Binding HsvColor, ElementName=ColorSpectrum}"
                                                 IsEnabled="{TemplateBinding IsAlphaEnabled}"
                                                 Orientation="Vertical">
-                                                <primitives:ColorSlider.IsVisible>
+                                                <ColorSlider.IsVisible>
                                                     <MultiBinding Converter="{x:Static BoolConverters.And}">
                                                         <Binding Path="IsAlphaVisible" RelativeSource="{RelativeSource TemplatedParent}" />
                                                     </MultiBinding>
-                                                </primitives:ColorSlider.IsVisible>
+                                                </ColorSlider.IsVisible>
-                                            </primitives:ColorSlider>
+                                            </ColorSlider>
                                         </Grid>
                                     </TabItem>
                                     <!--  Palette Tab  -->
                                     <TabItem IsVisible="{TemplateBinding IsColorPaletteVisible}">
                                         <TabItem.Header>
-                                            <Border Height="{DynamicResource ColorViewTabStripHeight}">
+                                            <PathIcon
-                                                <PathIcon
+                                                Theme="{StaticResource InnerPathIcon}"
-                                                    Width="16"
+                                                Data="{DynamicResource ColorViewPaletteIconGlyph}"
-                                                    Height="16"
+                                                Foreground="{Binding $parent[TabItem].Foreground}" />
-                                                    Data="{DynamicResource ColorViewPaletteIconGlyph}"
-                                                    Foreground="{Binding $parent[TabItem].Foreground}" />
-                                            </Border>
                                         </TabItem.Header>
                                         <ListBox
                                             Margin="12"
@@ -217,18 +197,15 @@
                                     <!--  Components Tab  -->
                                     <TabItem IsVisible="{TemplateBinding IsColorComponentsVisible}">
                                         <TabItem.Header>
-                                            <Border Height="{DynamicResource ColorViewTabStripHeight}">
+                                            <PathIcon
-                                                <PathIcon
+                                                Theme="{StaticResource InnerPathIcon}"
-                                                    Width="16"
+                                                Data="{DynamicResource ColorViewComponentsIconGlyph}"
-                                                    Height="16"
+                                                Foreground="{Binding $parent[TabItem].Foreground}" />
-                                                    Data="{DynamicResource ColorViewComponentsIconGlyph}"
-                                                    Foreground="{Binding $parent[TabItem].Foreground}" />
-                                            </Border>
                                         </TabItem.Header>
                                         <Grid
                                             Margin="12"
                                             ColumnDefinitions="Auto,*"
-                                            RowDefinitions="Auto,24,1*,1*,1*,1*,12"
+                                            RowDefinitions="Auto,24,*,*,*,*,12"
                                             Tag="{TemplateBinding ColorModel}">
                                             <Grid.Styles>
                                                 <Style Selector="NumericUpDown">
@@ -272,13 +249,13 @@
                                                 Grid.Row="0"
                                                 Grid.Column="0"
                                                 Grid.ColumnSpan="2"
-                                                ColumnDefinitions="1*,12,1*">
+                                                ColumnDefinitions="*,12,*">
                                                 <!--  RadioButtonGroup  -->
                                                 <Border
                                                     Padding="2"
                                                     Background="{DynamicResource ColorViewRadioButtonPointeroverBackground}"
                                                     CornerRadius="3">
-                                                    <Grid ColumnDefinitions="1*,1*" IsVisible="{TemplateBinding IsColorModelVisible}">
+                                                    <Grid ColumnDefinitions="*,*" IsVisible="{TemplateBinding IsColorModelVisible}">
                                                         <RadioButton
                                                             Name="RgbRadioButton"
                                                             Grid.Column="0"
@@ -287,9 +264,9 @@
                                                             Content="RGB"
                                                             CornerRadius="3,0,0,3"
                                                             IsChecked="{TemplateBinding ColorModel,
-                                                                                        Converter={StaticResource EnumToBoolConverter},
+                                                            Converter={StaticResource EnumToBoolConverter},
-                                                                                        ConverterParameter={x:Static controls:ColorModel.Rgba},
+                                                            ConverterParameter={x:Static ColorModel.Rgba},
-                                                                                        Mode=TwoWay}"
+                                                            Mode=TwoWay}"
                                                             Theme="{DynamicResource ColorViewRadioButton}" />
                                                         <RadioButton
                                                             Name="HsvRadioButton"
@@ -299,21 +276,20 @@
                                                             Content="HSV"
                                                             CornerRadius="0,3,3,0"
                                                             IsChecked="{TemplateBinding ColorModel,
-                                                                                        Converter={StaticResource EnumToBoolConverter},
+                                                            Converter={StaticResource EnumToBoolConverter},
-                                                                                        ConverterParameter={x:Static controls:ColorModel.Hsva},
+                                                            ConverterParameter={x:Static ColorModel.Hsva},
-                                                                                        Mode=TwoWay}"
+                                                            Mode=TwoWay}"
                                                             Theme="{DynamicResource ColorViewRadioButton}" />
                                                     </Grid>
                                                 </Border>
                                                 <TextBox
                                                     Name="PART_HexTextBox"
                                                     Grid.Column="2"
-                                                    Height="32"
                                                     HorizontalAlignment="Stretch"
                                                     AutomationProperties.Name="Hexadecimal Color"
                                                     InnerLeftContent="#"
                                                     IsVisible="{TemplateBinding IsHexInputVisible}"
-                                                    MaxLength="9" />
+                                                    MaxLength="8" />
                                             </Grid>
                                             <!--  Color component editing controls  -->
                                             <!--  Component 1 RGB:Red HSV:Hue  -->
@@ -332,15 +308,14 @@
                                                 NumberFormat="{StaticResource ColorViewComponentNumberFormat}"
                                                 ShowButtonSpinner="False"
                                                 Value="{Binding Value, ElementName=Component1Slider}" />
-                                            <primitives:ColorSlider
+                                            <ColorSlider
-                                                x:Name="Component1Slider"
+                                                Name="Component1Slider"
                                                 Grid.Row="2"
                                                 Grid.Column="1"
                                                 HorizontalAlignment="Stretch"
                                                 VerticalAlignment="Center"
                                                 ColorComponent="Component1"
-                                                ColorModel="{TemplateBinding ColorModel,
+                                                ColorModel="{TemplateBinding ColorModel,Mode=OneWay}"
-                                                                             Mode=OneWay}"
                                                 HsvColor="{Binding HsvColor, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}"
                                                 IsRoundingEnabled="True"
                                                 IsSnapToTickEnabled="True"
@@ -363,15 +338,14 @@
                                                 NumberFormat="{StaticResource ColorViewComponentNumberFormat}"
                                                 ShowButtonSpinner="False"
                                                 Value="{Binding Value, ElementName=Component2Slider}" />
-                                            <primitives:ColorSlider
+                                            <ColorSlider
-                                                x:Name="Component2Slider"
+                                                Name="Component2Slider"
                                                 Grid.Row="3"
                                                 Grid.Column="1"
                                                 HorizontalAlignment="Stretch"
                                                 VerticalAlignment="Center"
                                                 ColorComponent="Component2"
-                                                ColorModel="{TemplateBinding ColorModel,
+                                                ColorModel="{TemplateBinding ColorModel,Mode=OneWay}"
-                                                                             Mode=OneWay}"
                                                 HsvColor="{Binding HsvColor, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}"
                                                 IsRoundingEnabled="True"
                                                 IsSnapToTickEnabled="True"
@@ -394,15 +368,14 @@
                                                 NumberFormat="{StaticResource ColorViewComponentNumberFormat}"
                                                 ShowButtonSpinner="False"
                                                 Value="{Binding Value, ElementName=Component3Slider}" />
-                                            <primitives:ColorSlider
+                                            <ColorSlider
-                                                x:Name="Component3Slider"
+                                                Name="Component3Slider"
                                                 Grid.Row="4"
                                                 Grid.Column="1"
                                                 HorizontalAlignment="Stretch"
                                                 VerticalAlignment="Center"
                                                 ColorComponent="Component3"
-                                                ColorModel="{TemplateBinding ColorModel,
+                                                ColorModel="{TemplateBinding ColorModel,Mode=OneWay}"
-                                                                             Mode=OneWay}"
                                                 HsvColor="{Binding HsvColor, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}"
                                                 IsRoundingEnabled="True"
                                                 IsSnapToTickEnabled="True"
@@ -432,34 +405,33 @@
                                                     </MultiBinding>
                                                 </NumericUpDown.IsVisible>
                                             </NumericUpDown>
-                                            <primitives:ColorSlider
+                                            <ColorSlider
-                                                x:Name="AlphaComponentSlider"
+                                                Name="AlphaComponentSlider"
                                                 Grid.Row="5"
                                                 Grid.Column="1"
                                                 HorizontalAlignment="Stretch"
                                                 VerticalAlignment="Center"
                                                 ColorComponent="Alpha"
-                                                ColorModel="{TemplateBinding ColorModel,
+                                                ColorModel="{TemplateBinding ColorModel,Mode=OneWay}"
-                                                                             Mode=OneWay}"
                                                 HsvColor="{Binding HsvColor, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}"
                                                 IsEnabled="{TemplateBinding IsAlphaEnabled}"
                                                 IsRoundingEnabled="True"
                                                 IsSnapToTickEnabled="True"
                                                 Orientation="Horizontal"
                                                 TickFrequency="1">
-                                                <primitives:ColorSlider.IsVisible>
+                                                <ColorSlider.IsVisible>
                                                     <MultiBinding Converter="{x:Static BoolConverters.And}">
                                                         <Binding Path="IsAlphaVisible" RelativeSource="{RelativeSource TemplatedParent}" />
                                                         <Binding Path="IsComponentSliderVisible" RelativeSource="{RelativeSource TemplatedParent}" />
                                                     </MultiBinding>
-                                                </primitives:ColorSlider.IsVisible>
+                                                </ColorSlider.IsVisible>
-                                            </primitives:ColorSlider>
+                                            </ColorSlider>
                                         </Grid>
                                     </TabItem>
                                 </TabControl>
                                 <!--  Previewer  -->
                                 <!--  Note that top/bottom margins have -5 to remove for drop shadow padding  -->
-                                <primitives:ColorPreviewer
+                                <ColorPreviewer
                                     Grid.Row="1"
                                     Margin="12,-5,12,7"
                                     HsvColor="{Binding HsvColor, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}"
@@ -471,9 +443,9 @@
                 </DropDownButton>
             </ControlTemplate>
         </Setter>
-        
+
         <Style Selector="^ /template/ DropDownButton">
-            <Setter Property="Padding" Value="0 0 10 0"></Setter>
+            <Setter Property="Padding" Value="0 0 10 0" />
         </Style>
     </ControlTheme>
 
@@ -481,7 +453,7 @@
         x:Key="HexColorPicker"
         BasedOn="{StaticResource {x:Type ColorPicker}}"
         TargetType="ColorPicker">
-        <Setter Property="Width" Value="200" />
+        <Setter Property="MinWidth" Value="200" />
         <Setter Property="Content">
             <Template>
                 <Grid ColumnDefinitions="Auto, *">
@@ -499,8 +471,7 @@
                         Margin="1,1,0,1"
                         HorizontalAlignment="Stretch"
                         VerticalAlignment="Stretch"
-                        Background="{TemplateBinding HsvColor,
+                        Background="{TemplateBinding HsvColor,Converter={StaticResource ToBrushConverter}}"
-                                                     Converter={StaticResource ToBrushConverter}}"
                         CornerRadius="{TemplateBinding CornerRadius}" />
                     <TextBlock
                         Grid.Column="1"
@@ -525,9 +496,12 @@
                 <DropDownButton
                     Width="{TemplateBinding Width}"
                     Height="{TemplateBinding Height}"
-                    HorizontalContentAlignment="Stretch"
+                    MinWidth="{TemplateBinding MinWidth}"
-                    VerticalContentAlignment="Stretch"
+                    MinHeight="{TemplateBinding MinHeight}"
-                    ClipToBounds="True"
+                    HorizontalAlignment="{TemplateBinding HorizontalAlignment}"
+                    VerticalAlignment="{TemplateBinding VerticalAlignment}"
+                    HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
+                    VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
                     Content="{TemplateBinding Content}"
                     ContentTemplate="{TemplateBinding ContentTemplate}"
                     CornerRadius="{TemplateBinding CornerRadius}"
@@ -557,8 +531,8 @@
                                     Grid.Row="0"
                                     CornerRadius="8 8 0 0"
                                     ClipToBounds="True">
-                                    <primitives:ColorSpectrum
+                                    <ColorSpectrum
-                                        x:Name="ColorSpectrum"
+                                        Name="ColorSpectrum"
                                         HorizontalAlignment="Stretch"
                                         VerticalAlignment="Stretch"
                                         Components="{TemplateBinding ColorSpectrumComponents}"
@@ -571,7 +545,7 @@
                                         MinValue="{TemplateBinding MinValue}"
                                         Shape="{TemplateBinding ColorSpectrumShape}" />
                                 </Border>
-                                <primitives:ColorSlider
+                                <ColorSlider
                                     Name="ColorSpectrumThirdComponentSlider"
                                     Grid.Row="1"
                                     HorizontalAlignment="Stretch"
@@ -583,8 +557,8 @@
                                     IsVisible="{TemplateBinding IsColorSpectrumSliderVisible}"
                                     Orientation="Horizontal" />
 
-                                <primitives:ColorSlider
+                                <ColorSlider
-                                    x:Name="ColorSpectrumAlphaSlider"
+                                    Name="ColorSpectrumAlphaSlider"
                                     Grid.Row="2"
                                     HorizontalAlignment="Stretch"
                                     VerticalAlignment="Center"
@@ -597,8 +571,7 @@
                                     IsRoundingEnabled="True"
                                     IsSnapToTickEnabled="True"
                                     TickFrequency="1"
-                                    Orientation="Horizontal">
+                                    Orientation="Horizontal" />
-                                </primitives:ColorSlider>
                                 <StackPanel
                                     Grid.Row="3"
                                     HorizontalAlignment="Stretch"
@@ -675,7 +648,7 @@
         x:Key="HexSimpleColorPicker"
         BasedOn="{StaticResource SimpleColorPicker}"
         TargetType="ColorPicker">
-        <Setter Property="Width" Value="200" />
+        <Setter Property="MinWidth" Value="200" />
         <Setter Property="Content">
             <Template>
                 <Grid ColumnDefinitions="Auto, *">
@@ -693,8 +666,7 @@
                         Margin="1,1,0,1"
                         HorizontalAlignment="Stretch"
                         VerticalAlignment="Stretch"
-                        Background="{TemplateBinding HsvColor,
+                        Background="{TemplateBinding HsvColor,Converter={StaticResource ToBrushConverter}}"
-                                                     Converter={StaticResource ToBrushConverter}}"
                         CornerRadius="{TemplateBinding CornerRadius}" />
                     <TextBlock
                         Grid.Column="1"
@@ -709,4 +681,4 @@
         </Setter>
     </ControlTheme>
 
-</ResourceDictionary>
+</ResourceDictionary>

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

@@ -33,17 +33,16 @@
                                 Name="PART_AccentDecrement2Border"
                                 Grid.Column="0"
                                 Background="{TemplateBinding HsvColor,
-                                                             Converter={StaticResource AccentColorConverter},
+                                Converter={StaticResource AccentColorConverter},
-                                                             ConverterParameter='-2'}"
+                                ConverterParameter='-2'}"
-                                CornerRadius="{TemplateBinding CornerRadius,
+                                CornerRadius="{TemplateBinding CornerRadius,Converter={StaticResource LeftCornerRadiusFilterConverter}}"
-                                                               Converter={StaticResource LeftCornerRadiusFilterConverter}}"
                                 Tag="-2" />
                             <Border
                                 Name="PART_AccentDecrement1Border"
                                 Grid.Column="1"
                                 Background="{TemplateBinding HsvColor,
-                                                             Converter={StaticResource AccentColorConverter},
+                                Converter={StaticResource AccentColorConverter},
-                                                             ConverterParameter='-1'}"
+                                ConverterParameter='-1'}"
                                 Tag="-1" />
                         </Grid>
                         <!--  Right accent colors  -->
@@ -63,17 +62,16 @@
                                 Name="PART_AccentIncrement1Border"
                                 Grid.Column="0"
                                 Background="{TemplateBinding HsvColor,
-                                                             Converter={StaticResource AccentColorConverter},
+                                Converter={StaticResource AccentColorConverter},
-                                                             ConverterParameter='1'}"
+                                ConverterParameter='1'}"
                                 Tag="1" />
                             <Border
                                 Name="PART_AccentIncrement2Border"
                                 Grid.Column="1"
                                 Background="{TemplateBinding HsvColor,
-                                                             Converter={StaticResource AccentColorConverter},
+                                Converter={StaticResource AccentColorConverter},
-                                                             ConverterParameter='2'}"
+                                ConverterParameter='2'}"
-                                CornerRadius="{TemplateBinding CornerRadius,
+                                CornerRadius="{TemplateBinding CornerRadius,Converter={StaticResource RightCornerRadiusFilterConverter}}"
-                                                               Converter={StaticResource RightCornerRadiusFilterConverter}}"
                                 Tag="2" />
                         </Grid>
                         <!--  Preview color: Must be last for drop shadow Z-index  -->
@@ -85,12 +83,13 @@
                             BoxShadow="{DynamicResource ColorPreviewerMainBoxShadow}"
                             CornerRadius="{TemplateBinding CornerRadius}">
                             <Panel>
-                                <Border Background="{DynamicResource ColorControlCheckeredBackgroundBrush}" CornerRadius="{TemplateBinding CornerRadius}" />
+                                <Border
+                                    Background="{DynamicResource ColorControlCheckeredBackgroundBrush}"
+                                    CornerRadius="{TemplateBinding CornerRadius}" />
                                 <Border
                                     HorizontalAlignment="Stretch"
                                     VerticalAlignment="Stretch"
-                                    Background="{TemplateBinding HsvColor,
+                                    Background="{TemplateBinding HsvColor,Converter={StaticResource ToBrushConverter}}"
-                                                                 Converter={StaticResource ToBrushConverter}}"
                                     CornerRadius="{TemplateBinding CornerRadius}" />
                             </Panel>
                         </Border>
@@ -100,15 +99,15 @@
                         HorizontalAlignment="Stretch"
                         VerticalAlignment="Stretch"
                         CornerRadius="{TemplateBinding CornerRadius}"
-                        IsVisible="{TemplateBinding IsAccentColorsVisible,
+                        IsVisible="{TemplateBinding IsAccentColorsVisible,Converter={x:Static BoolConverters.Not}}">
-                                                    Converter={x:Static BoolConverters.Not}}">
                         <Panel>
-                            <Border Background="{DynamicResource ColorControlCheckeredBackgroundBrush}" CornerRadius="{TemplateBinding CornerRadius}" />
+                            <Border
+                                Background="{DynamicResource ColorControlCheckeredBackgroundBrush}"
+                                CornerRadius="{TemplateBinding CornerRadius}" />
                             <Border
                                 HorizontalAlignment="Stretch"
                                 VerticalAlignment="Stretch"
-                                Background="{TemplateBinding HsvColor,
+                                Background="{TemplateBinding HsvColor,Converter={StaticResource ToBrushConverter}}"
-                                                             Converter={StaticResource ToBrushConverter}}"
                                 CornerRadius="{TemplateBinding CornerRadius}" />
                         </Panel>
                     </Border>

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

@@ -11,19 +11,17 @@
         <Setter Property="UseLayoutRounding" Value="False" />
         <Setter Property="BorderBrush" Value="{DynamicResource ColorSliderDefaultBorderBrush}" />
         <Setter Property="BorderThickness" Value="{DynamicResource ColorSliderThumbBorderBrush}" />
-        <Setter Property="CornerRadius" Value="999" />
+        <Setter Property="CornerRadius" Value="{DynamicResource ColorSliderThumbCornerRadius}" />
         <Setter Property="Template">
-            <Setter.Value>
+            <ControlTemplate>
-                <ControlTemplate>
+                <Border
-                    <Border
+                    Margin="1"
-                        Margin="1"
+                    Background="{TemplateBinding Background}"
-                        Background="{TemplateBinding Background}"
+                    BorderBrush="{TemplateBinding BorderBrush}"
-                        BorderBrush="{TemplateBinding BorderBrush}"
+                    BorderThickness="{TemplateBinding BorderThickness}"
-                        BorderThickness="{TemplateBinding BorderThickness}"
+                    BoxShadow="{DynamicResource ColorSliderBoxShadow}"
-                        BoxShadow="{DynamicResource ColorSliderBoxShadow}"
+                    CornerRadius="{TemplateBinding CornerRadius}" />
-                        CornerRadius="{TemplateBinding CornerRadius}" />
+            </ControlTemplate>
-                </ControlTemplate>
-            </Setter.Value>
         </Setter>
     </ControlTheme>
 
@@ -45,20 +43,16 @@
                                 HorizontalAlignment="Stretch"
                                 VerticalAlignment="Stretch"
                                 Fill="{DynamicResource ColorControlCheckeredBackgroundBrush}"
-                                RadiusX="{TemplateBinding CornerRadius,
+                                RadiusX="{TemplateBinding CornerRadius,Converter={StaticResource TopLeftCornerRadiusConverter}}"
-                                                          Converter={StaticResource TopLeftCornerRadiusConverter}}"
+                                RadiusY="{TemplateBinding CornerRadius,Converter={StaticResource BottomRightCornerRadiusConverter}}" />
-                                RadiusY="{TemplateBinding CornerRadius,
-                                                          Converter={StaticResource BottomRightCornerRadiusConverter}}" />
                             <Rectangle
                                 Width="{Binding #PART_Track.Bounds.Width}"
                                 Height="{Binding #PART_Track.Bounds.Height}"
                                 HorizontalAlignment="Stretch"
                                 VerticalAlignment="Stretch"
                                 Fill="{TemplateBinding Background}"
-                                RadiusX="{TemplateBinding CornerRadius,
+                                RadiusX="{TemplateBinding CornerRadius,Converter={StaticResource TopLeftCornerRadiusConverter}}"
-                                                          Converter={StaticResource TopLeftCornerRadiusConverter}}"
+                                RadiusY="{TemplateBinding CornerRadius,Converter={StaticResource BottomRightCornerRadiusConverter}}" />
-                                RadiusY="{TemplateBinding CornerRadius,
-                                                          Converter={StaticResource BottomRightCornerRadiusConverter}}" />
                             <Track
                                 Name="PART_Track"
                                 Height="12"
@@ -68,8 +62,7 @@
                                 Maximum="{TemplateBinding Maximum}"
                                 Minimum="{TemplateBinding Minimum}"
                                 Orientation="Horizontal"
-                                Value="{TemplateBinding Value,
+                                Value="{TemplateBinding Value,Mode=TwoWay}">
-                                                        Mode=TwoWay}">
                                 <Track.DecreaseButton>
                                     <RepeatButton
                                         Name="PART_DecreaseButton"
@@ -106,10 +99,8 @@
                                 </Track.IncreaseButton>
                                 <Thumb
                                     Name="ColorSliderThumb"
-                                    Width="16"
+                                    Width="{TemplateBinding Height}"
-                                    Height="16"
+                                    Height="{TemplateBinding Height}"
-                                    Margin="0"
-                                    Padding="0"
                                     DataContext="{TemplateBinding Value}"
                                     Theme="{StaticResource ColorSliderThumbTheme}" />
                             </Track>
@@ -136,20 +127,16 @@
                                 HorizontalAlignment="Stretch"
                                 VerticalAlignment="Stretch"
                                 Fill="{DynamicResource ColorControlCheckeredBackgroundBrush}"
-                                RadiusX="{TemplateBinding CornerRadius,
+                                RadiusX="{TemplateBinding CornerRadius,Converter={StaticResource TopLeftCornerRadiusConverter}}"
-                                                          Converter={StaticResource TopLeftCornerRadiusConverter}}"
+                                RadiusY="{TemplateBinding CornerRadius,Converter={StaticResource BottomRightCornerRadiusConverter}}" />
-                                RadiusY="{TemplateBinding CornerRadius,
-                                                          Converter={StaticResource BottomRightCornerRadiusConverter}}" />
                             <Rectangle
                                 Width="{Binding #PART_Track.Bounds.Width}"
                                 Height="{Binding #PART_Track.Bounds.Height}"
                                 HorizontalAlignment="Stretch"
                                 VerticalAlignment="Stretch"
                                 Fill="{TemplateBinding Background}"
-                                RadiusX="{TemplateBinding CornerRadius,
+                                RadiusX="{TemplateBinding CornerRadius,Converter={StaticResource TopLeftCornerRadiusConverter}}"
-                                                          Converter={StaticResource TopLeftCornerRadiusConverter}}"
+                                RadiusY="{TemplateBinding CornerRadius,Converter={StaticResource BottomRightCornerRadiusConverter}}" />
-                                RadiusY="{TemplateBinding CornerRadius,
-                                                          Converter={StaticResource BottomRightCornerRadiusConverter}}" />
                             <Track
                                 Name="PART_Track"
                                 Width="12"
@@ -159,8 +146,7 @@
                                 Maximum="{TemplateBinding Maximum}"
                                 Minimum="{TemplateBinding Minimum}"
                                 Orientation="Vertical"
-                                Value="{TemplateBinding Value,
+                                Value="{TemplateBinding Value,Mode=TwoWay}">
-                                                        Mode=TwoWay}">
                                 <Track.DecreaseButton>
                                     <RepeatButton
                                         Name="PART_DecreaseButton"
@@ -199,8 +185,6 @@
                                     Name="ColorSliderThumb"
                                     Width="{TemplateBinding Width}"
                                     Height="{TemplateBinding Width}"
-                                    Margin="0"
-                                    Padding="0"
                                     DataContext="{TemplateBinding Value}"
                                     Theme="{StaticResource ColorSliderThumbTheme}" />
                             </Track>
@@ -231,4 +215,4 @@
         </Style>
 
     </ControlTheme>
-</ResourceDictionary>
+</ResourceDictionary>

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

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

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

@@ -1,11 +1,9 @@
 <ResourceDictionary
     xmlns="https://github.com/avaloniaui"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-    xmlns:controls="using:Avalonia.Controls"
     xmlns:converters="using:Avalonia.Controls.Converters"
     xmlns:globalization="using:System.Globalization"
     xmlns:pc="using:Avalonia.Controls.Primitives.Converters"
-    xmlns:primitives="using:Avalonia.Controls.Primitives"
     xmlns:cvts="clr-namespace:Semi.Avalonia.ColorPicker.Converters"
     x:CompileBindings="True">
     <pc:ContrastBrushConverter x:Key="ContrastBrushConverter" />
@@ -19,6 +17,15 @@
     <cvts:ToColorModel x:Key="ToColorModel" />
     <globalization:NumberFormatInfo x:Key="ColorViewComponentNumberFormat" NumberDecimalDigits="0" />
 
+    <Design.PreviewWith>
+        <ColorView
+            Theme="{StaticResource SimpleColorView}"
+            IsAlphaVisible="True"
+            IsAlphaEnabled="True"
+            ColorModel="Hsva"
+            HsvColor="hsv(120,7%,90%)" />
+    </Design.PreviewWith>
+
     <VisualBrush
         x:Key="ColorControlCheckeredBackgroundBrush"
         DestinationRect="0,0,8,8"
@@ -116,12 +123,12 @@
     </ControlTheme>
 
     <ControlTheme x:Key="ColorViewRadioButton" TargetType="RadioButton">
-        <Setter Property="RadioButton.Cursor" Value="Hand" />
+        <Setter Property="Cursor" Value="Hand" />
-        <Setter Property="RadioButton.FontWeight" Value="{DynamicResource ColorViewRadioButtonFontWeight}" />
+        <Setter Property="FontWeight" Value="{DynamicResource ColorViewRadioButtonFontWeight}" />
-        <Setter Property="RadioButton.Padding" Value="{DynamicResource ColorViewRadioButtonPadding}" />
+        <Setter Property="Padding" Value="{DynamicResource ColorViewRadioButtonPadding}" />
-        <Setter Property="RadioButton.Foreground" Value="{DynamicResource ColorViewRadioButtonForeground}" />
+        <Setter Property="Foreground" Value="{DynamicResource ColorViewRadioButtonForeground}" />
-        <Setter Property="RadioButton.Background" Value="{DynamicResource ColorViewRadioButtonBackground}" />
+        <Setter Property="Background" Value="{DynamicResource ColorViewRadioButtonBackground}" />
-        <Setter Property="RadioButton.Template">
+        <Setter Property="Template">
             <ControlTemplate TargetType="RadioButton">
                 <ContentPresenter
                     Name="PART_ContentPresenter"
@@ -163,10 +170,10 @@
 
     <ControlTheme x:Key="{x:Type ColorView}" TargetType="ColorView">
         <Setter Property="CornerRadius" Value="{DynamicResource ControlCornerRadius}" />
-        <Setter Property="ColorView.Width" Value="300" />
+        <Setter Property="Width" Value="300" />
-        <Setter Property="ColorView.Height" Value="300" />
+        <Setter Property="Height" Value="300" />
-        <Setter Property="ColorView.Palette">
+        <Setter Property="Palette">
-            <controls:FluentColorPalette />
+            <FluentColorPalette />
         </Setter>
         <Setter Property="Template">
             <ControlTemplate TargetType="{x:Type ColorView}">
@@ -208,13 +215,10 @@
                         <!--  Spectrum Tab  -->
                         <TabItem IsVisible="{TemplateBinding IsColorSpectrumVisible}">
                             <TabItem.Header>
-                                <Border Height="{DynamicResource ColorViewTabStripHeight}">
+                                <PathIcon
-                                    <PathIcon
+                                    Theme="{StaticResource InnerPathIcon}"
-                                        Width="16"
+                                    Data="{DynamicResource ColorViewSpectrumIconGlyph}"
-                                        Height="16"
+                                    Foreground="{Binding $parent[TabItem].Foreground}" />
-                                        Data="{DynamicResource ColorViewSpectrumIconGlyph}"
-                                        Foreground="{Binding $parent[TabItem].Foreground}" />
-                                </Border>
                             </TabItem.Header>
                             <Grid Margin="12" RowDefinitions="*">
                                 <Grid.ColumnDefinitions>
@@ -222,7 +226,7 @@
                                     <ColumnDefinition Width="*" />
                                     <ColumnDefinition Width="Auto" MinWidth="32" />
                                 </Grid.ColumnDefinitions>
-                                <primitives:ColorSlider
+                                <ColorSlider
                                     Name="ColorSpectrumThirdComponentSlider"
                                     Grid.Column="0"
                                     Margin="0,0,12,0"
@@ -236,8 +240,8 @@
                                     IsPerceptive="False"
                                     IsVisible="{TemplateBinding IsColorSpectrumSliderVisible}"
                                     Orientation="Vertical" />
-                                <primitives:ColorSpectrum
+                                <ColorSpectrum
-                                    x:Name="ColorSpectrum"
+                                    Name="ColorSpectrum"
                                     Grid.Column="1"
                                     HorizontalAlignment="Stretch"
                                     VerticalAlignment="Stretch"
@@ -250,8 +254,8 @@
                                     MinSaturation="{TemplateBinding MinSaturation}"
                                     MinValue="{TemplateBinding MinValue}"
                                     Shape="{TemplateBinding ColorSpectrumShape}" />
-                                <primitives:ColorSlider
+                                <ColorSlider
-                                    x:Name="ColorSpectrumAlphaSlider"
+                                    Name="ColorSpectrumAlphaSlider"
                                     Grid.Column="2"
                                     Margin="12,0,0,0"
                                     HorizontalAlignment="Center"
@@ -262,24 +266,21 @@
                                     HsvColor="{Binding HsvColor, ElementName=ColorSpectrum}"
                                     IsEnabled="{TemplateBinding IsAlphaEnabled}"
                                     Orientation="Vertical">
-                                    <primitives:ColorSlider.IsVisible>
+                                    <ColorSlider.IsVisible>
                                         <MultiBinding Converter="{x:Static BoolConverters.And}">
                                             <Binding Path="IsAlphaVisible" RelativeSource="{RelativeSource TemplatedParent}" />
                                         </MultiBinding>
-                                    </primitives:ColorSlider.IsVisible>
+                                    </ColorSlider.IsVisible>
-                                </primitives:ColorSlider>
+                                </ColorSlider>
                             </Grid>
                         </TabItem>
                         <!--  Palette Tab  -->
                         <TabItem IsVisible="{TemplateBinding IsColorPaletteVisible}">
                             <TabItem.Header>
-                                <Border Height="{DynamicResource ColorViewTabStripHeight}">
+                                <PathIcon
-                                    <PathIcon
+                                    Theme="{StaticResource InnerPathIcon}"
-                                        Width="16"
+                                    Data="{DynamicResource ColorViewPaletteIconGlyph}"
-                                        Height="16"
+                                    Foreground="{Binding $parent[TabItem].Foreground}" />
-                                        Data="{DynamicResource ColorViewPaletteIconGlyph}"
-                                        Foreground="{Binding $parent[TabItem].Foreground}" />
-                                </Border>
                             </TabItem.Header>
                             <ListBox
                                 Margin="12"
@@ -312,18 +313,15 @@
                         <!--  Components Tab  -->
                         <TabItem IsVisible="{TemplateBinding IsColorComponentsVisible}">
                             <TabItem.Header>
-                                <Border Height="{DynamicResource ColorViewTabStripHeight}">
+                                <PathIcon
-                                    <PathIcon
+                                    Theme="{StaticResource InnerPathIcon}"
-                                        Width="16"
+                                    Data="{DynamicResource ColorViewComponentsIconGlyph}"
-                                        Height="16"
+                                    Foreground="{Binding $parent[TabItem].Foreground}" />
-                                        Data="{DynamicResource ColorViewComponentsIconGlyph}"
-                                        Foreground="{Binding $parent[TabItem].Foreground}" />
-                                </Border>
                             </TabItem.Header>
                             <Grid
                                 Margin="12"
                                 ColumnDefinitions="Auto,*"
-                                RowDefinitions="Auto,24,1*,1*,1*,1*,12"
+                                RowDefinitions="Auto,24,*,*,*,*,12"
                                 UseLayoutRounding="False">
                                 <Grid.Styles>
                                     <Style Selector="NumericUpDown">
@@ -339,43 +337,42 @@
                                     Grid.Row="0"
                                     Grid.Column="0"
                                     Grid.ColumnSpan="2"
-                                    ColumnDefinitions="1*,12,1*">
+                                    ColumnDefinitions="*,12,*">
                                     <!--  RadioButtonGroup  -->
                                     <Border
                                         Padding="2"
                                         Background="{DynamicResource ColorViewRadioButtonPointeroverBackground}"
                                         CornerRadius="3">
-                                        <Grid ColumnDefinitions="1*,1*" IsVisible="{TemplateBinding IsColorModelVisible}">
+                                        <Grid ColumnDefinitions="*,*" IsVisible="{TemplateBinding IsColorModelVisible}">
                                             <RadioButton
-                                                x:Name="RgbRadioButton"
+                                                Name="RgbRadioButton"
                                                 Grid.Column="0"
                                                 HorizontalContentAlignment="Center"
                                                 VerticalContentAlignment="Center"
                                                 Content="RGB"
                                                 CornerRadius="3,0,0,3"
                                                 IsChecked="{TemplateBinding ColorModel,
-                                                                            Converter={StaticResource EnumToBoolConverter},
+                                                Converter={StaticResource EnumToBoolConverter},
-                                                                            ConverterParameter={x:Static controls:ColorModel.Rgba},
+                                                ConverterParameter={x:Static ColorModel.Rgba},
-                                                                            Mode=TwoWay}"
+                                                Mode=TwoWay}"
                                                 Theme="{DynamicResource ColorViewRadioButton}" />
                                             <RadioButton
-                                                x:Name="HsvRadioButton"
+                                                Name="HsvRadioButton"
                                                 Grid.Column="1"
                                                 HorizontalContentAlignment="Center"
                                                 VerticalContentAlignment="Center"
                                                 Content="HSV"
                                                 CornerRadius="0,3,3,0"
                                                 IsChecked="{TemplateBinding ColorModel,
-                                                                            Converter={StaticResource EnumToBoolConverter},
+                                                Converter={StaticResource EnumToBoolConverter},
-                                                                            ConverterParameter={x:Static controls:ColorModel.Hsva},
+                                                ConverterParameter={x:Static ColorModel.Hsva},
-                                                                            Mode=TwoWay}"
+                                                Mode=TwoWay}"
                                                 Theme="{DynamicResource ColorViewRadioButton}" />
                                         </Grid>
                                     </Border>
                                     <TextBox
-                                        x:Name="PART_HexTextBox"
+                                        Name="PART_HexTextBox"
                                         Grid.Column="2"
-                                        Height="32"
                                         HorizontalAlignment="Stretch"
                                         AutomationProperties.Name="Hexadecimal Color"
                                         InnerLeftContent="#"
@@ -399,15 +396,14 @@
                                     NumberFormat="{StaticResource ColorViewComponentNumberFormat}"
                                     ShowButtonSpinner="False"
                                     Value="{Binding Value, ElementName=Component1Slider}" />
-                                <primitives:ColorSlider
+                                <ColorSlider
-                                    x:Name="Component1Slider"
+                                    Name="Component1Slider"
                                     Grid.Row="2"
                                     Grid.Column="1"
                                     HorizontalAlignment="Stretch"
                                     VerticalAlignment="Center"
                                     ColorComponent="Component1"
-                                    ColorModel="{TemplateBinding ColorModel,
+                                    ColorModel="{TemplateBinding ColorModel,Mode=OneWay}"
-                                                                 Mode=OneWay}"
                                     HsvColor="{Binding HsvColor, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}"
                                     IsRoundingEnabled="True"
                                     IsSnapToTickEnabled="True"
@@ -430,15 +426,14 @@
                                     NumberFormat="{StaticResource ColorViewComponentNumberFormat}"
                                     ShowButtonSpinner="False"
                                     Value="{Binding Value, ElementName=Component2Slider}" />
-                                <primitives:ColorSlider
+                                <ColorSlider
-                                    x:Name="Component2Slider"
+                                    Name="Component2Slider"
                                     Grid.Row="3"
                                     Grid.Column="1"
                                     HorizontalAlignment="Stretch"
                                     VerticalAlignment="Center"
                                     ColorComponent="Component2"
-                                    ColorModel="{TemplateBinding ColorModel,
+                                    ColorModel="{TemplateBinding ColorModel,Mode=OneWay}"
-                                                                 Mode=OneWay}"
                                     HsvColor="{Binding HsvColor, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}"
                                     IsRoundingEnabled="True"
                                     IsSnapToTickEnabled="True"
@@ -461,15 +456,14 @@
                                     NumberFormat="{StaticResource ColorViewComponentNumberFormat}"
                                     ShowButtonSpinner="False"
                                     Value="{Binding Value, ElementName=Component3Slider}" />
-                                <primitives:ColorSlider
+                                <ColorSlider
-                                    x:Name="Component3Slider"
+                                    Name="Component3Slider"
                                     Grid.Row="4"
                                     Grid.Column="1"
                                     HorizontalAlignment="Stretch"
                                     VerticalAlignment="Center"
                                     ColorComponent="Component3"
-                                    ColorModel="{TemplateBinding ColorModel,
+                                    ColorModel="{TemplateBinding ColorModel,Mode=OneWay}"
-                                                                 Mode=OneWay}"
                                     HsvColor="{Binding HsvColor, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}"
                                     IsRoundingEnabled="True"
                                     IsSnapToTickEnabled="True"
@@ -499,34 +493,33 @@
                                         </MultiBinding>
                                     </NumericUpDown.IsVisible>
                                 </NumericUpDown>
-                                <primitives:ColorSlider
+                                <ColorSlider
-                                    x:Name="AlphaComponentSlider"
+                                    Name="AlphaComponentSlider"
                                     Grid.Row="5"
                                     Grid.Column="1"
                                     HorizontalAlignment="Stretch"
                                     VerticalAlignment="Center"
                                     ColorComponent="Alpha"
-                                    ColorModel="{TemplateBinding ColorModel,
+                                    ColorModel="{TemplateBinding ColorModel,Mode=OneWay}"
-                                                                 Mode=OneWay}"
                                     HsvColor="{Binding HsvColor, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}"
                                     IsEnabled="{TemplateBinding IsAlphaEnabled}"
                                     IsRoundingEnabled="True"
                                     IsSnapToTickEnabled="True"
                                     Orientation="Horizontal"
                                     TickFrequency="1">
-                                    <primitives:ColorSlider.IsVisible>
+                                    <ColorSlider.IsVisible>
                                         <MultiBinding Converter="{x:Static BoolConverters.And}">
                                             <Binding Path="IsAlphaVisible" RelativeSource="{RelativeSource TemplatedParent}" />
                                             <Binding Path="IsComponentSliderVisible" RelativeSource="{RelativeSource TemplatedParent}" />
                                         </MultiBinding>
-                                    </primitives:ColorSlider.IsVisible>
+                                    </ColorSlider.IsVisible>
-                                </primitives:ColorSlider>
+                                </ColorSlider>
                             </Grid>
                         </TabItem>
                     </TabControl>
                     <!--  Previewer  -->
                     <!--  Note that top/bottom margins have -5 to remove for drop shadow padding  -->
-                    <primitives:ColorPreviewer
+                    <ColorPreviewer
                         Grid.Row="1"
                         Margin="12,-5,12,7"
                         HsvColor="{Binding HsvColor, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}"
@@ -583,8 +576,8 @@
                         Grid.Row="0"
                         CornerRadius="8 8 0 0"
                         ClipToBounds="True">
-                        <primitives:ColorSpectrum
+                        <ColorSpectrum
-                            x:Name="ColorSpectrum"
+                            Name="ColorSpectrum"
                             HorizontalAlignment="Stretch"
                             VerticalAlignment="Stretch"
                             Components="{TemplateBinding ColorSpectrumComponents}"
@@ -597,7 +590,7 @@
                             MinValue="{TemplateBinding MinValue}"
                             Shape="{TemplateBinding ColorSpectrumShape}" />
                     </Border>
-                    <primitives:ColorSlider
+                    <ColorSlider
                         Name="ColorSpectrumThirdComponentSlider"
                         Grid.Row="1"
                         HorizontalAlignment="Stretch"
@@ -609,7 +602,7 @@
                         IsVisible="{TemplateBinding IsColorSpectrumSliderVisible}"
                         Orientation="Horizontal" />
 
-                    <primitives:ColorSlider
+                    <ColorSlider
                         x:Name="ColorSpectrumAlphaSlider"
                         Grid.Row="2"
                         HorizontalAlignment="Stretch"
@@ -623,8 +616,7 @@
                         IsRoundingEnabled="True"
                         IsSnapToTickEnabled="True"
                         TickFrequency="1"
-                        Orientation="Horizontal">
+                        Orientation="Horizontal" />
-                    </primitives:ColorSlider>
                     <StackPanel
                         Grid.Row="3"
                         HorizontalAlignment="Stretch"
@@ -693,13 +685,4 @@
             <Setter Property="Width" Value="176" />
         </Style>
     </ControlTheme>
-
+</ResourceDictionary>
-    <Design.PreviewWith>
-        <ColorView
-            Theme="{StaticResource SimpleColorView}"
-            IsAlphaVisible="True"
-            IsAlphaEnabled="True"
-            ColorModel="Hsva"
-            HsvColor="hsv(120,7%,90%)" />
-    </Design.PreviewWith>
-</ResourceDictionary>

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

@@ -0,0 +1,12 @@
+<ResourceDictionary
+    x:CompileBindings="True"
+    xmlns="https://github.com/avaloniaui"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+    <ResourceDictionary.MergedDictionaries>
+        <ResourceInclude Source="avares://Semi.Avalonia.ColorPicker/Controls/ColorPicker.axaml" />
+        <ResourceInclude Source="avares://Semi.Avalonia.ColorPicker/Controls/ColorPreviewer.axaml" />
+        <ResourceInclude Source="avares://Semi.Avalonia.ColorPicker/Controls/ColorSlider.axaml" />
+        <ResourceInclude Source="avares://Semi.Avalonia.ColorPicker/Controls/ColorSpectrum.axaml" />
+        <ResourceInclude Source="avares://Semi.Avalonia.ColorPicker/Controls/ColorView.axaml" />
+    </ResourceDictionary.MergedDictionaries>
+</ResourceDictionary>

src/Semi.Avalonia.ColorPicker/Dark.axaml

@@ -1,21 +1,21 @@
-<ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+<ResourceDictionary
-    <SolidColorBrush x:Key="ColorViewRadioButtonForeground" Color="#54A9FF" />
+    xmlns="https://github.com/avaloniaui"
-    <SolidColorBrush x:Key="ColorViewRadioButtonBackground" Color="#1C1F23" />
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-    <SolidColorBrush x:Key="ColorViewRadioButtonPointeroverBackground" Opacity="0.16" Color="White" />
+    xmlns:semi="https://irihi.tech/semi">
-    <SolidColorBrush x:Key="ColorViewRadioButtonPressedBackground" Opacity="0.20" Color="White" />
+    <StaticResource x:Key="ColorViewRadioButtonForeground" ResourceKey="SemiColorPrimary" />
-    <SolidColorBrush x:Key="ColorViewRadioButtonCheckedForeground" Color="White" />
+    <StaticResource x:Key="ColorViewRadioButtonBackground" ResourceKey="SemiColorBackground0" />
-    <SolidColorBrush x:Key="ColorViewRadioButtonCheckedBackground" Color="#54A9FF" />
+    <StaticResource x:Key="ColorViewRadioButtonPointeroverBackground" ResourceKey="SemiColorFill1" />
-    <SolidColorBrush x:Key="ColorViewRadioButtonCheckedPointeroverBackground" Color="#7FC1FF" />
+    <StaticResource x:Key="ColorViewRadioButtonPressedBackground" ResourceKey="SemiColorFill2" />
-    <SolidColorBrush x:Key="ColorViewRadioButtonCheckedPressedBackground" Color="#A9D7FF" />
+    <StaticResource x:Key="ColorViewRadioButtonCheckedForeground" ResourceKey="SemiColorWhite" />
-
+    <StaticResource x:Key="ColorViewRadioButtonCheckedBackground" ResourceKey="SemiColorPrimary" />
-    <SolidColorBrush x:Key="ColorViewTabItemSelectedForeground" Color="#54A9FF" />
+    <StaticResource x:Key="ColorViewRadioButtonCheckedPointeroverBackground" ResourceKey="SemiColorPrimaryPointerover" />
-
+    <StaticResource x:Key="ColorViewRadioButtonCheckedPressedBackground" ResourceKey="SemiColorPrimaryActive" />
-
+    <StaticResource x:Key="ColorViewTabItemSelectedForeground" ResourceKey="SemiColorPrimary" />
-    <SolidColorBrush x:Key="ColorSliderDefaultBorderBrush" Color="Black" />
+    <StaticResource x:Key="ColorSliderDefaultBorderBrush" ResourceKey="SemiColorBlack" />
-    <SolidColorBrush x:Key="ColorSliderLightBorderBrush" Color="White" />
+    <StaticResource x:Key="ColorSliderLightBorderBrush" ResourceKey="SemiColorWhite" />
-    <SolidColorBrush x:Key="ColorSliderDarkBorderBrush" Color="#E4000000" />
+    <StaticResource x:Key="ColorSliderDarkBorderBrush" ResourceKey="SemiColorBlack" />
-
+    <StaticResource x:Key="ColorSpectrumBorderBrush" ResourceKey="SemiColorBorder" />
-    <SolidColorBrush x:Key="ColorSpectrumBorderBrush" Opacity="0.08" Color="#1C1F23" />
+    <StaticResource x:Key="ColorPreviewerMainBoxShadow" ResourceKey="SemiShadowElevated" />
-
+    <BoxShadows x:Key="ColorSliderBoxShadow">0 0 2 1 #FFFFFF</BoxShadows>
-    <BoxShadows x:Key="ColorPreviewerMainBoxShadow">inset 0 0 0 1 #1AFFFFFF, 0 4 14 #40000000</BoxShadows>
+    <semi:SemiColorDarkPalette x:Key="SemiColorPalette" />
 </ResourceDictionary>

src/Semi.Avalonia.ColorPicker/Index.axaml

@@ -6,7 +6,7 @@
                 <ResourceInclude x:Key="Dark" Source="avares://Semi.Avalonia.ColorPicker/Dark.axaml" />
             </ResourceDictionary.ThemeDictionaries>
             <ResourceDictionary.MergedDictionaries>
-                <ResourceInclude Source="avares://Semi.Avalonia.ColorPicker/Controls/ColorPicker.axaml" />
+                <ResourceInclude Source="avares://Semi.Avalonia.ColorPicker/Controls/_index.axaml" />
                 <ResourceInclude Source="avares://Semi.Avalonia.ColorPicker/Shared.axaml" />
             </ResourceDictionary.MergedDictionaries>
         </ResourceDictionary>

src/Semi.Avalonia.ColorPicker/Light.axaml

@@ -1,21 +1,21 @@
-<ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+<ResourceDictionary
-    <SolidColorBrush x:Key="ColorViewRadioButtonForeground" Color="#0077FA" />
+    xmlns="https://github.com/avaloniaui"
-    <SolidColorBrush x:Key="ColorViewRadioButtonBackground" Color="White" />
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-    <SolidColorBrush x:Key="ColorViewRadioButtonPointeroverBackground" Opacity="0.09" Color="#2E3238" />
+    xmlns:semi="https://irihi.tech/semi">
-    <SolidColorBrush x:Key="ColorViewRadioButtonPressedBackground" Opacity="0.13" Color="#2E3238" />
+    <StaticResource x:Key="ColorViewRadioButtonForeground" ResourceKey="SemiColorPrimary" />
-    <SolidColorBrush x:Key="ColorViewRadioButtonCheckedForeground" Color="White" />
+    <StaticResource x:Key="ColorViewRadioButtonBackground" ResourceKey="SemiColorBackground0" />
-    <SolidColorBrush x:Key="ColorViewRadioButtonCheckedBackground" Color="#0077FA" />
+    <StaticResource x:Key="ColorViewRadioButtonPointeroverBackground" ResourceKey="SemiColorFill1" />
-    <SolidColorBrush x:Key="ColorViewRadioButtonCheckedPointeroverBackground" Color="#0062D6" />
+    <StaticResource x:Key="ColorViewRadioButtonPressedBackground" ResourceKey="SemiColorFill2" />
-    <SolidColorBrush x:Key="ColorViewRadioButtonCheckedPressedBackground" Color="#004FB3" />
+    <StaticResource x:Key="ColorViewRadioButtonCheckedForeground" ResourceKey="SemiColorWhite" />
-
+    <StaticResource x:Key="ColorViewRadioButtonCheckedBackground" ResourceKey="SemiColorPrimary" />
-    <SolidColorBrush x:Key="ColorViewTabItemSelectedForeground" Color="#0077FA" />
+    <StaticResource x:Key="ColorViewRadioButtonCheckedPointeroverBackground" ResourceKey="SemiColorPrimaryPointerover" />
-
+    <StaticResource x:Key="ColorViewRadioButtonCheckedPressedBackground" ResourceKey="SemiColorPrimaryActive" />
-
+    <StaticResource x:Key="ColorViewTabItemSelectedForeground" ResourceKey="SemiColorPrimary" />
-    <SolidColorBrush x:Key="ColorSliderDefaultBorderBrush" Color="Black" />
+    <StaticResource x:Key="ColorSliderDefaultBorderBrush" ResourceKey="SemiColorBlack" />
-    <SolidColorBrush x:Key="ColorSliderLightBorderBrush" Color="White" />
+    <StaticResource x:Key="ColorSliderLightBorderBrush" ResourceKey="SemiColorWhite" />
-    <SolidColorBrush x:Key="ColorSliderDarkBorderBrush" Color="#E4000000" />
+    <StaticResource x:Key="ColorSliderDarkBorderBrush" ResourceKey="SemiColorBlack" />
-
+    <StaticResource x:Key="ColorSpectrumBorderBrush" ResourceKey="SemiColorBorder" />
-    <SolidColorBrush x:Key="ColorSpectrumBorderBrush" Opacity="0.08" Color="#1C1F23" />
+    <StaticResource x:Key="ColorPreviewerMainBoxShadow" ResourceKey="SemiShadowElevated" />
-
+    <BoxShadows x:Key="ColorSliderBoxShadow">0 0 2 1 #FFFFFF</BoxShadows>
-    <BoxShadows x:Key="ColorPreviewerMainBoxShadow">0 0 1 #4A000000, 0 4 14 #1A000000</BoxShadows>
+    <semi:SemiColorLightPalette x:Key="SemiColorPalette" />
 </ResourceDictionary>

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.4</PackageReleaseNotes>
+        <PackageReleaseNotes>Update to Semi.Avalonia.ColorPicker 11.2.1.7</PackageReleaseNotes>
     </PropertyGroup>
 
     <PropertyGroup Condition="$([MSBuild]::IsTargetFrameworkCompatible('$(TargetFramework)', 'net8.0'))">
@@ -12,7 +12,6 @@
     </PropertyGroup>
 
     <ItemGroup>
-        <PackageReference Include="Avalonia" Version="$(AvaloniaVersion)"/>
         <PackageReference Include="Avalonia.Controls.ColorPicker" Version="$(AvaloniaVersion)"/>
     </ItemGroup>
 

src/Semi.Avalonia.ColorPicker/SemiColorLightPalette.cs

@@ -80,7 +80,7 @@ public class SemiColorLightPalette: IColorPalette
             Color.FromUInt32(0xFF98CDFD),
             Color.FromUInt32(0xFF65B2FC),
             Color.FromUInt32(0xFF3295FB),
-            Color.FromUInt32(0xFF0077FA),
+            Color.FromUInt32(0xFF0064FA),
             Color.FromUInt32(0xFF0062D6),
             Color.FromUInt32(0xFF004FB3),
             Color.FromUInt32(0xFF003D8F),

src/Semi.Avalonia.ColorPicker/Shared.axaml

@@ -1,30 +1,28 @@
 <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:colorPicker="clr-namespace:Semi.Avalonia.ColorPicker">
+    <StaticResource x:Key="ColorViewRadioButtonFontWeight" ResourceKey="SemiFontWeightBold" />
-    <FontWeight x:Key="ColorViewRadioButtonFontWeight">600</FontWeight>
     <Thickness x:Key="ColorViewRadioButtonPadding">16 4</Thickness>
     <x:Double x:Key="ColorViewNumericUpDownWidth">70</x:Double>
 
-    <StreamGeometry x:Key="ColorViewSpectrumIconGlyph">M1.22 20.77a4.24 4.24 0 0 1 .02-5.98l9.33-9.28-.94-.95a1.41 1.41 0 0 1 0-1.99 1.39 1.39 0 0 1 1.97 0l.95.97L14.9 1.2a4.16 4.16 0 0 1 5.89.02 4.24 4.24 0 0 1-.02 5.98l-2.3 2.28 1.02 1.02c.54.55.54 1.44 0 1.99-.55.55-1.43.55-1.97 0l-1.03-1.03-9.37 9.32a4.16 4.16 0 0 1-5.89-.02ZM12.54 7.49l1.97 1.99-9.35 9.3c-.55.55-1.42.55-1.97 0a1.41 1.41 0 0 1 .01-2l9.34-9.29Z</StreamGeometry>
+    <StaticResource x:Key="ColorViewSpectrumIconGlyph" ResourceKey="SemiIconEyedropper" />
-    <StreamGeometry x:Key="ColorViewPaletteIconGlyph">M2 4c0-1.1.9-2 2-2h5a2 2 0 0 1 2 2v16a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V4Zm6 13.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm11.59-8.91L16.4 5.4a2 2 0 0 0-2.82 0L13 6v12l6.59-6.59a2 2 0 0 0 0-2.82ZM22 16a2 2 0 0 0-2-2l-8 8h8a2 2 0 0 0 2-2v-4Z</StreamGeometry>
+    <StaticResource x:Key="ColorViewPaletteIconGlyph" ResourceKey="SemiIconColorPalette" />
-    <StreamGeometry x:Key="ColorViewComponentsIconGlyph">M4 6.5a2 2 0 1 0 0-4 2 2 0 0 0 0 4ZM9.5 3a1.5 1.5 0 1 0 0 3h11a1.5 1.5 0 0 0 0-3h-11ZM8 11.5c0-.83.67-1.5 1.5-1.5h11a1.5 1.5 0 0 1 0 3h-11A1.5 1.5 0 0 1 8 11.5Zm0 7c0-.83.67-1.5 1.5-1.5h11a1.5 1.5 0 0 1 0 3h-11A1.5 1.5 0 0 1 8 18.5Zm-2-7a2 2 0 1 1-4 0 2 2 0 0 1 4 0Zm-2 9a2 2 0 1 0 0-4 2 2 0 0 0 0 4Z</StreamGeometry>
+    <StaticResource x:Key="ColorViewComponentsIconGlyph" ResourceKey="SemiIconList" />
-    <!-- <StaticResource x:Key="ColorViewSpectrumIconGlyph" ResourceKey="SemiIconEyedropper" /> -->
-    <!-- <StaticResource x:Key="ColorViewPaletteIconGlyph" ResourceKey="SemiIconColorPalette" /> -->
-    <!-- <StaticResource x:Key="ColorViewComponentsIconGlyph" ResourceKey="SemiIconList" /> -->
 
-    <x:Double x:Key="ColorSliderWidth">16</x:Double>
+    <StaticResource x:Key="ColorSliderWidth" ResourceKey="SemiSpacingBase" />
-    <CornerRadius x:Key="ColorSliderCornerRadius">6</CornerRadius>
+    <StaticResource x:Key="ColorSliderCornerRadius" ResourceKey="SemiBorderRadiusMedium" />
-    <Thickness x:Key="ColorSliderThumbBorderBrush">2</Thickness>
+    <StaticResource x:Key="ColorSliderThumbBorderBrush" ResourceKey="SemiThicknessSuperTight" />
-    <BoxShadows x:Key="ColorSliderBoxShadow">0 0 2 1 #FFFFFF</BoxShadows>
+    <StaticResource x:Key="ColorSliderThumbCornerRadius" ResourceKey="SemiBorderRadiusFull" />
 
     <x:Double x:Key="ColorPreviewerAccentSectionWidth">80</x:Double>
     <x:Double x:Key="ColorPreviewerAccentSectionHeight">20</x:Double>
     <x:Double x:Key="ColorPreviewerHeight">48</x:Double>
-    <CornerRadius x:Key="ColorPreviewerCornerRadius">3</CornerRadius>
+    <StaticResource x:Key="ColorPreviewerCornerRadius" ResourceKey="SemiBorderRadiusSmall" />
 
-    <colorPicker:SemiColorDarkPalette x:Key="SemiColorPalette" />
+    <StaticResource x:Key="ColorSpectrumCornerRadius" ResourceKey="SemiBorderRadiusMedium" />
 
+    <StaticResource x:Key="ColorPickerMinHeight" ResourceKey="SemiHeightControlDefault" />
+    <StaticResource x:Key="ColorPickerCornerRadius" ResourceKey="SemiBorderRadiusSmall" />
     <PlacementMode x:Key="ColorPickerFlyoutPlacement">AnchorAndGravity</PlacementMode>
     <PlacementMode x:Key="SimpleColorPickerFlyoutPlacement">BottomEdgeAlignedLeft</PlacementMode>
 </ResourceDictionary>

src/Semi.Avalonia.DataGrid/AssemblyInfo.cs

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

src/Semi.Avalonia.DataGrid/Dark.axaml

@@ -1,29 +1,21 @@
 <ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
-    <SolidColorBrush x:Key="DataGridLineBrush" Opacity="0.08" Color="White" />
+    <StaticResource x:Key="DataGridLineBrush" ResourceKey="SemiColorBorder" />
-
     <SolidColorBrush x:Key="DataGridCellBackground" Color="Transparent" />
-    <SolidColorBrush x:Key="DataGridCellFocusBorderBrush" Color="#41464C" />
+    <StaticResource x:Key="DataGridCellFocusBorderBrush" ResourceKey="SemiColorTertiaryLightActive" />
-    <SolidColorBrush x:Key="DataGridCellCurrentBorderBrush" Opacity="0.08" Color="White" />
+    <StaticResource x:Key="DataGridCellCurrentBorderBrush" ResourceKey="SemiColorBorder" />
-    <SolidColorBrush x:Key="DataGridCellErrorBrush" Color="#6C090B" />
+    <StaticResource x:Key="DataGridCellErrorBrush" ResourceKey="SemiColorDangerLight" />
-
+    <StaticResource x:Key="DataGridColumnHeaderForeground" ResourceKey="SemiColorText2" />
-
-    <SolidColorBrush x:Key="DataGridColumnHeaderForeground" Opacity="0.6" Color="#F9F9F9" />
     <SolidColorBrush x:Key="DataGridColumnHeaderBackground" Color="Transparent" />
-    <SolidColorBrush x:Key="DataGridColumnHeaderPointeroverBackground" Opacity="0.16" Color="White" />
+    <StaticResource x:Key="DataGridColumnHeaderPointeroverBackground" ResourceKey="SemiColorFill1" />
-    <SolidColorBrush x:Key="DataGridColumnHeaderPressedBackground" Opacity="0.20" Color="White" />
+    <StaticResource x:Key="DataGridColumnHeaderPressedBackground" ResourceKey="SemiColorFill2" />
-
     <SolidColorBrush x:Key="DataGridRowBackground" Color="Transparent" />
-
+    <StaticResource x:Key="DataGridRowErrorBackground" ResourceKey="SemiColorDangerLight" />
-    <SolidColorBrush x:Key="DataGridRowErrorBackground" Color="#6C090B" />
     <SolidColorBrush x:Key="DataGridDetailsPresenterBackground" Color="Transparent" />
-
+    <StaticResource x:Key="DataGridRowPointeroverBackground" ResourceKey="SemiColorFill1" />
-    <SolidColorBrush x:Key="DataGridRowPointeroverBackground" Opacity="0.16" Color="White" />
+    <StaticResource x:Key="DataGridRowSelectedBackground" ResourceKey="SemiColorPrimaryLight" />
-    <SolidColorBrush x:Key="DataGridRowSelectedBackground" Opacity="0.2" Color="#FF54A9FF" />
+    <StaticResource x:Key="DataGridRowSelectedPointeroverBackground" ResourceKey="SemiColorPrimaryLightPointerover" />
-    <SolidColorBrush x:Key="DataGridRowSelectedPointeroverBackground" Opacity="0.3" Color="#FF54A9FF" />
+    <StaticResource x:Key="DataGridRowGroupHeaderExpandIconForeground" ResourceKey="SemiColorText2" />
-    <SolidColorBrush x:Key="DataGridRowGroupHeaderExpandIconForeground" Opacity="0.6" Color="#F9F9F9" />
+    <StaticResource x:Key="DataGridRowGroupHeaderBackground" ResourceKey="SemiColorFill0" />
-    <SolidColorBrush x:Key="DataGridRowGroupHeaderBackground" Opacity="0.12" Color="White" />
+    <StaticResource x:Key="DataGridRowGroupHeaderCurrentBorderBrush" ResourceKey="SemiColorBorder" />
-
+    <StaticResource x:Key="DataGridDisabledBackground" ResourceKey="SemiColorDisabledFill" />
-    <SolidColorBrush x:Key="DataGridRowGroupHeaderCurrentBorderBrush" Opacity="0.08" Color="White" />
-
-    <SolidColorBrush x:Key="DataGridDisabledBackground" Color="#E6E8EA" Opacity="0.04" />
 </ResourceDictionary>

src/Semi.Avalonia.DataGrid/DataGrid.axaml

@@ -126,21 +126,19 @@
                             Name="HeaderBackground"
                             Grid.ColumnSpan="2"
                             Margin="4"
-                            CornerRadius="3" />
+                            CornerRadius="{DynamicResource DataGridColumnHeaderCornerRadius}" />
                         <Grid
+                            ColumnDefinitions="*,Auto"
                             Margin="{TemplateBinding Padding}"
                             HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                             VerticalAlignment="{TemplateBinding VerticalContentAlignment}">
-                            <Grid.ColumnDefinitions>
+                            <ContentPresenter
-                                <ColumnDefinition Width="*" />
+                                Content="{TemplateBinding Content}"
-                                <ColumnDefinition Width="Auto" />
+                                ContentTemplate="{TemplateBinding ContentTemplate}" />
-                            </Grid.ColumnDefinitions>
-                            <ContentPresenter Content="{TemplateBinding Content}" ContentTemplate="{TemplateBinding ContentTemplate}" />
                             <PathIcon
                                 Name="SortIcon"
                                 Grid.Column="1"
-                                Width="8"
+                                Theme="{StaticResource InnerPathIcon}"
-                                Height="8"
                                 Margin="0,0,8,0"
                                 Foreground="{TemplateBinding Foreground}" />
                         </Grid>
@@ -293,7 +291,7 @@
                             Grid.ColumnSpan="2"
                             Margin="{DynamicResource DataGridRowMargin}"
                             Background="{DynamicResource DataGridRowBackground}"
-                            CornerRadius="3" />
+                            CornerRadius="{DynamicResource DataGridRowCornerRadius}" />
                         <Rectangle
                             Name="InvalidVisualElement"
                             Grid.ColumnSpan="2"
@@ -358,8 +356,7 @@
         <Setter Property="Template">
             <ControlTemplate TargetType="ToggleButton">
                 <PathIcon
-                    Width="12"
+                    Theme="{StaticResource InnerPathIcon}"
-                    Height="12"
                     HorizontalAlignment="Center"
                     VerticalAlignment="Center"
                     Background="Transparent"
@@ -375,7 +372,7 @@
     <ControlTheme x:Key="{x:Type DataGridRowGroupHeader}" TargetType="DataGridRowGroupHeader">
         <Setter Property="Focusable" Value="False" />
         <Setter Property="Background" Value="{DynamicResource DataGridRowGroupHeaderBackground}" />
-        <Setter Property="MinHeight" Value="32" />
+        <Setter Property="MinHeight" Value="{DynamicResource DataGridRowGroupHeaderMinHeight}" />
         <Setter Property="Template">
             <ControlTemplate x:DataType="collections:DataGridCollectionViewGroup" TargetType="DataGridRowGroupHeader">
                 <DataGridFrozenGrid
@@ -400,20 +397,18 @@
                         Grid.Column="3"
                         Margin="12,0,0,0"
                         VerticalAlignment="Center"
-                        Orientation="Horizontal">
+                        Orientation="Horizontal"
+                        Spacing="4">
                         <TextBlock
                             Name="PART_PropertyNameElement"
-                            Margin="4,0,0,0"
                             Foreground="{TemplateBinding Foreground}"
                             IsVisible="{TemplateBinding IsPropertyNameVisible}" />
                         <ContentControl
                             Name="PART_GroupKeyContentControl"
-                            Margin="4,0,0,0"
                             Foreground="{TemplateBinding Foreground}"
                             Content="{Binding Key}" />
                         <TextBlock
                             Name="PART_ItemCountElement"
-                            Margin="4,0,0,0"
                             Foreground="{TemplateBinding Foreground}"
                             IsVisible="{TemplateBinding IsItemCountVisible}" />
                     </StackPanel>
@@ -530,6 +525,7 @@
                             Name="PART_VerticalScrollbar"
                             Grid.Row="1"
                             Grid.Column="2"
+                            AllowAutoHide="{Binding Path=(ScrollViewer.AllowAutoHide), RelativeSource={RelativeSource TemplatedParent}}"
                             Orientation="Vertical" />
 
                         <Grid
@@ -540,6 +536,7 @@
                             <ScrollBar
                                 Name="PART_HorizontalScrollbar"
                                 Grid.Column="1"
+                                AllowAutoHide="{Binding Path=(ScrollViewer.AllowAutoHide), RelativeSource={RelativeSource TemplatedParent}}"
                                 Height="{DynamicResource ScrollBarSize}"
                                 Orientation="Horizontal" />
                         </Grid>
@@ -552,7 +549,7 @@
                             HorizontalAlignment="Stretch"
                             VerticalAlignment="Stretch"
                             Background="{DynamicResource DataGridDisabledBackground}"
-                            CornerRadius="2"
+                            CornerRadius="{DynamicResource DataGridDisabledCornerRadius}"
                             IsHitTestVisible="False"
                             IsVisible="{Binding !$parent[DataGrid].IsEnabled}" />
                     </Grid>
@@ -572,7 +569,7 @@
             </Style>
         </Style>
 
-        <Style Selector="^[(ScrollViewer.AllowAutoHide)=False]">
+        <Style Selector="^.InsetContent">
             <Style Selector="^ /template/ DataGridRowsPresenter#PART_RowsPresenter">
                 <Setter Property="Grid.RowSpan" Value="1" />
                 <Setter Property="Grid.ColumnSpan" Value="2" />
@@ -582,4 +579,4 @@
             </Style>
         </Style>
     </ControlTheme>
-</ResourceDictionary>
+</ResourceDictionary>

src/Semi.Avalonia.DataGrid/DataGridSemiTheme.axaml

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

src/Semi.Avalonia.DataGrid/DataGridSemiTheme.axaml.cs

@@ -0,0 +1,7 @@
+using Avalonia.Styling;
+
+namespace Semi.Avalonia.DataGrid;
+
+public class DataGridSemiTheme : Styles
+{
+}

src/Semi.Avalonia.DataGrid/Light.axaml

@@ -1,29 +1,21 @@
 <ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
-    <SolidColorBrush x:Key="DataGridLineBrush" Opacity="0.08" Color="#1C1F23" />
+    <StaticResource x:Key="DataGridLineBrush" ResourceKey="SemiColorBorder" />
-
     <SolidColorBrush x:Key="DataGridCellBackground" Color="Transparent" />
-    <SolidColorBrush x:Key="DataGridCellFocusBorderBrush" Color="#C6CACD" />
+    <StaticResource x:Key="DataGridCellFocusBorderBrush" ResourceKey="SemiColorTertiaryLightActive" />
-    <SolidColorBrush x:Key="DataGridCellCurrentBorderBrush" Opacity="0.08" Color="#1C1F23" />
+    <StaticResource x:Key="DataGridCellCurrentBorderBrush" ResourceKey="SemiColorBorder" />
-    <SolidColorBrush x:Key="DataGridCellErrorBrush" Color="#FEF2ED" />
+    <StaticResource x:Key="DataGridCellErrorBrush" ResourceKey="SemiColorDangerLight" />
-
+    <StaticResource x:Key="DataGridColumnHeaderForeground" ResourceKey="SemiColorText2" />
-
-    <SolidColorBrush x:Key="DataGridColumnHeaderForeground" Opacity="0.62" Color="#1C1F23" />
     <SolidColorBrush x:Key="DataGridColumnHeaderBackground" Color="Transparent" />
-    <SolidColorBrush x:Key="DataGridColumnHeaderPointeroverBackground" Opacity="0.09" Color="#2E3238" />
+    <StaticResource x:Key="DataGridColumnHeaderPointeroverBackground" ResourceKey="SemiColorFill1" />
-    <SolidColorBrush x:Key="DataGridColumnHeaderPressedBackground" Opacity="0.13" Color="#2E3238" />
+    <StaticResource x:Key="DataGridColumnHeaderPressedBackground" ResourceKey="SemiColorFill2" />
-
     <SolidColorBrush x:Key="DataGridRowBackground" Color="Transparent" />
-
+    <StaticResource x:Key="DataGridRowErrorBackground" ResourceKey="SemiColorDangerLight" />
-    <SolidColorBrush x:Key="DataGridRowErrorBackground" Color="#FEF2ED" />
     <SolidColorBrush x:Key="DataGridDetailsPresenterBackground" Color="Transparent" />
-
+    <StaticResource x:Key="DataGridRowPointeroverBackground" ResourceKey="SemiColorFill1" />
-    <SolidColorBrush x:Key="DataGridRowPointeroverBackground" Opacity="0.09" Color="#2E3238" />
+    <StaticResource x:Key="DataGridRowSelectedBackground" ResourceKey="SemiColorPrimaryLight" />
-    <SolidColorBrush x:Key="DataGridRowSelectedBackground" Color="#EAF5FF" />
+    <StaticResource x:Key="DataGridRowSelectedPointeroverBackground" ResourceKey="SemiColorPrimaryLightPointerover" />
-    <SolidColorBrush x:Key="DataGridRowSelectedPointeroverBackground" Color="#CBE7FE" />
+    <StaticResource x:Key="DataGridRowGroupHeaderExpandIconForeground" ResourceKey="SemiColorText2" />
-    <SolidColorBrush x:Key="DataGridRowGroupHeaderExpandIconForeground" Opacity="0.62" Color="#1C1F23" />
+    <StaticResource x:Key="DataGridRowGroupHeaderBackground" ResourceKey="SemiColorFill0" />
-    <SolidColorBrush x:Key="DataGridRowGroupHeaderBackground" Opacity="0.05" Color="#2E3238" />
+    <StaticResource x:Key="DataGridRowGroupHeaderCurrentBorderBrush" ResourceKey="SemiColorBorder" />
-
+    <StaticResource x:Key="DataGridDisabledBackground" ResourceKey="SemiColorDisabledFill" />
-    <SolidColorBrush x:Key="DataGridRowGroupHeaderCurrentBorderBrush" Opacity="0.08" Color="#1C1F23" />
-
-    <SolidColorBrush x:Key="DataGridDisabledBackground" Color="#2E3238" Opacity="0.02" />
 </ResourceDictionary>

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

@@ -1,10 +1,18 @@
 <Project Sdk="Microsoft.NET.Sdk">
 
-    <Import Project="../Package.props"/>
-
     <PropertyGroup>
+        <TargetFrameworks>netstandard2.0;net6.0;net8.0</TargetFrameworks>
+        <Nullable>enable</Nullable>
+        <LangVersion>latest</LangVersion>
+        <Version>11.2.1.7</Version>
+        <PackageReleaseNotes>Update to Semi.Avalonia.DataGrid 11.2.1.7</PackageReleaseNotes>
+        <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>
         <Title>Semi.Avalonia.DataGrid</Title>
-        <PackageReleaseNotes>Update to Semi.Avalonia.DataGrid 11.2.1.4</PackageReleaseNotes>
     </PropertyGroup>
 
     <PropertyGroup Condition="$([MSBuild]::IsTargetFrameworkCompatible('$(TargetFramework)', 'net8.0'))">
@@ -12,8 +20,8 @@
     </PropertyGroup>
 
     <ItemGroup>
-        <PackageReference Include="Avalonia" Version="$(AvaloniaVersion)"/>
+        <PackageReference Include="Avalonia.Controls.DataGrid" Version="11.2.1"/>
-        <PackageReference Include="Avalonia.Controls.DataGrid" Version="$(AvaloniaVersion)"/>
+        <None Include="irihi.png" Pack="true" PackagePath=""/>
     </ItemGroup>
 
 </Project>

src/Semi.Avalonia.DataGrid/Shared.axaml

@@ -1,23 +1,22 @@
 <ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
     <Thickness x:Key="DataGridCellTextBlockDefaultMargin">12 0</Thickness>
-
+    <StaticResource x:Key="DataGridCellMinHeight" ResourceKey="SemiHeightControlDefault" />
-    <x:Double x:Key="DataGridCellMinHeight">32</x:Double>
+    <StaticResource x:Key="DataGridCellVisualBorderThickness" ResourceKey="SemiBorderThicknessControl" />
-    <Thickness x:Key="DataGridCellVisualBorderThickness">1</Thickness>
+    <StaticResource x:Key="DataGridCellVisualStrokeThickness" ResourceKey="SemiBorderSpacingControl" />
-    <x:Double x:Key="DataGridCellVisualStrokeThickness">1</x:Double>
 
     <Thickness x:Key="DataGridColumnHeaderPadding">12 0 0 0</Thickness>
-    <x:Double x:Key="DataGridColumnHeaderMinHeight">32</x:Double>
+    <StaticResource x:Key="DataGridColumnHeaderMinHeight" ResourceKey="SemiHeightControlDefault" />
-
+    <StaticResource x:Key="DataGridColumnHeaderCornerRadius" ResourceKey="SemiBorderRadiusSmall" />
-    <StreamGeometry x:Key="DataGridColumnHeaderAscendingGlyph">m6.45 8.34 4.8-5.48a1 1 0 0 1 1.5 0l4.8 5.48A1 1 0 0 1 16.8 10H7.2a1 1 0 0 1-.75-1.66Z</StreamGeometry>
+    <StaticResource x:Key="DataGridColumnHeaderAscendingGlyph" ResourceKey="SemiIconSmallTriangleTop" />
-    <StreamGeometry x:Key="DataGridColumnHeaderDescendingGlyph">m17.55 15.66-4.8 5.48a1 1 0 0 1-1.5 0l-4.8-5.48A1 1 0 0 1 7.2 14h9.6a1 1 0 0 1 .75 1.66Z</StreamGeometry>
+    <StaticResource x:Key="DataGridColumnHeaderDescendingGlyph" ResourceKey="SemiIconSmallTriangleDown" />
-    <!-- <StaticResource x:Key="DataGridColumnHeaderAscendingGlyph" ResourceKey="SemiIconCaretUp" /> -->
-    <!-- <StaticResource x:Key="DataGridColumnHeaderDescendingGlyph" ResourceKey="SemiIconCaretDown" /> -->
 
     <Thickness x:Key="DataGridRowHeaderMargin">8 0</Thickness>
-    <Thickness x:Key="DataGridRowMargin">2</Thickness>
+    <StaticResource x:Key="DataGridRowCornerRadius" ResourceKey="SemiBorderRadiusSmall" />
+    <StaticResource x:Key="DataGridRowMargin" ResourceKey="SemiThicknessSuperTight" />
 
-    <StreamGeometry x:Key="DataGridRowGroupHeaderExpandIconGlyph">M7.44 19.8a1.5 1.5 0 0 1 0-2.13l5.66-5.65-5.66-5.66a1.5 1.5 0 1 1 2.12-2.12l6.72 6.72a1.5 1.5 0 0 1 0 2.12L9.56 19.8a1.5 1.5 0 0 1-2.12 0Z</StreamGeometry>
+    <StaticResource x:Key="DataGridRowGroupHeaderMinHeight" ResourceKey="SemiHeightControlDefault" />
-    <!-- <StaticResource x:Key="DataGridRowGroupHeaderExpandIconGlyph" ResourceKey="SemiIconChevronRight" /> -->
+    <StaticResource x:Key="DataGridRowGroupHeaderExpandIconGlyph" ResourceKey="SemiIconChevronRight" />
+    <StaticResource x:Key="DataGridRowGroupHeaderVisualStrokeThickness" ResourceKey="SemiBorderSpacingControl" />
 
-    <x:Double x:Key="DataGridRowGroupHeaderVisualStrokeThickness">1</x:Double>
+    <StaticResource x:Key="DataGridDisabledCornerRadius" ResourceKey="SemiBorderRadiusSmall" />
 </ResourceDictionary>

src/Semi.Avalonia.TreeDataGrid/AssemblyInfo.cs

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

src/Semi.Avalonia.TreeDataGrid/Dark.axaml

@@ -1,11 +1,11 @@
 <ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
-    <SolidColorBrush x:Key="TreeDataGridGridLinesBrush" Opacity="0.08" Color="White" />
+    <StaticResource x:Key="TreeDataGridGridLinesBrush" ResourceKey="SemiColorBorder" />
-    <SolidColorBrush x:Key="TreeDataGridHeaderPointerOverBackground" Opacity="0.16" Color="White" />
+    <StaticResource x:Key="TreeDataGridHeaderPointerOverBackground" ResourceKey="SemiColorFill1" />
-    <SolidColorBrush x:Key="TreeDataGridHeaderPressedBackground" Opacity="0.20" Color="White" />
+    <StaticResource x:Key="TreeDataGridHeaderPressedBackground" ResourceKey="SemiColorFill2" />
     <SolidColorBrush x:Key="TreeDataGridHeaderPointerOverBorderBrush" Color="Transparent" />
     <SolidColorBrush x:Key="TreeDataGridHeaderPressedBorderBrush" Color="Transparent" />
-    <SolidColorBrush x:Key="TreeDataGridHeaderPointerOverForeground" Opacity="0.8" Color="#F9F9F9" />
+    <StaticResource x:Key="TreeDataGridHeaderPointerOverForeground" ResourceKey="SemiColorText1" />
-    <SolidColorBrush x:Key="TreeDataGridHeaderPressedForeground" Opacity="1" Color="#F9F9F9" />
+    <StaticResource x:Key="TreeDataGridHeaderPressedForeground" ResourceKey="SemiColorText0" />
-    <SolidColorBrush x:Key="TreeDataGridCellSelectedBackground" Opacity="0.2" Color="#FF54A9FF" />
+    <StaticResource x:Key="TreeDataGridCellSelectedBackground" ResourceKey="SemiColorPrimaryLight" />
-    <SolidColorBrush x:Key="TreeDataGridColumnHeaderForeground" Opacity="0.6" Color="#F9F9F9" />
+    <StaticResource x:Key="TreeDataGridColumnHeaderForeground" ResourceKey="SemiColorText2" />
-</ResourceDictionary>
+</ResourceDictionary>

src/Semi.Avalonia.TreeDataGrid/Light.axaml

@@ -1,11 +1,11 @@
 <ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
-    <SolidColorBrush x:Key="TreeDataGridGridLinesBrush" Opacity="0.08" Color="#1C1F23" />
+    <StaticResource x:Key="TreeDataGridGridLinesBrush" ResourceKey="SemiColorBorder" />
-    <SolidColorBrush x:Key="TreeDataGridHeaderPointerOverBackground" Opacity="0.09" Color="#2E3238" />
+    <StaticResource x:Key="TreeDataGridHeaderPointerOverBackground" ResourceKey="SemiColorFill1" />
-    <SolidColorBrush x:Key="TreeDataGridHeaderPressedBackground" Opacity="0.13" Color="#2E3238" />
+    <StaticResource x:Key="TreeDataGridHeaderPressedBackground" ResourceKey="SemiColorFill2" />
     <SolidColorBrush x:Key="TreeDataGridHeaderPointerOverBorderBrush" Color="Transparent" />
     <SolidColorBrush x:Key="TreeDataGridHeaderPressedBorderBrush" Color="Transparent" />
-    <SolidColorBrush x:Key="TreeDataGridHeaderPointerOverForeground" Opacity="0.8" Color="#1C1F23" />
+    <StaticResource x:Key="TreeDataGridHeaderPointerOverForeground" ResourceKey="SemiColorText1" />
-    <SolidColorBrush x:Key="TreeDataGridHeaderPressedForeground" Opacity="1" Color="#1C1F23" />
+    <StaticResource x:Key="TreeDataGridHeaderPressedForeground" ResourceKey="SemiColorText0" />
-    <SolidColorBrush x:Key="TreeDataGridCellSelectedBackground" Color="#EAF5FF" />
+    <StaticResource x:Key="TreeDataGridCellSelectedBackground" ResourceKey="SemiColorPrimaryLight" />
-    <SolidColorBrush x:Key="TreeDataGridColumnHeaderForeground" Opacity="0.62" Color="#1C1F23" />
+    <StaticResource x:Key="TreeDataGridColumnHeaderForeground" ResourceKey="SemiColorText2" />
-</ResourceDictionary>
+</ResourceDictionary>

src/Semi.Avalonia.TreeDataGrid/Semi.Avalonia.TreeDataGrid.csproj

@@ -4,8 +4,8 @@
         <TargetFramework>net6.0</TargetFramework>
         <Nullable>enable</Nullable>
         <LangVersion>latest</LangVersion>
-        <Version>11.0.10.1</Version>
+        <Version>11.0.10.3</Version>
-        <PackageReleaseNotes>Update to 11.0.10.1</PackageReleaseNotes>
+        <PackageReleaseNotes>Update to 11.0.10.3</PackageReleaseNotes>
         <Authors>IRIHI Technology Co., Ltd.</Authors>
         <Description>Avalonia Theme inspired by Semi Design.</Description>
         <RepositoryUrl>https://github.com/irihitech/Semi.Avalonia</RepositoryUrl>

src/Semi.Avalonia.TreeDataGrid/Shared.axaml

@@ -1,9 +1,11 @@
 <ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
-    <StreamGeometry x:Key="TreeDataGridSortIconAscendingPath">m6.45 8.34 4.8-5.48a1 1 0 0 1 1.5 0l4.8 5.48A1 1 0 0 1 16.8 10H7.2a1 1 0 0 1-.75-1.66Z</StreamGeometry>
+    <StaticResource x:Key="TreeDataGridSortIconAscendingPath" ResourceKey="SemiIconSmallTriangleTop" />
-    <StreamGeometry x:Key="TreeDataGridSortIconDescendingPath">m17.55 15.66-4.8 5.48a1 1 0 0 1-1.5 0l-4.8-5.48A1 1 0 0 1 7.2 14h9.6a1 1 0 0 1 .75 1.66Z</StreamGeometry>
+    <StaticResource x:Key="TreeDataGridSortIconDescendingPath" ResourceKey="SemiIconSmallTriangleDown" />
-    <StreamGeometry x:Key="TreeDataGridItemCollapsedChevronPathData">m9.66 3.44 8.97 7.8a1 1 0 0 1 0 1.51l-8.97 7.81A1 1 0 0 1 8 19.81V4.19a1 1 0 0 1 1.66-.75Z</StreamGeometry>
+    <StaticResource x:Key="TreeDataGridItemCollapsedChevronPathData" ResourceKey="SemiIconTreeTriangleRight" />
-    <!-- <StaticResource x:Key="TreeDataGridSortIconAscendingPath" ResourceKey="SemiIconCaretUp"/> -->
+    <StaticResource x:Key="TreeDataGridItemCollapsedChevronWidth" ResourceKey="SemiWidthIconMedium" />
-    <!-- <StaticResource x:Key="TreeDataGridSortIconDescendingPath" ResourceKey="SemiIconCaretDown"/> -->
+    <StaticResource x:Key="TreeDataGridColumnHeaderCornerRadius" ResourceKey="SemiBorderRadiusSmall" />
-    <!-- <StaticResource x:Key="TreeDataGridItemCollapsedChevronPathData" ResourceKey="SemiIconTreeTriangleRight"/> -->
+    <StaticResource x:Key="TreeDataGridColumnHeaderMinHeight" ResourceKey="SemiHeightControlDefault" />
-    <Thickness x:Key="TreeDataGridRowMargin">2</Thickness>
+    <StaticResource x:Key="TreeDataGridRowCornerRadius" ResourceKey="SemiBorderRadiusSmall" />
+    <StaticResource x:Key="TreeDataGridRowMinHeight" ResourceKey="SemiHeightControlDefault" />
+    <StaticResource x:Key="TreeDataGridRowMargin" ResourceKey="SemiThicknessSuperTight" />
 </ResourceDictionary>

src/Semi.Avalonia.TreeDataGrid/TreeDataGrid.axaml

@@ -49,10 +49,10 @@
 
     <ControlTheme x:Key="{x:Type TreeDataGridColumnHeader}" TargetType="TreeDataGridColumnHeader">
         <Setter Property="Background" Value="Transparent" />
-        <Setter Property="MinHeight" Value="32" />
+        <Setter Property="MinHeight" Value="{DynamicResource TreeDataGridColumnHeaderMinHeight}" />
         <Setter Property="Padding" Value="8 2 0 2" />
         <Setter Property="Cursor" Value="Hand" />
-        <Setter Property="CornerRadius" Value="4" />
+        <Setter Property="CornerRadius" Value="{DynamicResource TreeDataGridColumnHeaderCornerRadius}" />
         <Setter Property="VerticalContentAlignment" Value="Center" />
         <Setter Property="Foreground" Value="{DynamicResource TreeDataGridColumnHeaderForeground}" />
         <Setter Property="Template">
@@ -87,11 +87,8 @@
                         </Panel>
                         <PathIcon
                             Name="SortIcon"
-                            Width="8"
+                            Theme="{StaticResource InnerPathIcon}"
-                            Height="8"
                             Margin="0,0,8,0"
-                            HorizontalAlignment="Center"
-                            VerticalAlignment="Center"
                             DockPanel.Dock="Right"
                             Foreground="{TemplateBinding Foreground}"
                             TabIndex="1" />
@@ -140,8 +137,8 @@
 
     <ControlTheme x:Key="{x:Type TreeDataGridRow}" TargetType="TreeDataGridRow">
         <Setter Property="Background" Value="Transparent" />
-        <Setter Property="CornerRadius" Value="3" />
+        <Setter Property="CornerRadius" Value="{DynamicResource TreeDataGridRowCornerRadius}" />
-        <Setter Property="MinHeight" Value="32" />
+        <Setter Property="MinHeight" Value="{DynamicResource TreeDataGridRowMinHeight}" />
         <Setter Property="Cursor" Value="Hand" />
         <Setter Property="Template">
             <ControlTemplate>
@@ -192,25 +189,17 @@
     </ControlTheme>
 
     <ControlTheme x:Key="TreeDataGridExpandCollapseChevron" TargetType="ToggleButton">
-        <Setter Property="Margin" Value="0" />
-        <Setter Property="Width" Value="8" />
-        <Setter Property="Height" Value="8" />
         <Setter Property="Foreground" Value="{DynamicResource TreeDataGridColumnHeaderForeground}" />
         <Setter Property="Template">
             <ControlTemplate>
-                <Border
+                <PathIcon
+                    Name="ChevronPath"
                     Width="{TemplateBinding Width}"
                     Height="{TemplateBinding Height}"
-                    HorizontalAlignment="Center"
+                    Theme="{StaticResource InnerPathIcon}"
-                    VerticalAlignment="Center"
+                    Classes="Small"
-                    Background="Transparent">
+                    Data="{DynamicResource TreeDataGridItemCollapsedChevronPathData}"
-                    <PathIcon
+                    Foreground="{TemplateBinding Foreground}" />
-                        Name="ChevronPath"
-                        HorizontalAlignment="Center"
-                        VerticalAlignment="Center"
-                        Data="{DynamicResource TreeDataGridItemCollapsedChevronPathData}"
-                        Foreground="{TemplateBinding Foreground}" />
-                </Border>
             </ControlTemplate>
         </Setter>
         <Style Selector="^:checked /template/ PathIcon#ChevronPath">
@@ -223,18 +212,16 @@
             <ControlTemplate>
                 <Border
                     Name="CellBorder"
-                    Padding="{TemplateBinding Indent,
+                    Padding="{TemplateBinding Indent,Converter={x:Static conv:IndentConverter.Instance}}"
-                                              Converter={x:Static conv:IndentConverter.Instance}}"
                     Background="{TemplateBinding Background}"
                     BorderBrush="{TemplateBinding BorderBrush}"
                     BorderThickness="{TemplateBinding BorderThickness}"
                     CornerRadius="{TemplateBinding CornerRadius}">
                     <DockPanel>
                         <Border
-                            Width="12"
+                            DockPanel.Dock="Left"
-                            Height="12"
+                            Width="{DynamicResource TreeDataGridItemCollapsedChevronWidth}"
-                            Margin="4,0"
+                            Margin="4,0">
-                            DockPanel.Dock="Left">
                             <ToggleButton
                                 Focusable="False"
                                 IsChecked="{TemplateBinding IsExpanded, Mode=TwoWay}"
@@ -335,4 +322,4 @@
             </Setter>
         </Style>
     </ControlTheme>
-</ResourceDictionary>
+</ResourceDictionary>

src/Semi.Avalonia.TreeDataGrid/TreeDataGridSemiTheme.axaml

@@ -0,0 +1,17 @@
+<Styles
+    x:Class="Semi.Avalonia.TreeDataGrid.TreeDataGridSemiTheme"
+    xmlns="https://github.com/avaloniaui"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+    <Styles.Resources>
+        <ResourceDictionary>
+            <ResourceDictionary.ThemeDictionaries>
+                <ResourceInclude x:Key="Default" Source="Light.axaml" />
+                <ResourceInclude x:Key="Dark" Source="Dark.axaml" />
+            </ResourceDictionary.ThemeDictionaries>
+            <ResourceDictionary.MergedDictionaries>
+                <ResourceInclude Source="TreeDataGrid.axaml" />
+                <ResourceInclude Source="Shared.axaml" />
+            </ResourceDictionary.MergedDictionaries>
+        </ResourceDictionary>
+    </Styles.Resources>
+</Styles>

src/Semi.Avalonia.TreeDataGrid/TreeDataGridSemiTheme.axaml.cs

@@ -0,0 +1,7 @@
+using Avalonia.Styling;
+
+namespace Semi.Avalonia.TreeDataGrid;
+
+public class TreeDataGridSemiTheme : Styles
+{
+}

src/Semi.Avalonia/Controls/AdornerLayer.axaml

@@ -1,7 +1,7 @@
 <ResourceDictionary
     xmlns="https://github.com/avaloniaui"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-    x:ClassModifier="internal">
+    x:CompileBindings="True">
     <ControlTheme x:Key="{x:Type AdornerLayer}" TargetType="AdornerLayer">
         <Setter Property="DefaultFocusAdorner">
             <FocusAdornerTemplate>

src/Semi.Avalonia/Controls/AutoCompleteBox.axaml

@@ -79,12 +79,12 @@
                                 BorderThickness="{DynamicResource AutoCompleteBoxPopupBorderThickness}"
                                 BoxShadow="{DynamicResource AutoCompleteBoxPopupBoxShadow}"
                                 CornerRadius="{DynamicResource AutoCompleteBoxPopupCornerRadius}">
-                                    <ListBox
+                                <ListBox
-                                        Name="PART_SelectingItemsControl"
+                                    Name="PART_SelectingItemsControl"
-                                        Foreground="{TemplateBinding Foreground}"
+                                    Foreground="{TemplateBinding Foreground}"
-                                        ItemTemplate="{TemplateBinding ItemTemplate}"
+                                    ItemTemplate="{TemplateBinding ItemTemplate}"
-                                        ScrollViewer.HorizontalScrollBarVisibility="Auto"
+                                    ScrollViewer.HorizontalScrollBarVisibility="Auto"
-                                        ScrollViewer.VerticalScrollBarVisibility="Auto" />
+                                    ScrollViewer.VerticalScrollBarVisibility="Auto" />
                             </Border>
                         </Popup>
                     </Panel>
@@ -98,4 +98,4 @@
             <Setter Property="MinHeight" Value="{DynamicResource AutoCompleteBoxSmallHeight}" />
         </Style>
     </ControlTheme>
-</ResourceDictionary>
+</ResourceDictionary>

src/Semi.Avalonia/Controls/Border.axaml

@@ -31,4 +31,4 @@
         </Style>
 
     </ControlTheme>
-</ResourceDictionary>
+</ResourceDictionary>

src/Semi.Avalonia/Controls/Button.axaml

@@ -45,10 +45,6 @@
             </ControlTemplate>
         </Setter>
 
-        <Style Selector="^:pressed">
-            <Setter Property="RenderTransform" Value="scale(0.98)" />
-        </Style>
-
         <Style Selector="^ /template/ ContentPresenter#PART_ContentPresenter">
             <Setter Property="BorderBrush" Value="{TemplateBinding BorderBrush}" />
             <Setter Property="Background" Value="{TemplateBinding Background}" />
@@ -108,11 +104,9 @@
                         Classes="Solid" />
             </FocusAdornerTemplate>
         </Setter>
-        <Style Selector="^ /template/ ContentPresenter#PART_ContentPresenter">
+        <Setter Property="Foreground" Value="{DynamicResource ButtonSolidForeground}" />
-            <Setter Property="Foreground" Value="{DynamicResource ButtonSolidForeground}" />
+        <Setter Property="Background" Value="{DynamicResource ButtonSolidPrimaryBackground}" />
-            <Setter Property="Background" Value="{DynamicResource ButtonSolidPrimaryBackground}" />
+        <Setter Property="BorderBrush" Value="{DynamicResource ButtonSolidPrimaryBorderBrush}" />
-            <Setter Property="BorderBrush" Value="{DynamicResource ButtonSolidPrimaryBorderBrush}" />
-        </Style>
 
         <Style Selector="^:pointerover /template/ ContentPresenter#PART_ContentPresenter">
             <Setter Property="Background" Value="{DynamicResource ButtonSolidPrimaryPointeroverBackground}" />
@@ -272,8 +266,8 @@
     </ControlTheme>
 
     <ControlTheme x:Key="InnerIconButton" TargetType="Button">
-        <Setter Property="Width" Value="16"/>
+        <Setter Property="Width" Value="{DynamicResource SemiWidthIconMedium}" />
-        <Setter Property="Height" Value="16"/>
+        <Setter Property="Height" Value="{DynamicResource SemiWidthIconMedium}" />
         <Setter Property="Foreground" Value="{DynamicResource ButtonInputInnerForeground}" />
         <Setter Property="Background" Value="Transparent" />
         <Setter Property="Cursor" Value="Hand" />

src/Semi.Avalonia/Controls/ButtonSpinner.axaml

@@ -98,7 +98,7 @@
             <Setter Property="Margin" Value="0 0 4 0" />
         </Style>
         <Style Selector="^:pointerover /template/ Border#ButtonGroup">
-            <Setter Property="BorderBrush" Value="{DynamicResource ButtonSpinnerRepeatButtonPointeroverBorderBrush}"/>
+            <Setter Property="BorderBrush" Value="{DynamicResource ButtonSpinnerRepeatButtonPointeroverBorderBrush}" />
         </Style>
     </ControlTheme>
-</ResourceDictionary>
+</ResourceDictionary>

src/Semi.Avalonia/Controls/Calendar.axaml

@@ -2,6 +2,11 @@
     xmlns="https://github.com/avaloniaui"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
     x:CompileBindings="True">
+    <Design.PreviewWith>
+        <Border Padding="20">
+            <Calendar />
+        </Border>
+    </Design.PreviewWith>
     <ControlTheme x:Key="{x:Type Calendar}" TargetType="Calendar">
         <Setter Property="Foreground" Value="{DynamicResource CalendarForeground}" />
         <Setter Property="Background" Value="{DynamicResource CalendarBackground}" />
@@ -37,7 +42,8 @@
                     HorizontalAlignment="Center"
                     VerticalAlignment="Center"
                     x:DataType="x:String"
-                    FontSize="12"
+                    FontSize="{DynamicResource CalendarItemWeekDayNameFontSize}"
+                    FontWeight="{DynamicResource CalendarItemWeekDayNameFontWeight}"
                     Foreground="{DynamicResource CalendarItemWeekDayNameForeground}"
                     Text="{Binding}" />
             </Template>
@@ -58,38 +64,41 @@
                         VerticalAlignment="Stretch"
                         RowDefinitions="Auto,*">
                         <Grid Grid.Row="0" ColumnDefinitions="Auto,*,Auto">
-                            <Button
+                            <RepeatButton
                                 Name="PART_PreviousButton"
                                 Grid.Column="0"
-                                HorizontalContentAlignment="Left"
+                                Padding="0"
+                                MinWidth="{Binding $self.MinHeight}"
                                 Foreground="{TemplateBinding Foreground}"
-                                Theme="{DynamicResource BorderlessButton}">
+                                Theme="{DynamicResource BorderlessRepeatButton}">
                                 <PathIcon
                                     Theme="{DynamicResource InnerPathIcon}"
                                     Classes="Large"
                                     Data="{DynamicResource CalendarItemPreviousIconGlyph}"
                                     Foreground="{DynamicResource CalendarItemIconForeground}" />
-                            </Button>
+                            </RepeatButton>
 
                             <Button
                                 Name="PART_HeaderButton"
                                 Grid.Column="1"
                                 HorizontalContentAlignment="Center"
+                                HorizontalAlignment="Stretch"
                                 Foreground="{TemplateBinding Foreground}"
                                 Theme="{DynamicResource BorderlessButton}" />
 
-                            <Button
+                            <RepeatButton
                                 Name="PART_NextButton"
                                 Grid.Column="2"
-                                HorizontalContentAlignment="Left"
+                                Padding="0"
+                                MinWidth="{Binding $self.MinHeight}"
                                 Foreground="{TemplateBinding Foreground}"
-                                Theme="{DynamicResource BorderlessButton}">
+                                Theme="{DynamicResource BorderlessRepeatButton}">
                                 <PathIcon
                                     Theme="{DynamicResource InnerPathIcon}"
                                     Classes="Large"
                                     Data="{DynamicResource CalendarItemNextIconGlyph}"
                                     Foreground="{DynamicResource CalendarItemIconForeground}" />
-                            </Button>
+                            </RepeatButton>
                         </Grid>
                         <Grid
                             Name="PART_MonthView"
@@ -244,4 +253,4 @@
             <Setter Property="Foreground" Value="{DynamicResource CalendarItemCalendarDayButtonDisabledForeground}" />
         </Style>
     </ControlTheme>
-</ResourceDictionary>
+</ResourceDictionary>

src/Semi.Avalonia/Controls/CalendarDatePicker.axaml

@@ -13,7 +13,7 @@
         <Setter Property="BorderBrush" Value="{DynamicResource CalendarDatePickerBorderBrush}" />
         <Setter Property="BorderThickness" Value="{DynamicResource CalendarDatePickerBorderThickness}" />
         <Setter Property="CornerRadius" Value="{DynamicResource CalendarDatePickerCornerRadius}" />
-        <Setter Property="BackgroundSizing" Value="OuterBorderEdge"/>
+        <Setter Property="BackgroundSizing" Value="OuterBorderEdge" />
         <Setter Property="IsTodayHighlighted" Value="True" />
         <Setter Property="HorizontalAlignment" Value="Left" />
         <Setter Property="VerticalAlignment" Value="Center" />
@@ -34,7 +34,7 @@
                             Background="{TemplateBinding Background}"
                             BorderBrush="{TemplateBinding BorderBrush}"
                             BorderThickness="{TemplateBinding BorderThickness}"
-                            CornerRadius="{TemplateBinding CornerRadius}"/>
+                            CornerRadius="{TemplateBinding CornerRadius}" />
                         <Grid
                             HorizontalAlignment="Stretch"
                             VerticalAlignment="Stretch"
@@ -227,4 +227,4 @@
             </Style>
         </Style>
     </ControlTheme>
-</ResourceDictionary>
+</ResourceDictionary>

src/Semi.Avalonia/Controls/Carousel.axaml

@@ -83,7 +83,7 @@
 
     <ControlTheme x:Key="CarouselIndicatorDotListBoxItem" TargetType="ListBoxItem">
         <Setter Property="Foreground" Value="{DynamicResource CarouselIndicatorForeground}" />
-        <Setter Property="Margin" Value="4 0"/>
+        <Setter Property="Margin" Value="4 0" />
         <Setter Property="Cursor" Value="Hand" />
         <Setter Property="Template">
             <ControlTemplate TargetType="ListBoxItem">
@@ -108,7 +108,7 @@
     <ControlTheme x:Key="CarouselIndicatorLineListBoxItem"
                   BasedOn="{StaticResource CarouselIndicatorDotListBoxItem}"
                   TargetType="ListBoxItem">
-        <Setter Property="Margin" Value="2 0"/>
+        <Setter Property="Margin" Value="2 0" />
         <Setter Property="Template">
             <ControlTemplate TargetType="ListBoxItem">
                 <Rectangle
@@ -122,9 +122,9 @@
     <ControlTheme x:Key="CarouselIndicatorColumnarListBoxItem"
                   BasedOn="{StaticResource CarouselIndicatorDotListBoxItem}"
                   TargetType="ListBoxItem">
-        <Setter Property="Width" Value="{DynamicResource CarouselIndicatorColumnarWidth}"/>
+        <Setter Property="Width" Value="{DynamicResource CarouselIndicatorColumnarWidth}" />
-        <Setter Property="Height" Value="{DynamicResource CarouselIndicatorColumnarSelectedHeight}"/>
+        <Setter Property="Height" Value="{DynamicResource CarouselIndicatorColumnarSelectedHeight}" />
-        <Setter Property="Margin" Value="2 0"/>
+        <Setter Property="Margin" Value="2 0" />
         <Setter Property="Template">
             <ControlTemplate TargetType="ListBoxItem">
                 <Rectangle
@@ -250,4 +250,4 @@
             <Setter Property="HorizontalAlignment" Value="Right" />
         </Style>
     </ControlTheme>
-</ResourceDictionary>
+</ResourceDictionary>

src/Semi.Avalonia/Controls/CheckBox.axaml

@@ -33,6 +33,7 @@
                     CornerRadius="{TemplateBinding CornerRadius}">
                     <Grid ColumnDefinitions="Auto,*">
                         <Panel
+                            Name="PART_GlyphPanel"
                             Grid.Column="0"
                             TemplatedControl.IsTemplateFocusTarget="True"
                             VerticalAlignment="{TemplateBinding VerticalContentAlignment}">
@@ -69,131 +70,69 @@
             </ControlTemplate>
         </Setter>
 
-        <!--  Unchecked Pointerover State  -->
+        <Style Selector="^:unchecked">
-        <Style Selector="^:pointerover">
+            <Style Selector="^:pointerover /template/ Border#NormalRectangle">
-            <Style Selector="^ /template/ Border#NormalRectangle">
                 <Setter Property="BorderBrush" Value="{DynamicResource CheckBoxPointeroverBorderBrush}" />
                 <Setter Property="Background" Value="{DynamicResource CheckBoxPointeroverBackground}" />
             </Style>
-        </Style>
+            <Style Selector="^:pressed /template/ Border#NormalRectangle">
-
-        <!--  Unchecked Pressed State  -->
-        <Style Selector="^:pressed">
-            <Style Selector="^ /template/ Border#NormalRectangle">
                 <Setter Property="BorderBrush" Value="{DynamicResource CheckBoxPressedBorderBrush}" />
                 <Setter Property="Background" Value="{DynamicResource CheckBoxPressedBackground}" />
             </Style>
+            <Style Selector="^:disabled">
+                <Style Selector="^ /template/ Border#NormalRectangle">
+                    <Setter Property="BorderBrush" Value="{DynamicResource CheckBoxDefaultDisabledBorderBrush}" />
+                    <Setter Property="Background" Value="{DynamicResource CheckBoxDefaultDisabledBackground}" />
+                </Style>
+                <Style Selector="^ /template/ ContentPresenter#PART_ContentPresenter">
+                    <Setter Property="Foreground" Value="{DynamicResource CheckBoxDisabledForeground}" />
+                </Style>
+            </Style>
+        </Style>
+
+        <Style Selector="^:indeterminate,^:checked">
+            <Style Selector="^ /template/ Border#NormalRectangle">
+                <Setter Property="BorderBrush" Value="{DynamicResource CheckBoxCheckedDefaultBorderBrush}" />
+                <Setter Property="Background" Value="{DynamicResource CheckBoxCheckedDefaultBackground}" />
+            </Style>
+            <Style Selector="^:pointerover /template/ Border#NormalRectangle">
+                <Setter Property="BorderBrush" Value="{DynamicResource CheckBoxCheckedPointeroverBorderBrush}" />
+                <Setter Property="Background" Value="{DynamicResource CheckBoxCheckedPointeroverBackground}" />
+            </Style>
+            <Style Selector="^:pressed /template/ Border#NormalRectangle">
+                <Setter Property="BorderBrush" Value="{DynamicResource CheckBoxCheckedPressedBorderBrush}" />
+                <Setter Property="Background" Value="{DynamicResource CheckBoxCheckedPressedBackground}" />
+            </Style>
+            <Style Selector="^:disabled">
+                <Style Selector="^ /template/ Border#NormalRectangle">
+                    <Setter Property="BorderBrush" Value="{DynamicResource CheckBoxCheckedDisabledBorderBrush}" />
+                    <Setter Property="Background" Value="{DynamicResource CheckBoxCheckedDisabledBackground}" />
+                </Style>
+                <Style Selector="^ /template/ ContentPresenter#PART_ContentPresenter">
+                    <Setter Property="Foreground" Value="{DynamicResource CheckBoxDisabledForeground}" />
+                </Style>
+            </Style>
+        </Style>
+
+        <Style Selector="^:indeterminate /template/ PathIcon#CheckGlyph">
+            <Setter Property="Data" Value="{DynamicResource CheckBoxIndeterminateGlyph}" />
+        </Style>
+
+        <Style Selector="^:checked /template/ PathIcon#CheckGlyph">
+            <Setter Property="Data" Value="{DynamicResource CheckBoxCheckGlyph}" />
         </Style>
 
-        <!--  Unchecked Disabled state  -->
         <Style Selector="^:disabled">
-            <Style Selector="^ /template/ ContentPresenter#PART_ContentPresenter">
+            <Style Selector="^ /template/ Panel#PART_GlyphPanel">
-                <Setter Property="Foreground" Value="{DynamicResource CheckBoxDisabledForeground}" />
+                <Setter Property="Opacity" Value="0.75" />
-            </Style>
-            <Style Selector="^ /template/ Border#NormalRectangle">
-                <Setter Property="BorderBrush" Value="{DynamicResource CheckBoxDefaultDisabledBorderBrush}" />
-                <Setter Property="Background" Value="{DynamicResource CheckBoxDefaultDisabledBackground}" />
-            </Style>
-        </Style>
-
-        <Style Selector="^:checked">
-            <Style Selector="^ /template/ Border#NormalRectangle">
-                <Setter Property="BorderBrush" Value="{DynamicResource CheckBoxCheckedDefaultBorderBrush}" />
-                <Setter Property="Background" Value="{DynamicResource CheckBoxCheckedDefaultBackground}" />
-            </Style>
-
-            <Style Selector="^ /template/ PathIcon#CheckGlyph">
-                <Setter Property="Data" Value="{DynamicResource CheckBoxCheckGlyph}" />
-                <Setter Property="Opacity" Value="1" />
-            </Style>
-
-            <!--  Checked Pointerover State  -->
-            <Style Selector="^:pointerover">
-                <Style Selector="^ /template/ Border#NormalRectangle">
-                    <Setter Property="BorderBrush" Value="{DynamicResource CheckBoxCheckedPointeroverBorderBrush}" />
-                    <Setter Property="Background" Value="{DynamicResource CheckBoxCheckedPointeroverBackground}" />
-                </Style>
-            </Style>
-
-            <!--  Checked Pressed State  -->
-            <Style Selector="^:pressed">
-                <Style Selector="^ /template/ Border#NormalRectangle">
-                    <Setter Property="BorderBrush" Value="{DynamicResource CheckBoxCheckedPressedBorderBrush}" />
-                    <Setter Property="Background" Value="{DynamicResource CheckBoxCheckedPressedBackground}" />
-                </Style>
-            </Style>
-
-            <!--  Checked Disabled State  -->
-            <Style Selector="^:disabled">
-                <Style Selector="^ /template/ ContentPresenter#PART_ContentPresenter">
-                    <Setter Property="Foreground" Value="{DynamicResource CheckBoxDisabledForeground}" />
-                </Style>
-                <Style Selector="^ /template/ Border#NormalRectangle">
-                    <Setter Property="BorderBrush" Value="{DynamicResource CheckBoxCheckedDisabledBorderBrush}" />
-                    <Setter Property="Background" Value="{DynamicResource CheckBoxCheckedDisabledBackground}" />
-                </Style>
-
-                <Style Selector="^ /template/ PathIcon#CheckGlyph">
-                    <Setter Property="Foreground" Value="{DynamicResource CheckBoxGlyphDisabledFill}" />
-                </Style>
-            </Style>
-        </Style>
-
-        <Style Selector="^:indeterminate">
-            <Style Selector="^ /template/ Border#NormalRectangle">
-                <Setter Property="BorderBrush" Value="{DynamicResource CheckBoxCheckedDefaultBorderBrush}" />
-                <Setter Property="Background" Value="{DynamicResource CheckBoxCheckedDefaultBackground}" />
-            </Style>
-
-            <Style Selector="^ /template/ PathIcon#CheckGlyph">
-                <Setter Property="Data" Value="{DynamicResource CheckBoxIndeterminateGlyph}" />
-                <Setter Property="Opacity" Value="1" />
-            </Style>
-
-            <!--  Checked Pointerover State  -->
-            <Style Selector="^:pointerover">
-                <Style Selector="^ /template/ Border#NormalRectangle">
-                    <Setter Property="BorderBrush" Value="{DynamicResource CheckBoxCheckedPointeroverBorderBrush}" />
-                    <Setter Property="Background" Value="{DynamicResource CheckBoxCheckedPointeroverBackground}" />
-                </Style>
-            </Style>
-
-            <!--  Checked Pressed State  -->
-            <Style Selector="^:pressed">
-                <Style Selector="^ /template/ Border#NormalRectangle">
-                    <Setter Property="BorderBrush" Value="{DynamicResource CheckBoxCheckedPressedBorderBrush}" />
-                    <Setter Property="Background" Value="{DynamicResource CheckBoxCheckedPressedBackground}" />
-                </Style>
-            </Style>
-
-            <!--  Checked Disabled State  -->
-            <Style Selector="^:disabled">
-                <Style Selector="^ /template/ ContentPresenter#PART_ContentPresenter">
-                    <Setter Property="Foreground" Value="{DynamicResource CheckBoxDisabledForeground}" />
-                </Style>
-                <Style Selector="^ /template/ Border#NormalRectangle">
-                    <Setter Property="BorderBrush" Value="{DynamicResource CheckBoxCheckedDisabledBorderBrush}" />
-                    <Setter Property="Background" Value="{DynamicResource CheckBoxCheckedDisabledBackground}" />
-                </Style>
-
-                <Style Selector="^ /template/ PathIcon#CheckGlyph">
-                    <Setter Property="Foreground" Value="{DynamicResource CheckBoxGlyphDisabledFill}" />
-                </Style>
             </Style>
         </Style>
     </ControlTheme>
 
-    <ControlTheme x:Key="SimpleCheckBox" TargetType="CheckBox">
+    <ControlTheme
-        <Setter Property="HorizontalAlignment" Value="Left" />
+        x:Key="SimpleCheckBox"
-        <Setter Property="VerticalAlignment" Value="Top" />
+        BasedOn="{StaticResource {x:Type CheckBox}}"
-        <Setter Property="HorizontalContentAlignment" Value="Left" />
+        TargetType="CheckBox">
-        <Setter Property="VerticalContentAlignment" Value="Center" />
-        <Setter Property="FontSize" Value="{DynamicResource CheckBoxFontSize}" />
-        <Setter Property="Foreground" Value="{DynamicResource CheckBoxForeground}" />
-        <Setter Property="Background" Value="{DynamicResource CheckBoxDefaultBackground}" />
-        <Setter Property="BorderBrush" Value="{DynamicResource CheckBoxDefaultBorderBrush}" />
-        <Setter Property="CornerRadius" Value="{DynamicResource CheckBoxBoxCornerRadius}" />
-        <Setter Property="Cursor" Value="Hand" />
         <Setter Property="Template">
             <ControlTemplate TargetType="CheckBox">
                 <Border
@@ -202,135 +141,28 @@
                     BorderBrush="{TemplateBinding BorderBrush}"
                     BorderThickness="{TemplateBinding BorderThickness}"
                     CornerRadius="{TemplateBinding CornerRadius}">
-                    <Grid ColumnDefinitions="Auto,*">
+                    <Panel
-                        <Panel
+                        Name="PART_GlyphPanel"
-                            Grid.Column="0"
+                        VerticalAlignment="{TemplateBinding VerticalContentAlignment}">
-                            TemplatedControl.IsTemplateFocusTarget="True"
+                        <Border
-                            VerticalAlignment="{TemplateBinding VerticalContentAlignment}">
+                            Name="NormalRectangle"
-                            <Border
+                            Width="{DynamicResource CheckBoxBoxWidth}"
-                                Name="NormalRectangle"
+                            Height="{DynamicResource CheckBoxBoxHeight}"
-                                Width="{DynamicResource CheckBoxBoxWidth}"
+                            Background="{DynamicResource CheckBoxDefaultBackground}"
-                                Height="{DynamicResource CheckBoxBoxHeight}"
+                            BorderBrush="{DynamicResource CheckBoxDefaultBorderBrush}"
-                                Background="{DynamicResource CheckBoxDefaultBackground}"
+                            BorderThickness="{DynamicResource CheckBoxBoxBorderThickness}"
-                                BorderBrush="{DynamicResource CheckBoxDefaultBorderBrush}"
+                            CornerRadius="{TemplateBinding CornerRadius}"
-                                BorderThickness="{DynamicResource CheckBoxBoxBorderThickness}"
+                            UseLayoutRounding="False" />
-                                CornerRadius="{TemplateBinding CornerRadius}"
+                        <PathIcon
-                                UseLayoutRounding="False" />
+                            Name="CheckGlyph"
-                            <PathIcon
+                            Theme="{DynamicResource InnerPathIcon}"
-                                Name="CheckGlyph"
+                            Width="{DynamicResource CheckBoxBoxGlyphWidth}"
-                                Theme="{DynamicResource InnerPathIcon}"
+                            Height="{DynamicResource CheckBoxBoxGlyphHeight}"
-                                Width="{DynamicResource CheckBoxBoxGlyphWidth}"
+                            Foreground="{DynamicResource CheckBoxGlyphFill}" />
-                                Height="{DynamicResource CheckBoxBoxGlyphHeight}"
+                    </Panel>
-                                Foreground="{DynamicResource CheckBoxGlyphFill}" />
-                        </Panel>
-                    </Grid>
                 </Border>
             </ControlTemplate>
         </Setter>
-
-        <!--  Unchecked Pointerover State  -->
-        <Style Selector="^:pointerover">
-            <Style Selector="^ /template/ Border#NormalRectangle">
-                <Setter Property="BorderBrush" Value="{DynamicResource CheckBoxPointeroverBorderBrush}" />
-                <Setter Property="Background" Value="{DynamicResource CheckBoxPointeroverBackground}" />
-            </Style>
-        </Style>
-
-        <!--  Unchecked Pressed State  -->
-        <Style Selector="^:pressed">
-            <Style Selector="^ /template/ Border#NormalRectangle">
-                <Setter Property="BorderBrush" Value="{DynamicResource CheckBoxPressedBorderBrush}" />
-                <Setter Property="Background" Value="{DynamicResource CheckBoxPressedBackground}" />
-            </Style>
-        </Style>
-
-        <!--  Unchecked Disabled state  -->
-        <Style Selector="^:disabled">
-            <Style Selector="^ /template/ Border#NormalRectangle">
-                <Setter Property="BorderBrush" Value="{DynamicResource CheckBoxDefaultDisabledBorderBrush}" />
-                <Setter Property="Background" Value="{DynamicResource CheckBoxDefaultDisabledBackground}" />
-            </Style>
-        </Style>
-
-        <Style Selector="^:checked">
-            <Style Selector="^ /template/ Border#NormalRectangle">
-                <Setter Property="BorderBrush" Value="{DynamicResource CheckBoxCheckedDefaultBorderBrush}" />
-                <Setter Property="Background" Value="{DynamicResource CheckBoxCheckedDefaultBackground}" />
-            </Style>
-
-            <Style Selector="^ /template/ PathIcon#CheckGlyph">
-                <Setter Property="Data" Value="{DynamicResource CheckBoxCheckGlyph}" />
-                <Setter Property="Opacity" Value="1" />
-            </Style>
-
-            <!--  Checked Pointerover State  -->
-            <Style Selector="^:pointerover">
-                <Style Selector="^ /template/ Border#NormalRectangle">
-                    <Setter Property="BorderBrush" Value="{DynamicResource CheckBoxCheckedPointeroverBorderBrush}" />
-                    <Setter Property="Background" Value="{DynamicResource CheckBoxCheckedPointeroverBackground}" />
-                </Style>
-            </Style>
-
-            <!--  Checked Pressed State  -->
-            <Style Selector="^:pressed">
-                <Style Selector="^ /template/ Border#NormalRectangle">
-                    <Setter Property="BorderBrush" Value="{DynamicResource CheckBoxCheckedPressedBorderBrush}" />
-                    <Setter Property="Background" Value="{DynamicResource CheckBoxCheckedPressedBackground}" />
-                </Style>
-            </Style>
-
-            <!--  Checked Disabled State  -->
-            <Style Selector="^:disabled">
-                <Style Selector="^ /template/ Border#NormalRectangle">
-                    <Setter Property="BorderBrush" Value="{DynamicResource CheckBoxCheckedDisabledBorderBrush}" />
-                    <Setter Property="Background" Value="{DynamicResource CheckBoxCheckedDisabledBackground}" />
-                </Style>
-
-                <Style Selector="^ /template/ PathIcon#CheckGlyph">
-                    <Setter Property="Foreground" Value="{DynamicResource CheckBoxGlyphDisabledFill}" />
-                </Style>
-            </Style>
-        </Style>
-
-        <Style Selector="^:indeterminate">
-            <Style Selector="^ /template/ Border#NormalRectangle">
-                <Setter Property="BorderBrush" Value="{DynamicResource CheckBoxCheckedDefaultBorderBrush}" />
-                <Setter Property="Background" Value="{DynamicResource CheckBoxCheckedDefaultBackground}" />
-            </Style>
-
-            <Style Selector="^ /template/ PathIcon#CheckGlyph">
-                <Setter Property="Data" Value="{DynamicResource CheckBoxIndeterminateGlyph}" />
-                <Setter Property="Opacity" Value="1" />
-            </Style>
-
-            <!--  Checked Pointerover State  -->
-            <Style Selector="^:pointerover">
-                <Style Selector="^ /template/ Border#NormalRectangle">
-                    <Setter Property="BorderBrush" Value="{DynamicResource CheckBoxCheckedPointeroverBorderBrush}" />
-                    <Setter Property="Background" Value="{DynamicResource CheckBoxCheckedPointeroverBackground}" />
-                </Style>
-            </Style>
-
-            <!--  Checked Pressed State  -->
-            <Style Selector="^:pressed">
-                <Style Selector="^ /template/ Border#NormalRectangle">
-                    <Setter Property="BorderBrush" Value="{DynamicResource CheckBoxCheckedPressedBorderBrush}" />
-                    <Setter Property="Background" Value="{DynamicResource CheckBoxCheckedPressedBackground}" />
-                </Style>
-            </Style>
-
-            <!--  Checked Disabled State  -->
-            <Style Selector="^:disabled">
-                <Style Selector="^ /template/ Border#NormalRectangle">
-                    <Setter Property="BorderBrush" Value="{DynamicResource CheckBoxCheckedDisabledBorderBrush}" />
-                    <Setter Property="Background" Value="{DynamicResource CheckBoxCheckedDisabledBackground}" />
-                </Style>
-
-                <Style Selector="^ /template/ PathIcon#CheckGlyph">
-                    <Setter Property="Foreground" Value="{DynamicResource CheckBoxGlyphDisabledFill}" />
-                </Style>
-            </Style>
-        </Style>
     </ControlTheme>
 
     <ControlTheme x:Key="CardCheckBox" TargetType="CheckBox">
@@ -356,6 +188,7 @@
                         VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                         ColumnDefinitions="Auto,*">
                         <Panel
+                            Name="PART_GlyphPanel"
                             Grid.Column="0"
                             VerticalAlignment="Top"
                             Margin="{DynamicResource CheckBoxBoxMargin}">
@@ -394,145 +227,90 @@
             </ControlTemplate>
         </Setter>
 
-        <!--  Unchecked Pointerover State  -->
+        <Style Selector="^:unchecked">
-        <Style Selector="^:pointerover">
+            <Style Selector="^:pointerover">
-            <Style Selector="^ /template/ Border#NormalRectangle">
+                <Style Selector="^ /template/ Border#NormalRectangle">
-                <Setter Property="BorderBrush" Value="{DynamicResource CheckBoxPointeroverBorderBrush}" />
+                    <Setter Property="BorderBrush" Value="{DynamicResource CheckBoxPointeroverBorderBrush}" />
+                </Style>
+                <Style Selector="^ /template/ Border#RootBorder">
+                    <Setter Property="Background" Value="{DynamicResource CheckBoxCardPointeroverBackground}" />
+                </Style>
             </Style>
-            <Style Selector="^ /template/ Border#RootBorder">
+            <Style Selector="^:pressed">
-                <Setter Property="Background" Value="{DynamicResource CheckBoxCardPointeroverBackground}" />
+                <Style Selector="^ /template/ Border#NormalRectangle">
+                    <Setter Property="BorderBrush" Value="{DynamicResource CheckBoxPressedBorderBrush}" />
+                </Style>
+                <Style Selector="^ /template/ Border#RootBorder">
+                    <Setter Property="Background" Value="{DynamicResource CheckBoxCardPressedBackground}" />
+                </Style>
+            </Style>
+            <Style Selector="^:disabled">
+                <Style Selector="^ /template/ Border#NormalRectangle">
+                    <Setter Property="BorderBrush" Value="{DynamicResource CheckBoxDefaultDisabledBorderBrush}" />
+                    <Setter Property="Background" Value="{DynamicResource CheckBoxDefaultDisabledBackground}" />
+                </Style>
+                <Style Selector="^ /template/ ContentPresenter#PART_ContentPresenter">
+                    <Setter Property="Foreground" Value="{DynamicResource CheckBoxDisabledForeground}" />
+                </Style>
             </Style>
         </Style>
 
-        <!--  Unchecked Pressed State  -->
+        <Style Selector="^:indeterminate,^:checked">
-        <Style Selector="^:pressed">
             <Style Selector="^ /template/ Border#NormalRectangle">
-                <Setter Property="BorderBrush" Value="{DynamicResource CheckBoxPressedBorderBrush}" />
+                <Setter Property="BorderBrush" Value="{DynamicResource CheckBoxCheckedDefaultBorderBrush}" />
+                <Setter Property="Background" Value="{DynamicResource CheckBoxCheckedDefaultBackground}" />
             </Style>
             <Style Selector="^ /template/ Border#RootBorder">
-                <Setter Property="Background" Value="{DynamicResource CheckBoxCardPressedBackground}" />
+                <Setter Property="BorderBrush" Value="{DynamicResource CheckBoxCardCheckedBorderBrush}" />
+            </Style>
+            <Style Selector="^:pointerover">
+                <Style Selector="^ /template/ Border#NormalRectangle">
+                    <Setter Property="BorderBrush" Value="{DynamicResource CheckBoxCheckedPointeroverBorderBrush}" />
+                    <Setter Property="Background" Value="{DynamicResource CheckBoxCheckedPointeroverBackground}" />
+                </Style>
+                <Style Selector="^ /template/ Border#RootBorder">
+                    <Setter Property="BorderBrush" Value="{DynamicResource CheckBoxCardCheckedPointeroverBorderBrush}" />
+                </Style>
+            </Style>
+            <Style Selector="^:pressed">
+                <Style Selector="^ /template/ Border#NormalRectangle">
+                    <Setter Property="BorderBrush" Value="{DynamicResource CheckBoxCheckedPressedBorderBrush}" />
+                    <Setter Property="Background" Value="{DynamicResource CheckBoxCheckedPressedBackground}" />
+                </Style>
+                <Style Selector="^ /template/ Border#RootBorder">
+                    <Setter Property="BorderBrush" Value="{DynamicResource CheckBoxCardCheckedPressedBorderBrush}" />
+                </Style>
+            </Style>
+            <Style Selector="^:disabled">
+                <Style Selector="^ /template/ Border#NormalRectangle">
+                    <Setter Property="BorderBrush" Value="{DynamicResource CheckBoxCheckedDisabledBorderBrush}" />
+                    <Setter Property="Background" Value="{DynamicResource CheckBoxCheckedDisabledBackground}" />
+                </Style>
+                <Style Selector="^ /template/ Border#RootBorder">
+                    <Setter Property="BorderBrush" Value="{DynamicResource CheckBoxCardCheckedDisabledBorderBrush}" />
+                </Style>
+                <Style Selector="^ /template/ ContentPresenter#PART_ContentPresenter">
+                    <Setter Property="Foreground" Value="{DynamicResource CheckBoxDisabledForeground}" />
+                </Style>
             </Style>
         </Style>
 
-        <!--  Unchecked Disabled state  -->
+        <Style Selector="^:indeterminate /template/ PathIcon#CheckGlyph">
-        <Style Selector="^:disabled">
+            <Setter Property="Data" Value="{DynamicResource CheckBoxIndeterminateGlyph}" />
-            <Style Selector="^ /template/ ContentPresenter#PART_ContentPresenter">
-                <Setter Property="Foreground" Value="{DynamicResource CheckBoxDisabledForeground}" />
-            </Style>
-            <Style Selector="^ /template/ Border#NormalRectangle">
-                <Setter Property="BorderBrush" Value="{DynamicResource CheckBoxDefaultDisabledBorderBrush}" />
-                <Setter Property="Background" Value="{DynamicResource CheckBoxDefaultDisabledBackground}" />
-            </Style>
         </Style>
 
         <Style Selector="^:checked">
-            <Style Selector="^ /template/ Border#RootBorder">
-                <Setter Property="BorderBrush" Value="{DynamicResource CheckBoxCardCheckedBorderBrush}" />
-                <Setter Property="Background" Value="{DynamicResource CheckBoxCardCheckedBackground}" />
-            </Style>
-            <Style Selector="^ /template/ Border#NormalRectangle">
-                <Setter Property="BorderBrush" Value="{DynamicResource CheckBoxCheckedDefaultBorderBrush}" />
-                <Setter Property="Background" Value="{DynamicResource CheckBoxCheckedDefaultBackground}" />
-            </Style>
-
             <Style Selector="^ /template/ PathIcon#CheckGlyph">
                 <Setter Property="Data" Value="{DynamicResource CheckBoxCheckGlyph}" />
-                <Setter Property="Opacity" Value="1" />
             </Style>
-
+            <Style Selector="^ /template/ Border#RootBorder">
-            <!--  Checked Pointerover State  -->
+                <Setter Property="Background" Value="{DynamicResource CheckBoxCardCheckedBackground}" />
-            <Style Selector="^:pointerover">
-                <Style Selector="^ /template/ Border#NormalRectangle">
-                    <Setter Property="BorderBrush" Value="{DynamicResource CheckBoxCheckedPointeroverBorderBrush}" />
-                    <Setter Property="Background" Value="{DynamicResource CheckBoxCheckedPointeroverBackground}" />
-                </Style>
-                <Style Selector="^ /template/ Border#RootBorder">
-                    <Setter Property="BorderBrush" Value="{DynamicResource CheckBoxCardCheckedPointeroverBorderBrush}" />
-                </Style>
-            </Style>
-
-            <!--  Checked Pressed State  -->
-            <Style Selector="^:pressed">
-                <Style Selector="^ /template/ Border#NormalRectangle">
-                    <Setter Property="BorderBrush" Value="{DynamicResource CheckBoxCheckedPressedBorderBrush}" />
-                    <Setter Property="Background" Value="{DynamicResource CheckBoxCheckedPressedBackground}" />
-                </Style>
-                <Style Selector="^ /template/ Border#RootBorder">
-                    <Setter Property="BorderBrush" Value="{DynamicResource CheckBoxCardCheckedPressedBorderBrush}" />
-                </Style>
-            </Style>
-
-            <!--  Checked Disabled State  -->
-            <Style Selector="^:disabled">
-                <Style Selector="^ /template/ Border#RootBorder">
-                    <Setter Property="BorderBrush" Value="{DynamicResource CheckBoxCardCheckedDisabledBorderBrush}" />
-                </Style>
-                <Style Selector="^ /template/ ContentPresenter#PART_ContentPresenter">
-                    <Setter Property="Foreground" Value="{DynamicResource CheckBoxDisabledForeground}" />
-                </Style>
-                <Style Selector="^ /template/ Border#NormalRectangle">
-                    <Setter Property="BorderBrush" Value="{DynamicResource CheckBoxCheckedDisabledBorderBrush}" />
-                    <Setter Property="Background" Value="{DynamicResource CheckBoxCheckedDisabledBackground}" />
-                </Style>
-
-                <Style Selector="^ /template/ PathIcon#CheckGlyph">
-                    <Setter Property="Foreground" Value="{DynamicResource CheckBoxGlyphDisabledFill}" />
-                </Style>
             </Style>
         </Style>
 
-        <Style Selector="^:indeterminate">
+        <Style Selector="^:disabled">
-            <Style Selector="^ /template/ Border#RootBorder">
+            <Style Selector="^ /template/ Panel#PART_GlyphPanel">
-                <Setter Property="BorderBrush" Value="{DynamicResource CheckBoxCardCheckedBorderBrush}" />
+                <Setter Property="Opacity" Value="0.75" />
-            </Style>
-            <Style Selector="^ /template/ Border#NormalRectangle">
-                <Setter Property="BorderBrush" Value="{DynamicResource CheckBoxCheckedDefaultBorderBrush}" />
-                <Setter Property="Background" Value="{DynamicResource CheckBoxCheckedDefaultBackground}" />
-            </Style>
-
-            <Style Selector="^ /template/ PathIcon#CheckGlyph">
-                <Setter Property="Data" Value="{DynamicResource CheckBoxIndeterminateGlyph}" />
-                <Setter Property="Opacity" Value="1" />
-            </Style>
-
-            <!--  Checked Pointerover State  -->
-            <Style Selector="^:pointerover">
-                <Style Selector="^ /template/ Border#NormalRectangle">
-                    <Setter Property="BorderBrush" Value="{DynamicResource CheckBoxCheckedPointeroverBorderBrush}" />
-                    <Setter Property="Background" Value="{DynamicResource CheckBoxCheckedPointeroverBackground}" />
-                </Style>
-                <Style Selector="^ /template/ Border#RootBorder">
-                    <Setter Property="BorderBrush" Value="{DynamicResource CheckBoxCardCheckedPointeroverBorderBrush}" />
-                </Style>
-            </Style>
-
-            <!--  Checked Pressed State  -->
-            <Style Selector="^:pressed">
-                <Style Selector="^ /template/ Border#NormalRectangle">
-                    <Setter Property="BorderBrush" Value="{DynamicResource CheckBoxCheckedPressedBorderBrush}" />
-                    <Setter Property="Background" Value="{DynamicResource CheckBoxCheckedPressedBackground}" />
-                </Style>
-                <Style Selector="^ /template/ Border#RootBorder">
-                    <Setter Property="BorderBrush" Value="{DynamicResource CheckBoxCardCheckedPressedBorderBrush}" />
-                </Style>
-            </Style>
-
-            <!--  Checked Disabled State  -->
-            <Style Selector="^:disabled">
-                <Style Selector="^ /template/ Border#RootBorder">
-                    <Setter Property="BorderBrush" Value="{DynamicResource CheckBoxCardCheckedDisabledBorderBrush}" />
-                </Style>
-                <Style Selector="^ /template/ ContentPresenter#PART_ContentPresenter">
-                    <Setter Property="Foreground" Value="{DynamicResource CheckBoxDisabledForeground}" />
-                </Style>
-                <Style Selector="^ /template/ Border#NormalRectangle">
-                    <Setter Property="BorderBrush" Value="{DynamicResource CheckBoxCheckedDisabledBorderBrush}" />
-                    <Setter Property="Background" Value="{DynamicResource CheckBoxCheckedDisabledBackground}" />
-                </Style>
-
-                <Style Selector="^ /template/ PathIcon#CheckGlyph">
-                    <Setter Property="Foreground" Value="{DynamicResource CheckBoxGlyphDisabledFill}" />
-                </Style>
             </Style>
         </Style>
     </ControlTheme>
@@ -566,31 +344,21 @@
             </ControlTemplate>
         </Setter>
 
-        <!--  Unchecked Pointerover State  -->
+        <Style Selector="^:unchecked">
-        <Style Selector="^:pointerover">
+            <Style Selector="^:pointerover /template/ ContentPresenter#PART_ContentPresenter">
-            <Style Selector="^ /template/ ContentPresenter#PART_ContentPresenter">
                 <Setter Property="Background" Value="{DynamicResource CheckBoxCardPointeroverBackground}" />
             </Style>
-        </Style>
+            <Style Selector="^:pressed /template/ ContentPresenter#PART_ContentPresenter">
-
-        <!--  Unchecked Pressed State  -->
-        <Style Selector="^:pressed">
-            <Style Selector="^ /template/ ContentPresenter#PART_ContentPresenter">
                 <Setter Property="Background" Value="{DynamicResource CheckBoxCardPressedBackground}" />
             </Style>
-        </Style>
+            <Style Selector="^:disabled /template/ ContentPresenter#PART_ContentPresenter">
-
-        <!--  Unchecked Disabled state  -->
-        <Style Selector="^:disabled">
-            <Style Selector="^ /template/ ContentPresenter#PART_ContentPresenter">
                 <Setter Property="Foreground" Value="{DynamicResource CheckBoxDisabledForeground}" />
             </Style>
         </Style>
 
-        <Style Selector="^:checked">
+        <Style Selector="^:indeterminate,^:checked">
             <Style Selector="^ /template/ ContentPresenter#PART_ContentPresenter">
                 <Setter Property="BorderBrush" Value="{DynamicResource CheckBoxCardCheckedBorderBrush}" />
-                <Setter Property="Background" Value="{DynamicResource CheckBoxCardCheckedBackground}" />
             </Style>
             <Style Selector="^:pointerover /template/ ContentPresenter#PART_ContentPresenter">
                 <Setter Property="BorderBrush" Value="{DynamicResource CheckBoxCardCheckedPointeroverBorderBrush}" />
@@ -598,7 +366,6 @@
             <Style Selector="^:pressed /template/ ContentPresenter#PART_ContentPresenter">
                 <Setter Property="BorderBrush" Value="{DynamicResource CheckBoxCardCheckedPressedBorderBrush}" />
             </Style>
-            <!--  Checked Disabled State  -->
             <Style Selector="^:disabled">
                 <Style Selector="^ /template/ ContentPresenter#PART_ContentPresenter">
                     <Setter Property="BorderBrush" Value="{DynamicResource CheckBoxCardCheckedDisabledBorderBrush}" />
@@ -609,21 +376,8 @@
             </Style>
         </Style>
 
-        <Style Selector="^:indeterminate">
+        <Style Selector="^:checked /template/ ContentPresenter#PART_ContentPresenter">
-            <Style Selector="^ /template/ ContentPresenter#PART_ContentPresenter">
+            <Setter Property="Background" Value="{DynamicResource CheckBoxCardCheckedBackground}" />
-                <Setter Property="BorderBrush" Value="{DynamicResource CheckBoxCardCheckedBorderBrush}" />
-            </Style>
-            <Style Selector="^:pointerover /template/ ContentPresenter#PART_ContentPresenter">
-                <Setter Property="BorderBrush" Value="{DynamicResource CheckBoxCardCheckedPointeroverBorderBrush}" />
-            </Style>
-            <Style Selector="^:pressed /template/ ContentPresenter#PART_ContentPresenter">
-                <Setter Property="BorderBrush" Value="{DynamicResource CheckBoxCardCheckedPressedBorderBrush}" />
-            </Style>
-            <Style Selector="^:disabled">
-                <Style Selector="^ /template/ ContentPresenter#PART_ContentPresenter">
-                    <Setter Property="BorderBrush" Value="{DynamicResource CheckBoxCardCheckedDisabledBorderBrush}" />
-                </Style>
-            </Style>
         </Style>
     </ControlTheme>
 </ResourceDictionary>

src/Semi.Avalonia/Controls/ComboBox.axaml

@@ -12,7 +12,7 @@
                 <ComboBoxItem>BBB</ComboBoxItem>
                 <ComboBoxItem>CCC</ComboBoxItem>
             </ComboBox>
-            <ComboBox Width="100" PlaceholderText="Select">
+            <ComboBox Width="100" PlaceholderText="Select" PlaceholderForeground="Red">
                 <ComboBoxItem>AAA</ComboBoxItem>
                 <ComboBoxItem>BBB</ComboBoxItem>
                 <ComboBoxItem>CCC</ComboBoxItem>
@@ -44,6 +44,7 @@
         <Setter Property="HorizontalAlignment" Value="Left" />
         <Setter Property="VerticalAlignment" Value="Top" />
         <Setter Property="MinHeight" Value="{DynamicResource ComboBoxDefaultHeight}" />
+        <Setter Property="PlaceholderForeground" Value="{DynamicResource ComboBoxSelectorPlaceHolderForeground}" />
         <Setter Property="Template">
             <ControlTemplate TargetType="ComboBox">
                 <DataValidationErrors>
@@ -65,9 +66,8 @@
                             HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                             VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                             TextTrimming="CharacterEllipsis"
-                            Foreground="{TemplateBinding Foreground}"
+                            Foreground="{TemplateBinding PlaceholderForeground}"
                             IsVisible="{TemplateBinding SelectionBoxItem,Converter={x:Static ObjectConverters.IsNull}}"
-                            Opacity="0.3"
                             Text="{TemplateBinding PlaceholderText}" />
                         <ContentPresenter
                             Name="ContentPresenter"
@@ -137,7 +137,7 @@
                 <Setter Property="IsVisible" Value="{Binding $parent[ComboBox].SelectionBoxItem, Converter={x:Static ObjectConverters.IsNotNull}}" />
             </Style>
             <Style Selector="^:pointerover /template/ PathIcon#DropDownGlyph">
-                <Setter Property="IsVisible" Value="{Binding $parent[ComboBox].SelectionBoxItem, Converter={x:Static ObjectConverters.IsNull}}"/>
+                <Setter Property="IsVisible" Value="{Binding $parent[ComboBox].SelectionBoxItem, Converter={x:Static ObjectConverters.IsNull}}" />
             </Style>
         </Style>
 
@@ -320,4 +320,4 @@
         </Style>
 
     </ControlTheme>
-</ResourceDictionary>
+</ResourceDictionary>

src/Semi.Avalonia/Controls/ContextMenu.axaml

@@ -10,9 +10,10 @@
         <Setter Property="MaxWidth" Value="{DynamicResource MenuFlyoutMaxWidth}" />
         <Setter Property="MinHeight" Value="{DynamicResource MenuFlyoutMinHeight}" />
         <Setter Property="Padding" Value="{DynamicResource MenuFlyoutPadding}" />
-        <Setter Property="Focusable" Value="True"></Setter>
+        <Setter Property="Focusable" Value="True" />
         <Setter Property="HorizontalAlignment" Value="Stretch" />
-        <Setter Property="FontWeight" Value="Normal" />
+        <Setter Property="FontSize" Value="{DynamicResource MenuFlyoutFontSize}" />
+        <Setter Property="FontWeight" Value="{DynamicResource MenuFlyoutFontWeight}" />
         <Setter Property="WindowManagerAddShadowHint" Value="False" />
         <Setter Property="Template">
             <ControlTemplate TargetType="ContextMenu">
@@ -38,4 +39,4 @@
             </ControlTemplate>
         </Setter>
     </ControlTheme>
-</ResourceDictionary>
+</ResourceDictionary>

src/Semi.Avalonia/Controls/DataValidationErrors.axaml

@@ -104,4 +104,4 @@
             </DataTemplate>
         </Setter>
     </ControlTheme>
-</ResourceDictionary>
+</ResourceDictionary>

src/Semi.Avalonia/Controls/DatePicker.axaml

@@ -2,15 +2,19 @@
     xmlns="https://github.com/avaloniaui"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
     x:CompileBindings="True">
+    <Design.PreviewWith>
+        <Border Padding="20">
+            <DatePickerPresenter />
+        </Border>
+    </Design.PreviewWith>
     <ControlTheme x:Key="{x:Type DatePickerPresenter}" TargetType="DatePickerPresenter">
         <Setter Property="Width" Value="296" />
         <Setter Property="MinWidth" Value="296" />
         <Setter Property="MaxHeight" Value="300" />
-        <Setter Property="FontWeight" Value="Normal" />
         <Setter Property="Background" Value="{DynamicResource DateTimePickerPopupBackground}" />
         <Setter Property="BorderBrush" Value="{DynamicResource DateTimePickerPopupBorderBrush}" />
         <Setter Property="BorderThickness" Value="1" />
-        <Setter Property="CornerRadius" Value="6" />
+        <Setter Property="CornerRadius" Value="{DynamicResource DateTimePickerPopupCornerRadius}" />
         <Setter Property="Template">
             <ControlTemplate TargetType="DatePickerPresenter">
                 <Border
@@ -92,8 +96,7 @@
                                     VerticalAlignment="Stretch"
                                     Theme="{StaticResource DateTimePickerButton}">
                                     <PathIcon
-                                        Width="12"
+                                        Theme="{StaticResource InnerPathIcon}"
-                                        Height="12"
                                         Data="{DynamicResource DateTimePickerAcceptGlyph}" />
                                 </Button>
                                 <Rectangle
@@ -107,8 +110,7 @@
                                     VerticalAlignment="Stretch"
                                     Theme="{StaticResource DateTimePickerButton}">
                                     <PathIcon
-                                        Width="12"
+                                        Theme="{StaticResource InnerPathIcon}"
-                                        Height="12"
                                         Data="{DynamicResource DateTimePickerDismissGlyph}" />
                                 </Button>
                                 <Rectangle
@@ -268,4 +270,4 @@
         </Style>
     </ControlTheme>
 
-</ResourceDictionary>
+</ResourceDictionary>

src/Semi.Avalonia/Controls/DateTimePickerShared.axaml

@@ -115,8 +115,8 @@
         <Setter Property="Content">
             <Template>
                 <PathIcon
-                    Width="8"
+                    Theme="{StaticResource InnerPathIcon}"
-                    Height="8"
+                    Classes="ExtraSmall"
                     HorizontalAlignment="Center"
                     VerticalAlignment="Center"
                     Data="{DynamicResource DateTimePickerButtonUpGlyph}" />
@@ -136,12 +136,12 @@
         <Setter Property="Content">
             <Template>
                 <PathIcon
-                    Width="8"
+                    Theme="{StaticResource InnerPathIcon}"
-                    Height="8"
+                    Classes="ExtraSmall"
                     HorizontalAlignment="Center"
                     VerticalAlignment="Center"
                     Data="{DynamicResource DateTimePickerButtonDownGlyph}" />
             </Template>
         </Setter>
     </ControlTheme>
-</ResourceDictionary>
+</ResourceDictionary>

src/Semi.Avalonia/Controls/DropDownButton.axaml

@@ -56,10 +56,6 @@
             </ControlTemplate>
         </Setter>
 
-        <Style Selector="^:pressed">
-            <Setter Property="RenderTransform" Value="scale(0.98)" />
-        </Style>
-
         <Style Selector="^ /template/ Border#RootBorder">
             <Setter Property="BorderBrush" Value="{TemplateBinding BorderBrush}" />
             <Setter Property="Background" Value="{TemplateBinding Background}" />

src/Semi.Avalonia/Controls/EmbeddableControlRoot.axaml

@@ -3,6 +3,7 @@
         <Setter Property="Background" Value="{DynamicResource WindowDefaultBackground}" />
         <Setter Property="Foreground" Value="{DynamicResource WindowDefaultForeground}" />
         <Setter Property="FontSize" Value="{DynamicResource DefaultFontSize}" />
+        <Setter Property="FontWeight" Value="{DynamicResource DefaultFontWeight}" />
         <Setter Property="FontFamily" Value="{DynamicResource DefaultFontFamily}" />
         <Setter Property="Template">
             <ControlTemplate>
@@ -21,4 +22,4 @@
             </ControlTemplate>
         </Setter>
     </ControlTheme>
-</ResourceDictionary>
+</ResourceDictionary>

src/Semi.Avalonia/Controls/Expander.axaml

@@ -149,4 +149,4 @@
             <Setter Property="Foreground" Value="{DynamicResource ExpanderHeaderDisabledForeground}" />
         </Style>
     </ControlTheme>
-</ResourceDictionary>
+</ResourceDictionary>

src/Semi.Avalonia/Controls/FlyoutPresenter.axaml

@@ -90,4 +90,4 @@
             </ControlTemplate>
         </Setter>
     </ControlTheme>
-</ResourceDictionary>
+</ResourceDictionary>

src/Semi.Avalonia/Controls/GridSplitter.axaml

@@ -26,4 +26,4 @@
             </ControlTemplate>
         </Setter>
     </ControlTheme>
-</ResourceDictionary>
+</ResourceDictionary>

src/Semi.Avalonia/Controls/HyperlinkButton.axaml

@@ -52,7 +52,6 @@
 
         <Style Selector="^:pressed">
             <Setter Property="Foreground" Value="{DynamicResource HyperlinkButtonPressedForeground}" />
-            <Setter Property="RenderTransform" Value="scale(0.98)" />
         </Style>
 
         <Style Selector="^:disabled">
@@ -68,7 +67,6 @@
 
             <Style Selector="^:pressed">
                 <Setter Property="Foreground" Value="{DynamicResource HyperlinkButtonPressedForeground}" />
-                <Setter Property="RenderTransform" Value="scale(0.98)" />
             </Style>
 
             <Style Selector="^:disabled">

src/Semi.Avalonia/Controls/ItemsControl.axaml

@@ -16,4 +16,4 @@
             </ControlTemplate>
         </Setter>
     </ControlTheme>
-</ResourceDictionary>
+</ResourceDictionary>

src/Semi.Avalonia/Controls/Label.axaml

@@ -170,14 +170,14 @@
         <Setter Property="HorizontalAlignment" Value="Left" />
         <Setter Property="UseLayoutRounding" Value="False" />
         <Setter Property="VerticalAlignment" Value="Center" />
+        <Setter Property="VerticalContentAlignment" Value="Center" />
         <Setter Property="Padding" Value="{DynamicResource LabelTagSmallPadding}" />
         <Setter Property="FontSize" Value="{DynamicResource LabelTagFontSize}" />
+        <Setter Property="FontWeight" Value="{DynamicResource LabelTagFontWeight}" />
         <Setter Property="Template">
             <ControlTemplate TargetType="Label">
                 <ContentPresenter
                     Name="PART_ContentPresenter"
-                    MinWidth="{TemplateBinding MinWidth}"
-                    MinHeight="{TemplateBinding MinHeight}"
                     Padding="{TemplateBinding Padding}"
                     HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
                     VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
@@ -267,11 +267,6 @@
                 <Setter Property="Background" Value="{DynamicResource LabelTagLightGreyBackground}" />
                 <Setter Property="Foreground" Value="{DynamicResource LabelTagLightGreyForeground}" />
             </Style>
-            <Style Selector="^.White">
-                <Setter Property="Background" Value="{DynamicResource LabelTagLightWhiteBackground}" />
-                <Setter Property="Foreground" Value="{DynamicResource LabelTagLightWhiteForeground}" />
-                <Setter Property="BorderBrush" Value="{DynamicResource LabelTagLightWhiteBorderBrush}" />
-            </Style>
         </Style>
         <Style Selector="^.Ghost">
             <Setter Property="Background" Value="Transparent" />
@@ -341,11 +336,6 @@
                 <Setter Property="BorderBrush" Value="{DynamicResource LabelTagGhostGreyBorderBrush}" />
                 <Setter Property="Foreground" Value="{DynamicResource LabelTagGhostGreyForeground}" />
             </Style>
-            <Style Selector="^.White">
-                <Setter Property="Background" Value="{DynamicResource LabelTagGhostWhiteBackground}" />
-                <Setter Property="Foreground" Value="{DynamicResource LabelTagGhostWhiteForeground}" />
-                <Setter Property="BorderBrush" Value="{DynamicResource LabelTagGhostWhiteBorderBrush}" />
-            </Style>
         </Style>
         <Style Selector="^.Solid">
             <Setter Property="BorderBrush" Value="Transparent" />
@@ -399,11 +389,12 @@
             <Style Selector="^.Grey">
                 <Setter Property="Background" Value="{DynamicResource LabelTagSolidGreyBackground}" />
             </Style>
-            <Style Selector="^.White">
+        </Style>
-                <Setter Property="Foreground" Value="{DynamicResource LabelTagSolidWhiteForeground}" />
+
-                <Setter Property="BorderBrush" Value="{DynamicResource LabelTagSolidWhiteBorderBrush}" />
+        <Style Selector="^.White">
-                <Setter Property="Background" Value="{DynamicResource LabelTagSolidWhiteBackground}" />
+            <Setter Property="Foreground" Value="{DynamicResource LabelTagSolidWhiteForeground}" />
-            </Style>
+            <Setter Property="BorderBrush" Value="{DynamicResource LabelTagSolidWhiteBorderBrush}" />
+            <Setter Property="Background" Value="{DynamicResource LabelTagSolidWhiteBackground}" />
         </Style>
     </ControlTheme>
-</ResourceDictionary>
+</ResourceDictionary>

src/Semi.Avalonia/Controls/ListBox.axaml

@@ -59,7 +59,6 @@
                     Content="{TemplateBinding Content}"
                     ContentTemplate="{TemplateBinding ContentTemplate}"
                     CornerRadius="{TemplateBinding CornerRadius}"
-                    FontWeight="Normal"
                     Foreground="{TemplateBinding Foreground}" />
             </ControlTemplate>
         </Setter>
@@ -138,6 +137,7 @@
                     CornerRadius="{TemplateBinding CornerRadius}">
                     <Grid ColumnDefinitions="Auto,*">
                         <Panel
+                            Name="PART_GlyphPanel"
                             Grid.Column="0"
                             TemplatedControl.IsTemplateFocusTarget="True"
                             VerticalAlignment="{TemplateBinding VerticalContentAlignment}">
@@ -176,69 +176,51 @@
             </ControlTemplate>
         </Setter>
 
-        <!--  Unchecked State  -->
+        <Style Selector="^">
-        <Style Selector="^ /template/ Ellipse#OuterEllipse">
+            <Style Selector="^ /template/ Ellipse#CheckGlyph">
-            <Setter Property="Stroke" Value="{DynamicResource RadioButtonUncheckIconDefaultBorderBrush}" />
+                <Setter Property="IsVisible" Value="False" />
-            <Setter Property="Fill" Value="{DynamicResource RadioButtonUncheckIconDefaultBackground}" />
+            </Style>
-        </Style>
-        <Style Selector="^ /template/ Ellipse#CheckGlyph">
-            <Setter Property="Opacity" Value="0" />
-        </Style>
 
-        <!--  Unchecked Pointerover State  -->
-        <Style Selector="^:pointerover">
             <Style Selector="^ /template/ Ellipse#OuterEllipse">
+                <Setter Property="Stroke" Value="{DynamicResource RadioButtonUncheckIconDefaultBorderBrush}" />
+                <Setter Property="Fill" Value="{DynamicResource RadioButtonUncheckIconDefaultBackground}" />
+            </Style>
+            <Style Selector="^:pointerover /template/ Ellipse#OuterEllipse">
                 <Setter Property="Stroke" Value="{DynamicResource RadioButtonUncheckIconPointeroverBorderBrush}" />
                 <Setter Property="Fill" Value="{DynamicResource RadioButtonUncheckIconPointeroverBackground}" />
             </Style>
-        </Style>
+            <Style Selector="^:pressed /template/ Ellipse#OuterEllipse">
-
-        <!--  Unchecked Pressed State  -->
-        <Style Selector="^:pressed">
-            <Style Selector="^ /template/ Ellipse#OuterEllipse">
                 <Setter Property="Stroke" Value="{DynamicResource RadioButtonUncheckIconPressedBorderBrush}" />
                 <Setter Property="Fill" Value="{DynamicResource RadioButtonUncheckIconPressedBackground}" />
             </Style>
-        </Style>
+            <Style Selector="^:disabled">
-
+                <Style Selector="^ /template/ Ellipse#OuterEllipse">
-        <!--  Unchecked Disabled state  -->
+                    <Setter Property="Stroke" Value="{DynamicResource RadioButtonUncheckIconDisabledBorderBrush}" />
-        <Style Selector="^:disabled">
+                    <Setter Property="Fill" Value="{DynamicResource RadioButtonUncheckIconDisabledBackground}" />
-            <Style Selector="^ /template/ Ellipse#OuterEllipse">
+                </Style>
-                <Setter Property="Stroke" Value="{DynamicResource RadioButtonUncheckIconDisabledBorderBrush}" />
+                <Style Selector="^ /template/ ContentPresenter#PART_ContentPresenter">
-                <Setter Property="Fill" Value="{DynamicResource RadioButtonUncheckIconDisabledBackground}" />
+                    <Setter Property="Foreground" Value="{DynamicResource RadioButtonDisabledForeground}" />
-            </Style>
+                </Style>
-            <Style Selector="^ /template/ ContentPresenter#PART_ContentPresenter">
-                <Setter Property="Foreground" Value="{DynamicResource RadioButtonDisabledForeground}" />
             </Style>
         </Style>
 
-        <!--  Checked State  -->
         <Style Selector="^:selected">
+            <Style Selector="^ /template/ Ellipse#CheckGlyph">
+                <Setter Property="IsVisible" Value="True" />
+            </Style>
+
             <Style Selector="^ /template/ Ellipse#OuterEllipse">
                 <Setter Property="Stroke" Value="{DynamicResource RadioButtonCheckIconDefaultBorderBrush}" />
                 <Setter Property="Fill" Value="{DynamicResource RadioButtonCheckIconDefaultBackground}" />
             </Style>
-            <Style Selector="^ /template/ Ellipse#CheckGlyph">
+            <Style Selector="^:pointerover /template/ Ellipse#OuterEllipse">
-                <Setter Property="Opacity" Value="1" />
+                <Setter Property="Stroke" Value="{DynamicResource RadioButtonCheckIconPointeroverBorderBrush}" />
+                <Setter Property="Fill" Value="{DynamicResource RadioButtonCheckIconPointeroverBackground}" />
             </Style>
-
+            <Style Selector="^:pressed /template/ Ellipse#OuterEllipse">
-            <!--  Checked Pointerover State  -->
+                <Setter Property="Stroke" Value="{DynamicResource RadioButtonCheckIconPressedBorderBrush}" />
-            <Style Selector="^:pointerover">
+                <Setter Property="Fill" Value="{DynamicResource RadioButtonCheckIconPressedBackground}" />
-                <Style Selector="^ /template/ Ellipse#OuterEllipse">
-                    <Setter Property="Stroke" Value="{DynamicResource RadioButtonCheckIconPointeroverBorderBrush}" />
-                    <Setter Property="Fill" Value="{DynamicResource RadioButtonCheckIconPointeroverBackground}" />
-                </Style>
             </Style>
-
-            <!--  Checked Pressed State  -->
-            <Style Selector="^:pressed">
-                <Style Selector="^ /template/ Ellipse#OuterEllipse">
-                    <Setter Property="Stroke" Value="{DynamicResource RadioButtonCheckIconPressedBorderBrush}" />
-                    <Setter Property="Fill" Value="{DynamicResource RadioButtonCheckIconPressedBackground}" />
-                </Style>
-            </Style>
-
-            <!--  Checked Disabled State  -->
             <Style Selector="^:disabled">
                 <Style Selector="^ /template/ Ellipse#OuterEllipse">
                     <Setter Property="Stroke" Value="{DynamicResource RadioButtonCheckIconDisabledBorderBrush}" />
@@ -249,6 +231,12 @@
                 </Style>
             </Style>
         </Style>
+
+        <Style Selector="^:disabled">
+            <Style Selector="^ /template/ Panel#PART_GlyphPanel">
+                <Setter Property="Opacity" Value="0.75" />
+            </Style>
+        </Style>
     </ControlTheme>
 
 
@@ -339,6 +327,7 @@
                         VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                         ColumnDefinitions="Auto,*">
                         <Panel
+                            Name="PART_GlyphPanel"
                             Grid.Column="0"
                             VerticalAlignment="Top"
                             Margin="{DynamicResource RadioButtonIconMargin}">
@@ -378,77 +367,73 @@
             </ControlTemplate>
         </Setter>
 
-        <!--  Unchecked State  -->
+        <Style Selector="^">
-        <Style Selector="^ /template/ Ellipse#OuterEllipse">
+            <Style Selector="^ /template/ Ellipse#CheckGlyph">
-            <Setter Property="Stroke" Value="{DynamicResource RadioButtonUncheckIconDefaultBorderBrush}" />
+                <Setter Property="IsVisible" Value="False" />
-            <Setter Property="Fill" Value="{DynamicResource RadioButtonUncheckIconDefaultBackground}" />
+            </Style>
-        </Style>
-        <Style Selector="^ /template/ Ellipse#CheckGlyph">
-            <Setter Property="Opacity" Value="0" />
-        </Style>
 
-        <!--  Unchecked Pointerover State  -->
-        <Style Selector="^:pointerover">
-            <Setter Property="Background" Value="{DynamicResource RadioButtonCardUncheckPointeroverBackground}" />
             <Style Selector="^ /template/ Ellipse#OuterEllipse">
-                <Setter Property="Stroke" Value="{DynamicResource RadioButtonUncheckIconPointeroverBorderBrush}" />
+                <Setter Property="Stroke" Value="{DynamicResource RadioButtonUncheckIconDefaultBorderBrush}" />
+                <Setter Property="Fill" Value="{DynamicResource RadioButtonUncheckIconDefaultBackground}" />
+            </Style>
+            <Style Selector="^:pointerover">
+                <Style Selector="^ /template/ Ellipse#OuterEllipse">
+                    <Setter Property="Stroke" Value="{DynamicResource RadioButtonUncheckIconPointeroverBorderBrush}" />
+                </Style>
+                <Style Selector="^ /template/ Border#RootBorder">
+                    <Setter Property="Background" Value="{DynamicResource RadioButtonCardUncheckPointeroverBackground}" />
+                </Style>
+            </Style>
+            <Style Selector="^:pressed">
+                <Style Selector="^ /template/ Ellipse#OuterEllipse">
+                    <Setter Property="Stroke" Value="{DynamicResource RadioButtonUncheckIconPressedBorderBrush}" />
+                </Style>
+                <Style Selector="^ /template/ Border#RootBorder">
+                    <Setter Property="Background" Value="{DynamicResource RadioButtonCardUncheckPressedBackground}" />
+                </Style>
+            </Style>
+            <Style Selector="^:disabled">
+                <Style Selector="^ /template/ Ellipse#OuterEllipse">
+                    <Setter Property="Stroke" Value="{DynamicResource RadioButtonUncheckIconDisabledBorderBrush}" />
+                    <Setter Property="Fill" Value="{DynamicResource RadioButtonUncheckIconDisabledBackground}" />
+                </Style>
+                <Style Selector="^ /template/ ContentPresenter#PART_ContentPresenter">
+                    <Setter Property="Foreground" Value="{DynamicResource RadioButtonDisabledForeground}" />
+                </Style>
             </Style>
         </Style>
 
-        <!--  Unchecked Pressed State  -->
-        <Style Selector="^:pressed">
-            <Setter Property="Background" Value="{DynamicResource RadioButtonCardUncheckPressedBackground}" />
-            <Style Selector="^ /template/ Ellipse#OuterEllipse">
-                <Setter Property="Stroke" Value="{DynamicResource RadioButtonUncheckIconPressedBorderBrush}" />
-            </Style>
-        </Style>
-
-        <!--  Unchecked Disabled state  -->
-        <Style Selector="^:disabled">
-            <Style Selector="^ /template/ Ellipse#OuterEllipse">
-                <Setter Property="Stroke" Value="{DynamicResource RadioButtonUncheckIconDisabledBorderBrush}" />
-                <Setter Property="Fill" Value="{DynamicResource RadioButtonUncheckIconDisabledBackground}" />
-            </Style>
-            <Style Selector="^ /template/ ContentPresenter#PART_ContentPresenter">
-                <Setter Property="Foreground" Value="{DynamicResource RadioButtonDisabledForeground}" />
-            </Style>
-        </Style>
-
-        <!--  Checked State  -->
         <Style Selector="^:selected">
-            <Setter Property="Background" Value="{DynamicResource RadioButtonCardCheckedBackground}" />
+            <Style Selector="^ /template/ Ellipse#CheckGlyph">
-            <Setter Property="BorderBrush" Value="{DynamicResource RadioButtonCardCheckDefaultBorderBrush}" />
+                <Setter Property="IsVisible" Value="True" />
+            </Style>
+
             <Style Selector="^ /template/ Ellipse#OuterEllipse">
                 <Setter Property="Stroke" Value="{DynamicResource RadioButtonCheckIconDefaultBorderBrush}" />
                 <Setter Property="Fill" Value="{DynamicResource RadioButtonCheckIconDefaultBackground}" />
             </Style>
-            <Style Selector="^ /template/ Ellipse#CheckGlyph">
+            <Style Selector="^ /template/ Border#RootBorder">
-                <Setter Property="Opacity" Value="1" />
+                <Setter Property="Background" Value="{DynamicResource RadioButtonCardCheckedBackground}" />
+                <Setter Property="BorderBrush" Value="{DynamicResource RadioButtonCardCheckDefaultBorderBrush}" />
             </Style>
-
-            <!--  Checked Pointerover State  -->
             <Style Selector="^:pointerover">
-                <Setter Property="BorderBrush" Value="{DynamicResource RadioButtonCardCheckPointeroverBorderBrush}" />
                 <Style Selector="^ /template/ Ellipse#OuterEllipse">
                     <Setter Property="Stroke" Value="{DynamicResource RadioButtonCheckIconPointeroverBorderBrush}" />
                     <Setter Property="Fill" Value="{DynamicResource RadioButtonCheckIconPointeroverBackground}" />
                 </Style>
-                <Style Selector="^ /template/ Ellipse#OuterEllipse">
+                <Style Selector="^ /template/ Border#RootBorder">
-                    <Setter Property="Stroke" Value="{DynamicResource RadioButtonCheckIconPointeroverBorderBrush}" />
+                    <Setter Property="BorderBrush" Value="{DynamicResource RadioButtonCardCheckPointeroverBorderBrush}" />
-                    <Setter Property="Fill" Value="{DynamicResource RadioButtonCheckIconPointeroverBackground}" />
                 </Style>
             </Style>
-
-            <!--  Checked Pressed State  -->
             <Style Selector="^:pressed">
-                <Setter Property="BorderBrush" Value="{DynamicResource RadioButtonCardCheckPressedBorderBrush}" />
                 <Style Selector="^ /template/ Ellipse#OuterEllipse">
                     <Setter Property="Stroke" Value="{DynamicResource RadioButtonCheckIconPressedBorderBrush}" />
                     <Setter Property="Fill" Value="{DynamicResource RadioButtonCheckIconPressedBackground}" />
                 </Style>
+                <Style Selector="^ /template/ Border#RootBorder">
+                    <Setter Property="BorderBrush" Value="{DynamicResource RadioButtonCardCheckPressedBorderBrush}" />
+                </Style>
             </Style>
-
-            <!--  Checked Disabled State  -->
             <Style Selector="^:disabled">
                 <Style Selector="^ /template/ Ellipse#OuterEllipse">
                     <Setter Property="Stroke" Value="{DynamicResource RadioButtonCheckIconDisabledBorderBrush}" />
@@ -463,6 +448,12 @@
                 </Style>
             </Style>
         </Style>
+
+        <Style Selector="^:disabled">
+            <Style Selector="^ /template/ Panel#PART_GlyphPanel">
+                <Setter Property="Opacity" Value="0.75" />
+            </Style>
+        </Style>
     </ControlTheme>
 
 
@@ -499,33 +490,35 @@
                     TextWrapping="Wrap" />
             </ControlTemplate>
         </Setter>
-        <Setter Property="BorderBrush" Value="{DynamicResource RadioButtonCardDefaultBorderBrush}" />
+        <Style Selector="^">
-        <Style Selector="^:pointerover">
-            <Setter Property="Background" Value="{DynamicResource RadioButtonCardUncheckPointeroverBackground}" />
-        </Style>
-        <Style Selector="^:pressed">
-            <Setter Property="Background" Value="{DynamicResource RadioButtonCardUncheckPressedBackground}" />
-        </Style>
-        <Style Selector="^:disabled">
             <Style Selector="^ /template/ ContentPresenter#PART_ContentPresenter">
+                <Setter Property="BorderBrush" Value="{DynamicResource RadioButtonCardDefaultBorderBrush}" />
+            </Style>
+            <Style Selector="^:pointerover /template/ ContentPresenter#PART_ContentPresenter">
+                <Setter Property="Background" Value="{DynamicResource RadioButtonCardUncheckPointeroverBackground}" />
+            </Style>
+            <Style Selector="^:pressed /template/ ContentPresenter#PART_ContentPresenter">
+                <Setter Property="Background" Value="{DynamicResource RadioButtonCardUncheckPressedBackground}" />
+            </Style>
+            <Style Selector="^:disabled /template/ ContentPresenter#PART_ContentPresenter">
                 <Setter Property="Foreground" Value="{DynamicResource RadioButtonDisabledForeground}" />
             </Style>
         </Style>
         <Style Selector="^:selected">
-            <Setter Property="Background" Value="{DynamicResource RadioButtonCardCheckedBackground}" />
+            <Style Selector="^ /template/ ContentPresenter#PART_ContentPresenter">
-            <Setter Property="BorderBrush" Value="{DynamicResource RadioButtonCardCheckDefaultBorderBrush}" />
+                <Setter Property="Background" Value="{DynamicResource RadioButtonCardCheckedBackground}" />
-            <Style Selector="^:pointerover">
+                <Setter Property="BorderBrush" Value="{DynamicResource RadioButtonCardCheckDefaultBorderBrush}" />
+            </Style>
+            <Style Selector="^:pointerover /template/ ContentPresenter#PART_ContentPresenter">
                 <Setter Property="BorderBrush" Value="{DynamicResource RadioButtonCardCheckPointeroverBorderBrush}" />
             </Style>
-            <Style Selector="^:pressed">
+            <Style Selector="^:pressed /template/ ContentPresenter#PART_ContentPresenter">
                 <Setter Property="BorderBrush" Value="{DynamicResource RadioButtonCardCheckPressedBorderBrush}" />
             </Style>
-            <Style Selector="^:disabled">
+            <Style Selector="^:disabled /template/ ContentPresenter#PART_ContentPresenter">
                 <Setter Property="BorderBrush" Value="{DynamicResource RadioButtonCheckIconDisabledBackground}" />
                 <Setter Property="Background" Value="{DynamicResource RadioButtonCardCheckedBackground}" />
-                <Style Selector="^ /template/ ContentPresenter#PART_ContentPresenter">
+                <Setter Property="Foreground" Value="{DynamicResource RadioButtonDisabledForeground}" />
-                    <Setter Property="Foreground" Value="{DynamicResource RadioButtonDisabledForeground}" />
-                </Style>
             </Style>
         </Style>
     </ControlTheme>
@@ -558,6 +551,7 @@
                     CornerRadius="{TemplateBinding CornerRadius}">
                     <Grid ColumnDefinitions="Auto,*">
                         <Panel
+                            Name="PART_GlyphPanel"
                             Grid.Column="0"
                             TemplatedControl.IsTemplateFocusTarget="True"
                             VerticalAlignment="{TemplateBinding VerticalContentAlignment}">
@@ -594,30 +588,23 @@
             </ControlTemplate>
         </Setter>
 
-        <!--  Unchecked Pointerover State  -->
+        <Style Selector="^">
-        <Style Selector="^:pointerover">
+            <Style Selector="^:pointerover /template/ Border#NormalRectangle">
-            <Style Selector="^ /template/ Border#NormalRectangle">
                 <Setter Property="BorderBrush" Value="{DynamicResource CheckBoxPointeroverBorderBrush}" />
                 <Setter Property="Background" Value="{DynamicResource CheckBoxPointeroverBackground}" />
             </Style>
-        </Style>
+            <Style Selector="^:pressed /template/ Border#NormalRectangle">
-
-        <!--  Unchecked Pressed State  -->
-        <Style Selector="^:pressed">
-            <Style Selector="^ /template/ Border#NormalRectangle">
                 <Setter Property="BorderBrush" Value="{DynamicResource CheckBoxPressedBorderBrush}" />
                 <Setter Property="Background" Value="{DynamicResource CheckBoxPressedBackground}" />
             </Style>
-        </Style>
+            <Style Selector="^:disabled">
-
+                <Style Selector="^ /template/ Border#NormalRectangle">
-        <!--  Unchecked Disabled state  -->
+                    <Setter Property="BorderBrush" Value="{DynamicResource CheckBoxDefaultDisabledBorderBrush}" />
-        <Style Selector="^:disabled">
+                    <Setter Property="Background" Value="{DynamicResource CheckBoxDefaultDisabledBackground}" />
-            <Style Selector="^ /template/ ContentPresenter#PART_ContentPresenter">
+                </Style>
-                <Setter Property="Foreground" Value="{DynamicResource CheckBoxDisabledForeground}" />
+                <Style Selector="^ /template/ ContentPresenter#PART_ContentPresenter">
-            </Style>
+                    <Setter Property="Foreground" Value="{DynamicResource CheckBoxDisabledForeground}" />
-            <Style Selector="^ /template/ Border#NormalRectangle">
+                </Style>
-                <Setter Property="BorderBrush" Value="{DynamicResource CheckBoxDefaultDisabledBorderBrush}" />
-                <Setter Property="Background" Value="{DynamicResource CheckBoxDefaultDisabledBackground}" />
             </Style>
         </Style>
 
@@ -626,84 +613,32 @@
                 <Setter Property="BorderBrush" Value="{DynamicResource CheckBoxCheckedDefaultBorderBrush}" />
                 <Setter Property="Background" Value="{DynamicResource CheckBoxCheckedDefaultBackground}" />
             </Style>
-
+            <Style Selector="^:pointerover /template/ Border#NormalRectangle">
-            <Style Selector="^ /template/ PathIcon#CheckGlyph">
+                <Setter Property="BorderBrush" Value="{DynamicResource CheckBoxCheckedPointeroverBorderBrush}" />
-                <Setter Property="Data" Value="{DynamicResource CheckBoxCheckGlyph}" />
+                <Setter Property="Background" Value="{DynamicResource CheckBoxCheckedPointeroverBackground}" />
-                <Setter Property="Opacity" Value="1" />
             </Style>
-
+            <Style Selector="^:pressed /template/ Border#NormalRectangle">
-            <!--  Checked Pointerover State  -->
+                <Setter Property="BorderBrush" Value="{DynamicResource CheckBoxCheckedPressedBorderBrush}" />
-            <Style Selector="^:pointerover">
+                <Setter Property="Background" Value="{DynamicResource CheckBoxCheckedPressedBackground}" />
-                <Style Selector="^ /template/ Border#NormalRectangle">
-                    <Setter Property="BorderBrush" Value="{DynamicResource CheckBoxCheckedPointeroverBorderBrush}" />
-                    <Setter Property="Background" Value="{DynamicResource CheckBoxCheckedPointeroverBackground}" />
-                </Style>
             </Style>
-
-            <!--  Checked Pressed State  -->
-            <Style Selector="^:pressed">
-                <Style Selector="^ /template/ Border#NormalRectangle">
-                    <Setter Property="BorderBrush" Value="{DynamicResource CheckBoxCheckedPressedBorderBrush}" />
-                    <Setter Property="Background" Value="{DynamicResource CheckBoxCheckedPressedBackground}" />
-                </Style>
-            </Style>
-
-            <!--  Checked Disabled State  -->
             <Style Selector="^:disabled">
-                <Style Selector="^ /template/ ContentPresenter#PART_ContentPresenter">
-                    <Setter Property="Foreground" Value="{DynamicResource CheckBoxDisabledForeground}" />
-                </Style>
                 <Style Selector="^ /template/ Border#NormalRectangle">
                     <Setter Property="BorderBrush" Value="{DynamicResource CheckBoxCheckedDisabledBorderBrush}" />
                     <Setter Property="Background" Value="{DynamicResource CheckBoxCheckedDisabledBackground}" />
                 </Style>
-
+                <Style Selector="^ /template/ ContentPresenter#PART_ContentPresenter">
-                <Style Selector="^ /template/ Path#CheckGlyph">
+                    <Setter Property="Foreground" Value="{DynamicResource CheckBoxDisabledForeground}" />
-                    <Setter Property="Fill" Value="{DynamicResource CheckBoxGlyphDisabledFill}" />
                 </Style>
             </Style>
         </Style>
 
-        <Style Selector="^:indeterminate">
+        <Style Selector="^:selected /template/ PathIcon#CheckGlyph">
-            <Style Selector="^ /template/ Border#NormalRectangle">
+            <Setter Property="Data" Value="{DynamicResource CheckBoxCheckGlyph}" />
-                <Setter Property="BorderBrush" Value="{DynamicResource CheckBoxCheckedDefaultBorderBrush}" />
+        </Style>
-                <Setter Property="Background" Value="{DynamicResource CheckBoxCheckedDefaultBackground}" />
-            </Style>
 
-            <Style Selector="^ /template/ PathIcon#CheckGlyph">
+        <Style Selector="^:disabled">
-                <Setter Property="Data" Value="{DynamicResource CheckBoxIndeterminateGlyph}" />
+            <Style Selector="^ /template/ Panel#PART_GlyphPanel">
-                <Setter Property="Opacity" Value="1" />
+                <Setter Property="Opacity" Value="0.75" />
-            </Style>
-
-            <!--  Checked Pointerover State  -->
-            <Style Selector="^:pointerover">
-                <Style Selector="^ /template/ Border#NormalRectangle">
-                    <Setter Property="BorderBrush" Value="{DynamicResource CheckBoxCheckedPointeroverBorderBrush}" />
-                    <Setter Property="Background" Value="{DynamicResource CheckBoxCheckedPointeroverBackground}" />
-                </Style>
-            </Style>
-
-            <!--  Checked Pressed State  -->
-            <Style Selector="^:pressed">
-                <Style Selector="^ /template/ Border#NormalRectangle">
-                    <Setter Property="BorderBrush" Value="{DynamicResource CheckBoxCheckedPressedBorderBrush}" />
-                    <Setter Property="Background" Value="{DynamicResource CheckBoxCheckedPressedBackground}" />
-                </Style>
-            </Style>
-
-            <!--  Checked Disabled State  -->
-            <Style Selector="^:disabled">
-                <Style Selector="^ /template/ ContentPresenter#PART_ContentPresenter">
-                    <Setter Property="Foreground" Value="{DynamicResource CheckBoxDisabledForeground}" />
-                </Style>
-                <Style Selector="^ /template/ Border#NormalRectangle">
-                    <Setter Property="BorderBrush" Value="{DynamicResource CheckBoxCheckedDisabledBorderBrush}" />
-                    <Setter Property="Background" Value="{DynamicResource CheckBoxCheckedDisabledBackground}" />
-                </Style>
-
-                <Style Selector="^ /template/ Path#CheckGlyph">
-                    <Setter Property="Fill" Value="{DynamicResource CheckBoxGlyphDisabledFill}" />
-                </Style>
             </Style>
         </Style>
     </ControlTheme>
@@ -737,6 +672,7 @@
                         VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                         ColumnDefinitions="Auto,*">
                         <Panel
+                            Name="PART_GlyphPanel"
                             Grid.Column="0"
                             VerticalAlignment="Top"
                             Margin="{DynamicResource CheckBoxBoxMargin}">
@@ -775,53 +711,42 @@
             </ControlTemplate>
         </Setter>
 
-        <!--  Unchecked Pointerover State  -->
+        <Style Selector="^">
-        <Style Selector="^:pointerover">
+            <Style Selector="^:pointerover">
-            <Style Selector="^ /template/ Border#NormalRectangle">
+                <Style Selector="^ /template/ Border#NormalRectangle">
-                <Setter Property="BorderBrush" Value="{DynamicResource CheckBoxPointeroverBorderBrush}" />
+                    <Setter Property="BorderBrush" Value="{DynamicResource CheckBoxPointeroverBorderBrush}" />
+                </Style>
+                <Style Selector="^ /template/ Border#RootBorder">
+                    <Setter Property="Background" Value="{DynamicResource CheckBoxCardPointeroverBackground}" />
+                </Style>
             </Style>
-            <Style Selector="^ /template/ Border#RootBorder">
+            <Style Selector="^:pressed">
-                <Setter Property="Background" Value="{DynamicResource CheckBoxCardPointeroverBackground}" />
+                <Style Selector="^ /template/ Border#NormalRectangle">
+                    <Setter Property="BorderBrush" Value="{DynamicResource CheckBoxPressedBorderBrush}" />
+                </Style>
+                <Style Selector="^ /template/ Border#RootBorder">
+                    <Setter Property="Background" Value="{DynamicResource CheckBoxCardPressedBackground}" />
+                </Style>
             </Style>
-        </Style>
+            <Style Selector="^:disabled">
-
+                <Style Selector="^ /template/ Border#NormalRectangle">
-        <!--  Unchecked Pressed State  -->
+                    <Setter Property="BorderBrush" Value="{DynamicResource CheckBoxDefaultDisabledBorderBrush}" />
-        <Style Selector="^:pressed">
+                    <Setter Property="Background" Value="{DynamicResource CheckBoxDefaultDisabledBackground}" />
-            <Style Selector="^ /template/ Border#NormalRectangle">
+                </Style>
-                <Setter Property="BorderBrush" Value="{DynamicResource CheckBoxPressedBorderBrush}" />
+                <Style Selector="^ /template/ ContentPresenter#PART_ContentPresenter">
-            </Style>
+                    <Setter Property="Foreground" Value="{DynamicResource CheckBoxDisabledForeground}" />
-            <Style Selector="^ /template/ Border#RootBorder">
+                </Style>
-                <Setter Property="Background" Value="{DynamicResource CheckBoxCardPressedBackground}" />
-            </Style>
-        </Style>
-
-        <!--  Unchecked Disabled state  -->
-        <Style Selector="^:disabled">
-            <Style Selector="^ /template/ ContentPresenter#PART_ContentPresenter">
-                <Setter Property="Foreground" Value="{DynamicResource CheckBoxDisabledForeground}" />
-            </Style>
-            <Style Selector="^ /template/ Border#NormalRectangle">
-                <Setter Property="BorderBrush" Value="{DynamicResource CheckBoxDefaultDisabledBorderBrush}" />
-                <Setter Property="Background" Value="{DynamicResource CheckBoxDefaultDisabledBackground}" />
             </Style>
         </Style>
 
         <Style Selector="^:selected">
-            <Style Selector="^ /template/ Border#RootBorder">
-                <Setter Property="BorderBrush" Value="{DynamicResource CheckBoxCardCheckedBorderBrush}" />
-                <Setter Property="Background" Value="{DynamicResource CheckBoxCardCheckedBackground}" />
-            </Style>
             <Style Selector="^ /template/ Border#NormalRectangle">
                 <Setter Property="BorderBrush" Value="{DynamicResource CheckBoxCheckedDefaultBorderBrush}" />
                 <Setter Property="Background" Value="{DynamicResource CheckBoxCheckedDefaultBackground}" />
             </Style>
-
+            <Style Selector="^ /template/ Border#RootBorder">
-            <Style Selector="^ /template/ PathIcon#CheckGlyph">
+                <Setter Property="BorderBrush" Value="{DynamicResource CheckBoxCardCheckedBorderBrush}" />
-                <Setter Property="Data" Value="{DynamicResource CheckBoxCheckGlyph}" />
-                <Setter Property="Opacity" Value="1" />
             </Style>
-
-            <!--  Checked Pointerover State  -->
             <Style Selector="^:pointerover">
                 <Style Selector="^ /template/ Border#NormalRectangle">
                     <Setter Property="BorderBrush" Value="{DynamicResource CheckBoxCheckedPointeroverBorderBrush}" />
@@ -831,8 +756,6 @@
                     <Setter Property="BorderBrush" Value="{DynamicResource CheckBoxCardCheckedPointeroverBorderBrush}" />
                 </Style>
             </Style>
-
-            <!--  Checked Pressed State  -->
             <Style Selector="^:pressed">
                 <Style Selector="^ /template/ Border#NormalRectangle">
                     <Setter Property="BorderBrush" Value="{DynamicResource CheckBoxCheckedPressedBorderBrush}" />
@@ -842,24 +765,33 @@
                     <Setter Property="BorderBrush" Value="{DynamicResource CheckBoxCardCheckedPressedBorderBrush}" />
                 </Style>
             </Style>
-
-            <!--  Checked Disabled State  -->
             <Style Selector="^:disabled">
+                <Style Selector="^ /template/ Border#NormalRectangle">
+                    <Setter Property="BorderBrush" Value="{DynamicResource CheckBoxCheckedDisabledBorderBrush}" />
+                    <Setter Property="Background" Value="{DynamicResource CheckBoxCheckedDisabledBackground}" />
+                </Style>
                 <Style Selector="^ /template/ Border#RootBorder">
                     <Setter Property="BorderBrush" Value="{DynamicResource CheckBoxCardCheckedDisabledBorderBrush}" />
                 </Style>
                 <Style Selector="^ /template/ ContentPresenter#PART_ContentPresenter">
                     <Setter Property="Foreground" Value="{DynamicResource CheckBoxDisabledForeground}" />
                 </Style>
-                <Style Selector="^ /template/ Border#NormalRectangle">
+            </Style>
-                    <Setter Property="BorderBrush" Value="{DynamicResource CheckBoxCheckedDisabledBorderBrush}" />
-                    <Setter Property="Background" Value="{DynamicResource CheckBoxCheckedDisabledBackground}" />
-                </Style>
 
-                <Style Selector="^ /template/ Path#CheckGlyph">
+            <Style Selector="^:disabled">
-                    <Setter Property="Fill" Value="{DynamicResource CheckBoxGlyphDisabledFill}" />
+                <Style Selector="^ /template/ Panel#PART_GlyphPanel">
+                    <Setter Property="Opacity" Value="0.75" />
                 </Style>
             </Style>
         </Style>
+
+        <Style Selector="^:selected">
+            <Style Selector="^ /template/ PathIcon#CheckGlyph">
+                <Setter Property="Data" Value="{DynamicResource CheckBoxCheckGlyph}" />
+            </Style>
+            <Style Selector="^ /template/ Border#RootBorder">
+                <Setter Property="Background" Value="{DynamicResource CheckBoxCardCheckedBackground}" />
+            </Style>
+        </Style>
     </ControlTheme>
 </ResourceDictionary>

src/Semi.Avalonia/Controls/ManagedFileChooser.axaml

@@ -195,7 +195,7 @@
     <ControlTheme x:Key="{x:Type dialogs:ManagedFileChooserOverwritePrompt}"
                   TargetType="dialogs:ManagedFileChooserOverwritePrompt">
         <Setter Property="MaxWidth" Value="400" />
-        <Setter Property="Padding" Value="10"/>
+        <Setter Property="Padding" Value="10" />
         <Setter Property="Template">
             <ControlTemplate>
                 <Border Background="{TemplateBinding Background}"
@@ -233,4 +233,4 @@
             </ControlTemplate>
         </Setter>
     </ControlTheme>
-</ResourceDictionary>
+</ResourceDictionary>

src/Semi.Avalonia/Controls/Menu.axaml

@@ -24,6 +24,7 @@
                         Command="{Binding LineUp, RelativeSource={RelativeSource TemplatedParent}}"
                         CornerRadius="0"
                         MinHeight="0"
+                        Padding="0 4"
                         DockPanel.Dock="Top"
                         RenderTransform="{x:Null}">
                         <RepeatButton.IsVisible>
@@ -37,8 +38,8 @@
                             </MultiBinding>
                         </RepeatButton.IsVisible>
                         <PathIcon
-                            Width="8"
+                            Theme="{StaticResource InnerPathIcon}"
-                            Height="8"
+                            Classes="ExtraSmall"
                             Data="{DynamicResource MenuScrollViewerUpButtonGlyph}"
                             Foreground="{DynamicResource MenuFlyoutScrollViewerIconForeground}" />
                     </RepeatButton>
@@ -49,8 +50,9 @@
                         BorderThickness="0"
                         Command="{Binding LineDown, RelativeSource={RelativeSource TemplatedParent}}"
                         CornerRadius="0"
-                        DockPanel.Dock="Bottom"
                         MinHeight="0"
+                        Padding="0 4"
+                        DockPanel.Dock="Bottom"
                         RenderTransform="{x:Null}">
                         <RepeatButton.IsVisible>
                             <MultiBinding
@@ -63,8 +65,8 @@
                             </MultiBinding>
                         </RepeatButton.IsVisible>
                         <PathIcon
-                            Width="8"
+                            Theme="{StaticResource InnerPathIcon}"
-                            Height="8"
+                            Classes="ExtraSmall"
                             Data="{DynamicResource MenuScrollViewerDownButtonGlyph}"
                             Foreground="{DynamicResource MenuFlyoutScrollViewerIconForeground}" />
                     </RepeatButton>
@@ -301,7 +303,8 @@
         <Setter Property="Cursor" Value="Hand" />
         <Setter Property="CornerRadius" Value="{DynamicResource MenuItemCornerRadius}" />
         <!--  Narrow padding should be used for mouse input, when non-narrow one should be used for touch input in future.  -->
-        <Setter Property="Padding" Value="{DynamicResource MenuItemPadding}" />
+        <Setter Property="Padding" Value="{DynamicResource TopLevelMenuItemPadding}" />
+        <Setter Property="MinHeight" Value="{DynamicResource TopLevelMenuItemMinHeight}" />
         <Setter Property="Template">
             <ControlTemplate>
                 <Border
@@ -324,8 +327,7 @@
                             MinWidth="{Binding $parent[MenuItem].Bounds.Width}"
                             HorizontalOffset="-8"
                             IsLightDismissEnabled="True"
-                            IsOpen="{TemplateBinding IsSubMenuOpen,
+                            IsOpen="{TemplateBinding IsSubMenuOpen,Mode=TwoWay}"
-                                                     Mode=TwoWay}"
                             OverlayInputPassThroughElement="{Binding $parent[Menu]}"
                             Placement="BottomEdgeAlignedLeft"
                             VerticalOffset="-4"