feat: update to 11.3.0

feat: add VerticalSplitView control theme with responsive styles

README.md

@@ -48,9 +48,9 @@ dotnet add package Semi.Avalonia.TreeDataGrid
 
 ```xaml
 <Application.Styles>
-    <StyleInclude Source="avares://Semi.Avalonia.ColorPicker/Index.axaml" />
-    <StyleInclude Source="avares://Semi.Avalonia.DataGrid/Index.axaml" />
-    <StyleInclude Source="avares://Semi.Avalonia.TreeDataGrid/Index.axaml" />
+    <semi:ColorPickerSemiTheme />
+    <semi:DataGridSemiTheme />
+    <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" />
-    <StyleInclude Source="avares://Semi.Avalonia.DataGrid/Index.axaml" />
-    <StyleInclude Source="avares://Semi.Avalonia.TreeDataGrid/Index.axaml" />
+    <semi:ColorPickerSemiTheme />
+    <semi:DataGridSemiTheme />
+    <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,6 @@
 <Project>
     <PropertyGroup>
-        <AvaloniaVersion>11.2.5</AvaloniaVersion>
+        <AvaloniaVersion>11.3.0</AvaloniaVersion>
         <DataGridVersion>11.2.5</DataGridVersion>
         <CommunityToolkitVersion>8.4.0</CommunityToolkitVersion>
     </PropertyGroup>

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" />
-        <StyleInclude Source="avares://Semi.Avalonia.ColorPicker/Index.axaml" />
+        <semi:ColorPickerSemiTheme />
+        <semi:DataGridSemiTheme />
+        <semi:TreeDataGridSemiTheme />
     </Application.Styles>
     <Application.Resources>
         <ResourceDictionary>
             <ResourceDictionary.MergedDictionaries>
-                <ResourceInclude
-                    Source="Themes/_index.axaml" />
+                <ResourceInclude Source="Themes/_index.axaml" />
             </ResourceDictionary.MergedDictionaries>
         </ResourceDictionary>
     </Application.Resources>

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

@@ -5,7 +5,7 @@ using Avalonia;
 using Avalonia.Data.Converters;
 using Avalonia.Metadata;
 
-namespace Semi.Avalonia.TreeDataGrid.Demo.Converters;
+namespace Semi.Avalonia.Demo.Converters;
 
 public class FileIconConverter : IMultiValueConverter
 {

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.6";
+    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.6";
+    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.6";
+    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.2";
+    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/SplitViewDemo.axaml

@@ -21,8 +21,7 @@
                         Content="IsPaneOpen" />
                     <ToggleSwitch
                         Grid.Row="0" Grid.Column="1"
-                        Name="PaneOpenButton"
-                        IsChecked="{Binding #SplitView.IsPaneOpen}" />
+                        Name="PaneOpenButton" />
 
                     <Label
                         Grid.Row="1" Grid.Column="0"
@@ -30,8 +29,7 @@
                         Content="UseLightDismissOverlayMode" />
                     <ToggleSwitch
                         Grid.Row="1" Grid.Column="1"
-                        Name="UseLightDismissOverlayModeButton"
-                        IsChecked="{Binding #SplitView.UseLightDismissOverlayMode}" />
+                        Name="UseLightDismissOverlayModeButton" />
 
                     <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"
-                        IsChecked="{Binding #SplitView.PanePlacement}" />
+                        OnContent="Right" />
 
                     <Label
                         Grid.Row="3" Grid.Column="0"
@@ -51,8 +49,8 @@
                         Grid.Row="3" Grid.Column="1"
                         Name="DisplayModeSelector"
                         HorizontalAlignment="Stretch"
-                        ItemsSource="{Binding DisplayModes}"
-                        SelectedIndex="{Binding #SplitView.DisplayMode}" />
+                        ItemsSource="{x:Static pages:SplitViewDemoViewModel.DisplayModes}"
+                        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
-                Grid.Column="0"
-                BorderBrush="{DynamicResource SemiGrey1}"
-                BorderThickness="1">
-                <SplitView
-                    Name="SplitView"
-                    DisplayMode="CompactOverlay"
-                    CompactPaneLength="48"
-                    OpenPaneLength="256">
-                    <SplitView.Background>
-                        <LinearGradientBrush StartPoint="0%,0%" EndPoint="0%,100%">
-                            <GradientStop Color="#6b4c1b" Offset="0" />
-                            <GradientStop Color="#291e10" Offset="1" />
-                        </LinearGradientBrush>
-                    </SplitView.Background>
-                    <SplitView.Pane>
-                        <Grid RowDefinitions="Auto,*,Auto">
-                            <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" />
+            <TabControl Grid.Column="0">
+                <TabItem Header="Default">
+                    <Border
+                        BorderBrush="{DynamicResource SemiGrey1}"
+                        BorderThickness="1">
+                        <SplitView
+                            Name="SplitView"
+                            IsPaneOpen="{Binding #PaneOpenButton.IsChecked,Mode=TwoWay}"
+                            UseLightDismissOverlayMode="{Binding #UseLightDismissOverlayModeButton.IsChecked}"
+                            PanePlacement="{Binding #PanePlacementButton.IsChecked}"
+                            DisplayMode="{Binding #DisplayModeSelector.SelectedItem}"
+                            CompactPaneLength="{Binding #CompactPaneLengthSlider.Value}"
+                            OpenPaneLength="{Binding #OpenPaneLengthSlider.Value}">
+                            <SplitView.Background>
+                                <LinearGradientBrush StartPoint="0%,0%" EndPoint="0%,100%">
+                                    <GradientStop Color="#6b4c1b" Offset="0" />
+                                    <GradientStop Color="#291e10" Offset="1" />
                                 </LinearGradientBrush>
-                            </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.Background>
+                            <SplitView.Pane>
+                                <Grid RowDefinitions="Auto,*,Auto">
+                                    <TextBlock
+                                        Grid.Row="0"
+                                        Name="PaneHeader"
+                                        Margin="8,12"
+                                        FontWeight="Bold"
+                                        Text="Playlist" />
+                                    <ListBox
+                                        Grid.Row="1"
+                                        ItemsSource="{Binding Songs}" />
+                                    <ToggleSwitch
+                                        Grid.Row="2"
+                                        Theme="{DynamicResource IconBorderlessToggleSwitch}"
+                                        Content="{StaticResource SemiIconSidebar}"
+                                        HorizontalAlignment="Left"
+                                        IsChecked="{Binding #SplitView.IsPaneOpen}">
+                                    </ToggleSwitch>
+                                </Grid>
+                            </SplitView.Pane>
 
-                </SplitView>
-            </Border>
+                            <Panel>
+                                <Panel.Styles>
+                                    <Style Selector="Image#AlbumCover">
+                                        <Style.Animations>
+                                            <Animation IterationCount="Infinite" Duration="0:0:40">
+                                                <KeyFrame Cue="0%">
+                                                    <Setter Property="RotateTransform.Angle" Value="0" />
+                                                </KeyFrame>
+                                                <KeyFrame Cue="100%">
+                                                    <Setter Property="RotateTransform.Angle" Value="360" />
+                                                </KeyFrame>
+                                            </Animation>
+                                        </Style.Animations>
+                                    </Style>
+                                </Panel.Styles>
+                                <Image
+                                    Source="/Assets/WORLD.png"
+                                    Name="AlbumCover"
+                                    Width="200"
+                                    Height="200" />
+                                <Arc
+                                    Width="290"
+                                    Height="290"
+                                    StartAngle="0"
+                                    SweepAngle="360"
+                                    StrokeJoin="Round"
+                                    StrokeLineCap="Round"
+                                    StrokeThickness="45">
+                                    <Arc.Stroke>
+                                        <LinearGradientBrush StartPoint="0%,0%" EndPoint="100%,0%">
+                                            <GradientStop Color="#010101" Offset="0" />
+                                            <GradientStop Color="#363636" Offset="0.5" />
+                                            <GradientStop Color="#010101" Offset="1" />
+                                        </LinearGradientBrush>
+                                    </Arc.Stroke>
+                                </Arc>
+                                <Arc
+                                    Width="294"
+                                    Height="294"
+                                    StartAngle="0"
+                                    SweepAngle="360"
+                                    StrokeJoin="Round"
+                                    StrokeLineCap="Round"
+                                    StrokeThickness="4"
+                                    Stroke="Black" />
+                                <Arc
+                                    Width="310"
+                                    Height="310"
+                                    StartAngle="0"
+                                    SweepAngle="360"
+                                    StrokeJoin="Round"
+                                    StrokeLineCap="Round"
+                                    StrokeThickness="10"
+                                    Stroke="#C6CACD"
+                                    Opacity="0.1" />
+                            </Panel>
 
+                        </SplitView>
+                    </Border>
+                </TabItem>
+                <TabItem Header="VerticalSplitView">
+                    <Border
+                        BorderBrush="{DynamicResource SemiGrey1}"
+                        BorderThickness="1">
+                        <SplitView
+                            Name="SplitView2"
+                            Theme="{DynamicResource VerticalSplitView}"
+                            IsPaneOpen="{Binding #PaneOpenButton.IsChecked,Mode=TwoWay}"
+                            UseLightDismissOverlayMode="{Binding #UseLightDismissOverlayModeButton.IsChecked}"
+                            PanePlacement="{Binding #PanePlacementButton.IsChecked}"
+                            DisplayMode="{Binding #DisplayModeSelector.SelectedItem}"
+                            CompactPaneLength="{Binding #CompactPaneLengthSlider.Value}"
+                            OpenPaneLength="{Binding #OpenPaneLengthSlider.Value}">
+                            <SplitView.Background>
+                                <LinearGradientBrush StartPoint="0%,0%" EndPoint="0%,100%">
+                                    <GradientStop Color="#6b4c1b" Offset="0" />
+                                    <GradientStop Color="#291e10" Offset="1" />
+                                </LinearGradientBrush>
+                            </SplitView.Background>
+                            <SplitView.Pane>
+                                <Grid RowDefinitions="Auto,Auto,*">
+                                    <ToggleSwitch
+                                        Grid.Row="0"
+                                        Theme="{DynamicResource IconBorderlessToggleSwitch}"
+                                        Content="{StaticResource SemiIconSidebar}"
+                                        HorizontalAlignment="Left"
+                                        IsChecked="{Binding #SplitView2.IsPaneOpen}">
+                                    </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">
-            <Border Theme="{StaticResource CardBorder}">
-                <TabControl TabStripPlacement="Top">
-                    <TabItem Content="Hello 1" Header="Tab 1" />
-                    <TabItem Content="Hello 2" Header="Tab 2" />
-                    <TabItem Content="Hello 3" Header="Tab 3" />
-                    <TabItem Content="中文内容" Header="中文中文" />
-                    <TabItem
-                        Content="Hello 4"
-                        Header="Tab 4"
-                        IsEnabled="False" />
-                </TabControl>
-            </Border>
-            <Border Theme="{StaticResource CardBorder}">
-                <TabControl TabStripPlacement="Left">
-                    <TabItem Content="Hello 1" Header="Tab 1" />
-                    <TabItem Content="Hello 2" Header="Tab 2" />
-                    <TabItem Content="Hello 3" Header="Tab 3" />
-                    <TabItem Content="中文内容" Header="中文中文" />
-                    <TabItem
-                        Content="Hello 4"
-                        Header="Tab 4"
-                        IsEnabled="False" />
-                </TabControl>
-            </Border>
-            <Border Theme="{StaticResource CardBorder}">
-                <TabControl TabStripPlacement="Right">
-                    <TabItem Content="Hello 1" Header="Tab 1" />
-                    <TabItem Content="Hello 2" Header="Tab 2" />
-                    <TabItem Content="Hello 3" Header="Tab 3" />
-                    <TabItem Content="中文内容" Header="中文中文" />
-                    <TabItem
-                        Content="Hello 4"
-                        Header="Tab 4"
-                        IsEnabled="False" />
-                </TabControl>
-            </Border>
-            <Border Theme="{StaticResource CardBorder}">
-                <TabControl TabStripPlacement="Bottom">
-                    <TabItem Content="Hello 1" Header="Tab 1" />
-                    <TabItem Content="Hello 2" Header="Tab 2" />
-                    <TabItem Content="Hello 3" Header="Tab 3" />
-                    <TabItem Content="中文内容" Header="中文中文" />
-                    <TabItem
-                        Content="Hello 4"
-                        Header="Tab 4"
-                        IsEnabled="False" />
-                </TabControl>
-            </Border>
-            <Border Theme="{StaticResource CardBorder}">
-                <TabStrip>
-                    <TabStripItem>Tab 1</TabStripItem>
-                    <TabStripItem>Tab 2</TabStripItem>
-                </TabStrip>
-            </Border>
-            <Border Height="300" Theme="{DynamicResource CardBorder}">
-                <TabControl
-                    ItemsSource="{Binding Items}"
-                    TabStripPlacement="Top"
-                    Theme="{DynamicResource ScrollTabControl}" />
-            </Border>
-            <Border Height="300" Theme="{DynamicResource CardBorder}">
-                <TabControl
-                    ItemsSource="{Binding Items}"
-                    TabStripPlacement="Left"
-                    Theme="{DynamicResource ScrollTabControl}" />
-            </Border>
-            <Border Height="300" Theme="{DynamicResource CardBorder}">
-                <TabControl
-                    ItemsSource="{Binding Items}"
-                    TabStripPlacement="Bottom"
-                    Theme="{DynamicResource ScrollTabControl}" />
-            </Border>
-            <Border Height="300" Theme="{DynamicResource CardBorder}">
-                <TabControl
-                    ItemsSource="{Binding Items}"
-                    TabStripPlacement="Right"
-                    Theme="{DynamicResource ScrollTabControl}" />
+        <StackPanel>
+            <Border
+                Margin="8"
+                HorizontalAlignment="Left"
+                Theme="{StaticResource RadioButtonGroupBorder}">
+                <ListBox Name="place" Theme="{StaticResource ButtonRadioGroupListBox}">
+                    <Dock>Left</Dock>
+                    <Dock>Bottom</Dock>
+                    <Dock>Right</Dock>
+                    <Dock>Top</Dock>
+                </ListBox>
             </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/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>
@@ -25,5 +25,6 @@
         <ProjectReference Include="..\..\src\Semi.Avalonia\Semi.Avalonia.csproj"/>
         <ProjectReference Include="..\..\src\Semi.Avalonia.ColorPicker\Semi.Avalonia.ColorPicker.csproj"/>
         <ProjectReference Include="..\..\src\Semi.Avalonia.DataGrid\Semi.Avalonia.DataGrid.csproj"/>
+        <ProjectReference Include="..\..\src\Semi.Avalonia.TreeDataGrid\Semi.Avalonia.TreeDataGrid.csproj"/>
     </ItemGroup>
 </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 TabControlDemoViewModel()
-    {
-        Items = new ObservableCollection<string>(Enumerable.Range(1, 200).Select(a => "Tab " + a));
-    }
+    public ObservableCollection<string> Items => new(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;
-    private string? _selectedPath;
-    private FileNodeViewModel? _root;
-    public string SelectedDrive
+    public HierarchicalTreeDataGridSource<FileNodeViewModel> Source { get; }
+    [ObservableProperty] private string _selectedDrive;
+    [ObservableProperty] private string? _selectedPath;
+    [ObservableProperty] private FileNodeViewModel? _root;
+
+    partial void OnSelectedDriveChanged(string value)
     {
-        get => _selectedDrive;
-        set
+        Root = new FileNodeViewModel(value, true, true);
+        if (Source is not null)
         {
-            SetProperty(ref _selectedDrive, value);
-            _root = new FileNodeViewModel(_selectedDrive, isDirectory: true, isRoot: true);
-            Source.Items = new[] { _root };
+            Source.Items = [Root];
         }
     }
     
-    public string? SelectedPath
+    partial void OnSelectedPathChanged(string? value)
     {
-        get => _selectedPath;
-        set => SetSelectedPath(value);
+        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),
-                            CompareDescending = FileNodeViewModel.SortDescending(x => x.Name),
+                            CompareAscending = FileNodeViewModel.SortAscending(vm => vm.Name),
+                            CompareDescending = FileNodeViewModel.SortDescending(vm => vm.Name),
                             IsTextSearchEnabled = true,
-                            TextSearchValueSelector = x => x.Name
+                            TextSearchValueSelector = vm => vm.Name
                         }),
-                    x => x.Children,
-                    x => x.HasChildren,
-                    x => x.IsExpanded),
+                    vm => vm.Children,
+                    vm => vm.HasChildren,
+                    vm => vm.IsExpanded),
                 new TextColumn<FileNodeViewModel, long?>(
                     "Size",
-                    x => x.Size,
-                    options: new()
+                    vm => vm.Size,
+                    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;
-    private string _name;
+    [ObservableProperty] private string _path;
+    [ObservableProperty] private string _name;
     private string? _undoName;
-    private long? _size;
-    private DateTimeOffset? _modified;
+    [ObservableProperty] private long? _size;
+    [ObservableProperty] private DateTimeOffset? _modified;
     private FileSystemWatcher? _watcher;
     private ObservableCollection<FileNodeViewModel>? _children;
-    private bool _hasChildren = true;
-    private bool _isExpanded;
+    [ObservableProperty] private bool _hasChildren = true;
+    [ObservableProperty] private bool _isExpanded;
 
-    public FileNodeViewModel( string path, bool isDirectory, bool isRoot = false)
+    public FileNodeViewModel(string path, bool isDirectory, bool isRoot = false)
     {
-        _path = path;
-        _name = isRoot ? path : System.IO.Path.GetFileName(Path);
-        _isExpanded = isRoot;
+        Path = path;
+        Name = isRoot ? path : System.IO.Path.GetFileName(Path);
+        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">
-                <pages:AutoCompleteBoxDemo />
+            <TabItem
+                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">
-                <pages:TreeViewDemo />
+            <TabItem
+                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.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,136 +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">
-            <StaticResource x:Key="file" ResourceKey="SemiIconFile" />
-            <StaticResource x:Key="folderOpen" ResourceKey="SemiIconFolderOpen" />
-            <StaticResource x:Key="folderClosed" ResourceKey="SemiIconFolder" />
-        </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="{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>
-    </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

@@ -3,7 +3,7 @@
         <TargetFrameworks>netstandard2.0;net6.0;net8.0</TargetFrameworks>
         <Nullable>enable</Nullable>
         <LangVersion>latest</LangVersion>
-        <Version>11.2.1.6</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/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/Dark.axaml

@@ -1,4 +1,7 @@
-<ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+<ResourceDictionary
+    xmlns="https://github.com/avaloniaui"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:semi="https://irihi.tech/semi">
     <StaticResource x:Key="ColorViewRadioButtonForeground" ResourceKey="SemiColorPrimary" />
     <StaticResource x:Key="ColorViewRadioButtonBackground" ResourceKey="SemiColorBackground0" />
     <StaticResource x:Key="ColorViewRadioButtonPointeroverBackground" ResourceKey="SemiColorFill1" />
@@ -14,4 +17,5 @@
     <StaticResource x:Key="ColorSpectrumBorderBrush" ResourceKey="SemiColorBorder" />
     <StaticResource x:Key="ColorPreviewerMainBoxShadow" ResourceKey="SemiShadowElevated" />
     <BoxShadows x:Key="ColorSliderBoxShadow">0 0 2 1 #FFFFFF</BoxShadows>
+    <semi:SemiColorDarkPalette x:Key="SemiColorPalette" />
 </ResourceDictionary>

src/Semi.Avalonia.ColorPicker/Light.axaml

@@ -1,4 +1,7 @@
-<ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+<ResourceDictionary
+    xmlns="https://github.com/avaloniaui"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:semi="https://irihi.tech/semi">
     <StaticResource x:Key="ColorViewRadioButtonForeground" ResourceKey="SemiColorPrimary" />
     <StaticResource x:Key="ColorViewRadioButtonBackground" ResourceKey="SemiColorBackground0" />
     <StaticResource x:Key="ColorViewRadioButtonPointeroverBackground" ResourceKey="SemiColorFill1" />
@@ -14,4 +17,5 @@
     <StaticResource x:Key="ColorSpectrumBorderBrush" ResourceKey="SemiColorBorder" />
     <StaticResource x:Key="ColorPreviewerMainBoxShadow" ResourceKey="SemiShadowElevated" />
     <BoxShadows x:Key="ColorSliderBoxShadow">0 0 2 1 #FFFFFF</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.6</PackageReleaseNotes>
+        <PackageReleaseNotes>Update to Semi.Avalonia.ColorPicker 11.2.1.7</PackageReleaseNotes>
     </PropertyGroup>
 
     <PropertyGroup Condition="$([MSBuild]::IsTargetFrameworkCompatible('$(TargetFramework)', 'net8.0'))">

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,7 +1,6 @@
 <ResourceDictionary
     xmlns="https://github.com/avaloniaui"
-    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-    xmlns:semi="https://irihi.tech/semi">
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
     <StaticResource x:Key="ColorViewRadioButtonFontWeight" ResourceKey="SemiFontWeightBold" />
     <Thickness x:Key="ColorViewRadioButtonPadding">16 4</Thickness>
     <x:Double x:Key="ColorViewNumericUpDownWidth">70</x:Double>
@@ -20,8 +19,6 @@
     <x:Double x:Key="ColorPreviewerHeight">48</x:Double>
     <StaticResource x:Key="ColorPreviewerCornerRadius" ResourceKey="SemiBorderRadiusSmall" />
 
-    <semi:SemiColorDarkPalette x:Key="SemiColorPalette" />
-
     <StaticResource x:Key="ColorSpectrumCornerRadius" ResourceKey="SemiBorderRadiusMedium" />
 
     <StaticResource x:Key="ColorPickerMinHeight" ResourceKey="SemiHeightControlDefault" />

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/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/Semi.Avalonia.DataGrid.csproj

@@ -4,8 +4,8 @@
         <TargetFrameworks>netstandard2.0;net6.0;net8.0</TargetFrameworks>
         <Nullable>enable</Nullable>
         <LangVersion>latest</LangVersion>
-        <Version>11.2.1.6</Version>
-        <PackageReleaseNotes>Update to Semi.Avalonia.DataGrid 11.2.1.6</PackageReleaseNotes>
+        <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>

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/Semi.Avalonia.TreeDataGrid.csproj

@@ -4,8 +4,8 @@
         <TargetFramework>net6.0</TargetFramework>
         <Nullable>enable</Nullable>
         <LangVersion>latest</LangVersion>
-        <Version>11.0.10.2</Version>
-        <PackageReleaseNotes>Update to 11.0.10.2</PackageReleaseNotes>
+        <Version>11.0.10.3</Version>
+        <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/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/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}" />

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="^:pointerover">
-            <Style Selector="^ /template/ Border#NormalRectangle">
+        <Style Selector="^:unchecked">
+            <Style Selector="^:pointerover /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">
+            <Style Selector="^:pressed /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">
-                <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#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 Selector="^ /template/ Panel#PART_GlyphPanel">
+                <Setter Property="Opacity" Value="0.75" />
             </Style>
         </Style>
     </ControlTheme>
 
-    <ControlTheme x:Key="SimpleCheckBox" TargetType="CheckBox">
-        <Setter Property="HorizontalAlignment" Value="Left" />
-        <Setter Property="VerticalAlignment" Value="Top" />
-        <Setter Property="HorizontalContentAlignment" Value="Left" />
-        <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" />
+    <ControlTheme
+        x:Key="SimpleCheckBox"
+        BasedOn="{StaticResource {x:Type CheckBox}}"
+        TargetType="CheckBox">
         <Setter Property="Template">
             <ControlTemplate TargetType="CheckBox">
                 <Border
@@ -202,135 +141,28 @@
                     BorderBrush="{TemplateBinding BorderBrush}"
                     BorderThickness="{TemplateBinding BorderThickness}"
                     CornerRadius="{TemplateBinding CornerRadius}">
-                    <Grid ColumnDefinitions="Auto,*">
-                        <Panel
-                            Grid.Column="0"
-                            TemplatedControl.IsTemplateFocusTarget="True"
-                            VerticalAlignment="{TemplateBinding VerticalContentAlignment}">
-                            <Border
-                                Name="NormalRectangle"
-                                Width="{DynamicResource CheckBoxBoxWidth}"
-                                Height="{DynamicResource CheckBoxBoxHeight}"
-                                Background="{DynamicResource CheckBoxDefaultBackground}"
-                                BorderBrush="{DynamicResource CheckBoxDefaultBorderBrush}"
-                                BorderThickness="{DynamicResource CheckBoxBoxBorderThickness}"
-                                CornerRadius="{TemplateBinding CornerRadius}"
-                                UseLayoutRounding="False" />
-                            <PathIcon
-                                Name="CheckGlyph"
-                                Theme="{DynamicResource InnerPathIcon}"
-                                Width="{DynamicResource CheckBoxBoxGlyphWidth}"
-                                Height="{DynamicResource CheckBoxBoxGlyphHeight}"
-                                Foreground="{DynamicResource CheckBoxGlyphFill}" />
-                        </Panel>
-                    </Grid>
+                    <Panel
+                        Name="PART_GlyphPanel"
+                        VerticalAlignment="{TemplateBinding VerticalContentAlignment}">
+                        <Border
+                            Name="NormalRectangle"
+                            Width="{DynamicResource CheckBoxBoxWidth}"
+                            Height="{DynamicResource CheckBoxBoxHeight}"
+                            Background="{DynamicResource CheckBoxDefaultBackground}"
+                            BorderBrush="{DynamicResource CheckBoxDefaultBorderBrush}"
+                            BorderThickness="{DynamicResource CheckBoxBoxBorderThickness}"
+                            CornerRadius="{TemplateBinding CornerRadius}"
+                            UseLayoutRounding="False" />
+                        <PathIcon
+                            Name="CheckGlyph"
+                            Theme="{DynamicResource InnerPathIcon}"
+                            Width="{DynamicResource CheckBoxBoxGlyphWidth}"
+                            Height="{DynamicResource CheckBoxBoxGlyphHeight}"
+                            Foreground="{DynamicResource CheckBoxGlyphFill}" />
+                    </Panel>
                 </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="^:pointerover">
-            <Style Selector="^ /template/ Border#NormalRectangle">
-                <Setter Property="BorderBrush" Value="{DynamicResource CheckBoxPointeroverBorderBrush}" />
+        <Style Selector="^:unchecked">
+            <Style Selector="^:pointerover">
+                <Style Selector="^ /template/ Border#NormalRectangle">
+                    <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">
-                <Setter Property="Background" Value="{DynamicResource CheckBoxCardPointeroverBackground}" />
+            <Style Selector="^:pressed">
+                <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="^:pressed">
+        <Style Selector="^:indeterminate,^:checked">
             <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="^: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 Selector="^:indeterminate /template/ PathIcon#CheckGlyph">
+            <Setter Property="Data" Value="{DynamicResource CheckBoxIndeterminateGlyph}" />
         </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>
-
-            <!--  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 Selector="^ /template/ Border#RootBorder">
+                <Setter Property="Background" Value="{DynamicResource CheckBoxCardCheckedBackground}" />
             </Style>
         </Style>
 
-        <Style Selector="^:indeterminate">
-            <Style Selector="^ /template/ Border#RootBorder">
-                <Setter Property="BorderBrush" Value="{DynamicResource CheckBoxCardCheckedBorderBrush}" />
-            </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 Selector="^:disabled">
+            <Style Selector="^ /template/ Panel#PART_GlyphPanel">
+                <Setter Property="Opacity" Value="0.75" />
             </Style>
         </Style>
     </ControlTheme>
@@ -566,31 +344,21 @@
             </ControlTemplate>
         </Setter>
 
-        <!--  Unchecked Pointerover State  -->
-        <Style Selector="^:pointerover">
-            <Style Selector="^ /template/ ContentPresenter#PART_ContentPresenter">
+        <Style Selector="^:unchecked">
+            <Style Selector="^:pointerover /template/ ContentPresenter#PART_ContentPresenter">
                 <Setter Property="Background" Value="{DynamicResource CheckBoxCardPointeroverBackground}" />
             </Style>
-        </Style>
-
-        <!--  Unchecked Pressed State  -->
-        <Style Selector="^:pressed">
-            <Style Selector="^ /template/ ContentPresenter#PART_ContentPresenter">
+            <Style Selector="^:pressed /template/ ContentPresenter#PART_ContentPresenter">
                 <Setter Property="Background" Value="{DynamicResource CheckBoxCardPressedBackground}" />
             </Style>
-        </Style>
-
-        <!--  Unchecked Disabled state  -->
-        <Style Selector="^:disabled">
-            <Style Selector="^ /template/ ContentPresenter#PART_ContentPresenter">
+            <Style Selector="^:disabled /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="^ /template/ ContentPresenter#PART_ContentPresenter">
-                <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 Selector="^:checked /template/ ContentPresenter#PART_ContentPresenter">
+            <Setter Property="Background" Value="{DynamicResource CheckBoxCardCheckedBackground}" />
         </Style>
     </ControlTheme>
 </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/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/Label.axaml

@@ -173,6 +173,7 @@
         <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
@@ -266,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" />
@@ -340,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" />
@@ -398,11 +389,12 @@
             <Style Selector="^.Grey">
                 <Setter Property="Background" Value="{DynamicResource LabelTagSolidGreyBackground}" />
             </Style>
-            <Style Selector="^.White">
-                <Setter Property="Foreground" Value="{DynamicResource LabelTagSolidWhiteForeground}" />
-                <Setter Property="BorderBrush" Value="{DynamicResource LabelTagSolidWhiteBorderBrush}" />
-                <Setter Property="Background" Value="{DynamicResource LabelTagSolidWhiteBackground}" />
-            </Style>
+        </Style>
+
+        <Style Selector="^.White">
+            <Setter Property="Foreground" Value="{DynamicResource LabelTagSolidWhiteForeground}" />
+            <Setter Property="BorderBrush" Value="{DynamicResource LabelTagSolidWhiteBorderBrush}" />
+            <Setter Property="Background" Value="{DynamicResource LabelTagSolidWhiteBackground}" />
         </Style>
     </ControlTheme>
 </ResourceDictionary>

src/Semi.Avalonia/Controls/ListBox.axaml

@@ -137,6 +137,7 @@
                     CornerRadius="{TemplateBinding CornerRadius}">
                     <Grid ColumnDefinitions="Auto,*">
                         <Panel
+                            Name="PART_GlyphPanel"
                             Grid.Column="0"
                             TemplatedControl.IsTemplateFocusTarget="True"
                             VerticalAlignment="{TemplateBinding VerticalContentAlignment}">
@@ -175,69 +176,51 @@
             </ControlTemplate>
         </Setter>
 
-        <!--  Unchecked State  -->
-        <Style Selector="^ /template/ Ellipse#OuterEllipse">
-            <Setter Property="Stroke" Value="{DynamicResource RadioButtonUncheckIconDefaultBorderBrush}" />
-            <Setter Property="Fill" Value="{DynamicResource RadioButtonUncheckIconDefaultBackground}" />
-        </Style>
-        <Style Selector="^ /template/ Ellipse#CheckGlyph">
-            <Setter Property="Opacity" Value="0" />
-        </Style>
+        <Style Selector="^">
+            <Style Selector="^ /template/ Ellipse#CheckGlyph">
+                <Setter Property="IsVisible" Value="False" />
+            </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>
-
-        <!--  Unchecked Pressed State  -->
-        <Style Selector="^:pressed">
-            <Style Selector="^ /template/ Ellipse#OuterEllipse">
+            <Style Selector="^:pressed /template/ Ellipse#OuterEllipse">
                 <Setter Property="Stroke" Value="{DynamicResource RadioButtonUncheckIconPressedBorderBrush}" />
                 <Setter Property="Fill" Value="{DynamicResource RadioButtonUncheckIconPressedBackground}" />
             </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 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>
 
-        <!--  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">
-                <Setter Property="Opacity" Value="1" />
+            <Style Selector="^:pointerover /template/ Ellipse#OuterEllipse">
+                <Setter Property="Stroke" Value="{DynamicResource RadioButtonCheckIconPointeroverBorderBrush}" />
+                <Setter Property="Fill" Value="{DynamicResource RadioButtonCheckIconPointeroverBackground}" />
             </Style>
-
-            <!--  Checked Pointerover State  -->
-            <Style Selector="^:pointerover">
-                <Style Selector="^ /template/ Ellipse#OuterEllipse">
-                    <Setter Property="Stroke" Value="{DynamicResource RadioButtonCheckIconPointeroverBorderBrush}" />
-                    <Setter Property="Fill" Value="{DynamicResource RadioButtonCheckIconPointeroverBackground}" />
-                </Style>
+            <Style Selector="^:pressed /template/ Ellipse#OuterEllipse">
+                <Setter Property="Stroke" Value="{DynamicResource RadioButtonCheckIconPressedBorderBrush}" />
+                <Setter Property="Fill" Value="{DynamicResource RadioButtonCheckIconPressedBackground}" />
             </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}" />
@@ -248,6 +231,12 @@
                 </Style>
             </Style>
         </Style>
+
+        <Style Selector="^:disabled">
+            <Style Selector="^ /template/ Panel#PART_GlyphPanel">
+                <Setter Property="Opacity" Value="0.75" />
+            </Style>
+        </Style>
     </ControlTheme>
 
 
@@ -338,6 +327,7 @@
                         VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                         ColumnDefinitions="Auto,*">
                         <Panel
+                            Name="PART_GlyphPanel"
                             Grid.Column="0"
                             VerticalAlignment="Top"
                             Margin="{DynamicResource RadioButtonIconMargin}">
@@ -377,77 +367,73 @@
             </ControlTemplate>
         </Setter>
 
-        <!--  Unchecked State  -->
-        <Style Selector="^ /template/ Ellipse#OuterEllipse">
-            <Setter Property="Stroke" Value="{DynamicResource RadioButtonUncheckIconDefaultBorderBrush}" />
-            <Setter Property="Fill" Value="{DynamicResource RadioButtonUncheckIconDefaultBackground}" />
-        </Style>
-        <Style Selector="^ /template/ Ellipse#CheckGlyph">
-            <Setter Property="Opacity" Value="0" />
-        </Style>
+        <Style Selector="^">
+            <Style Selector="^ /template/ Ellipse#CheckGlyph">
+                <Setter Property="IsVisible" Value="False" />
+            </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}" />
-            <Setter Property="BorderBrush" Value="{DynamicResource RadioButtonCardCheckDefaultBorderBrush}" />
+            <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">
-                <Setter Property="Opacity" Value="1" />
+            <Style Selector="^ /template/ Border#RootBorder">
+                <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">
-                    <Setter Property="Stroke" Value="{DynamicResource RadioButtonCheckIconPointeroverBorderBrush}" />
-                    <Setter Property="Fill" Value="{DynamicResource RadioButtonCheckIconPointeroverBackground}" />
+                <Style Selector="^ /template/ Border#RootBorder">
+                    <Setter Property="BorderBrush" Value="{DynamicResource RadioButtonCardCheckPointeroverBorderBrush}" />
                 </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}" />
@@ -462,6 +448,12 @@
                 </Style>
             </Style>
         </Style>
+
+        <Style Selector="^:disabled">
+            <Style Selector="^ /template/ Panel#PART_GlyphPanel">
+                <Setter Property="Opacity" Value="0.75" />
+            </Style>
+        </Style>
     </ControlTheme>
 
 
@@ -498,33 +490,35 @@
                     TextWrapping="Wrap" />
             </ControlTemplate>
         </Setter>
-        <Setter Property="BorderBrush" Value="{DynamicResource RadioButtonCardDefaultBorderBrush}" />
-        <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="^">
             <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}" />
-            <Setter Property="BorderBrush" Value="{DynamicResource RadioButtonCardCheckDefaultBorderBrush}" />
-            <Style Selector="^:pointerover">
+            <Style Selector="^ /template/ ContentPresenter#PART_ContentPresenter">
+                <Setter Property="Background" Value="{DynamicResource RadioButtonCardCheckedBackground}" />
+                <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}" />
-                </Style>
+                <Setter Property="Foreground" Value="{DynamicResource RadioButtonDisabledForeground}" />
             </Style>
         </Style>
     </ControlTheme>
@@ -557,6 +551,7 @@
                     CornerRadius="{TemplateBinding CornerRadius}">
                     <Grid ColumnDefinitions="Auto,*">
                         <Panel
+                            Name="PART_GlyphPanel"
                             Grid.Column="0"
                             TemplatedControl.IsTemplateFocusTarget="True"
                             VerticalAlignment="{TemplateBinding VerticalContentAlignment}">
@@ -593,30 +588,23 @@
             </ControlTemplate>
         </Setter>
 
-        <!--  Unchecked Pointerover State  -->
-        <Style Selector="^:pointerover">
-            <Style Selector="^ /template/ Border#NormalRectangle">
+        <Style Selector="^">
+            <Style Selector="^:pointerover /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">
+            <Style Selector="^:pressed /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/ 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 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>
 
@@ -625,84 +613,32 @@
                 <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 Selector="^:pointerover /template/ Border#NormalRectangle">
+                <Setter Property="BorderBrush" Value="{DynamicResource CheckBoxCheckedPointeroverBorderBrush}" />
+                <Setter Property="Background" Value="{DynamicResource CheckBoxCheckedPointeroverBackground}" />
             </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="^:pressed /template/ Border#NormalRectangle">
+                <Setter Property="BorderBrush" Value="{DynamicResource CheckBoxCheckedPressedBorderBrush}" />
+                <Setter Property="Background" Value="{DynamicResource CheckBoxCheckedPressedBackground}" />
             </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 Selector="^ /template/ ContentPresenter#PART_ContentPresenter">
+                    <Setter Property="Foreground" Value="{DynamicResource CheckBoxDisabledForeground}" />
                 </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="^:selected /template/ PathIcon#CheckGlyph">
+            <Setter Property="Data" Value="{DynamicResource CheckBoxCheckGlyph}" />
+        </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/ Path#CheckGlyph">
-                    <Setter Property="Fill" Value="{DynamicResource CheckBoxGlyphDisabledFill}" />
-                </Style>
+        <Style Selector="^:disabled">
+            <Style Selector="^ /template/ Panel#PART_GlyphPanel">
+                <Setter Property="Opacity" Value="0.75" />
             </Style>
         </Style>
     </ControlTheme>
@@ -736,6 +672,7 @@
                         VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                         ColumnDefinitions="Auto,*">
                         <Panel
+                            Name="PART_GlyphPanel"
                             Grid.Column="0"
                             VerticalAlignment="Top"
                             Margin="{DynamicResource CheckBoxBoxMargin}">
@@ -774,53 +711,42 @@
             </ControlTemplate>
         </Setter>
 
-        <!--  Unchecked Pointerover State  -->
-        <Style Selector="^:pointerover">
-            <Style Selector="^ /template/ Border#NormalRectangle">
-                <Setter Property="BorderBrush" Value="{DynamicResource CheckBoxPointeroverBorderBrush}" />
+        <Style Selector="^">
+            <Style Selector="^:pointerover">
+                <Style Selector="^ /template/ Border#NormalRectangle">
+                    <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">
-                <Setter Property="Background" Value="{DynamicResource CheckBoxCardPointeroverBackground}" />
+            <Style Selector="^:pressed">
+                <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>
-
-        <!--  Unchecked Pressed State  -->
-        <Style Selector="^:pressed">
-            <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>
-
-        <!--  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 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="^: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/ PathIcon#CheckGlyph">
-                <Setter Property="Data" Value="{DynamicResource CheckBoxCheckGlyph}" />
-                <Setter Property="Opacity" Value="1" />
+            <Style Selector="^ /template/ Border#RootBorder">
+                <Setter Property="BorderBrush" Value="{DynamicResource CheckBoxCardCheckedBorderBrush}" />
             </Style>
-
-            <!--  Checked Pointerover State  -->
             <Style Selector="^:pointerover">
                 <Style Selector="^ /template/ Border#NormalRectangle">
                     <Setter Property="BorderBrush" Value="{DynamicResource CheckBoxCheckedPointeroverBorderBrush}" />
@@ -830,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}" />
@@ -841,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">
-                    <Setter Property="BorderBrush" Value="{DynamicResource CheckBoxCheckedDisabledBorderBrush}" />
-                    <Setter Property="Background" Value="{DynamicResource CheckBoxCheckedDisabledBackground}" />
-                </Style>
+            </Style>
 
-                <Style Selector="^ /template/ Path#CheckGlyph">
-                    <Setter Property="Fill" Value="{DynamicResource CheckBoxGlyphDisabledFill}" />
+            <Style Selector="^:disabled">
+                <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/RadioButton.axaml

@@ -34,6 +34,7 @@
                     CornerRadius="{TemplateBinding CornerRadius}">
                     <Grid ColumnDefinitions="Auto,*">
                         <Panel
+                            Name="PART_GlyphPanel"
                             Grid.Column="0"
                             TemplatedControl.IsTemplateFocusTarget="True"
                             VerticalAlignment="{TemplateBinding VerticalContentAlignment}">
@@ -45,7 +46,6 @@
                                 Stroke="{DynamicResource RadioButtonUncheckIconDefaultBorderBrush}"
                                 StrokeThickness="{DynamicResource RadioButtonUncheckIconDefaultThickness}"
                                 UseLayoutRounding="False" />
-
                             <Ellipse
                                 Name="CheckGlyph"
                                 Width="{DynamicResource RadioButtonGlyphRadius}"
@@ -72,33 +72,23 @@
             </ControlTemplate>
         </Setter>
 
-        <!--  Unchecked State  -->
         <Style Selector="^:unchecked">
+            <Style Selector="^ /template/ Ellipse#CheckGlyph">
+                <Setter Property="IsVisible" Value="False" />
+            </Style>
+
             <Style Selector="^ /template/ Ellipse#OuterEllipse">
                 <Setter Property="Stroke" Value="{DynamicResource RadioButtonUncheckIconDefaultBorderBrush}" />
                 <Setter Property="Fill" Value="{DynamicResource RadioButtonUncheckIconDefaultBackground}" />
             </Style>
-            <Style Selector="^ /template/ Ellipse#CheckGlyph">
-                <Setter Property="Opacity" Value="0" />
+            <Style Selector="^:pointerover /template/ Ellipse#OuterEllipse">
+                <Setter Property="Stroke" Value="{DynamicResource RadioButtonUncheckIconPointeroverBorderBrush}" />
+                <Setter Property="Fill" Value="{DynamicResource RadioButtonUncheckIconPointeroverBackground}" />
             </Style>
-
-            <!--  Unchecked Pointerover State  -->
-            <Style Selector="^:pointerover">
-                <Style Selector="^ /template/ Ellipse#OuterEllipse">
-                    <Setter Property="Stroke" Value="{DynamicResource RadioButtonUncheckIconPointeroverBorderBrush}" />
-                    <Setter Property="Fill" Value="{DynamicResource RadioButtonUncheckIconPointeroverBackground}" />
-                </Style>
+            <Style Selector="^:pressed /template/ Ellipse#OuterEllipse">
+                <Setter Property="Stroke" Value="{DynamicResource RadioButtonUncheckIconPressedBorderBrush}" />
+                <Setter Property="Fill" Value="{DynamicResource RadioButtonUncheckIconPressedBackground}" />
             </Style>
-
-            <!--  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>
-
-            <!--  Unchecked Disabled state  -->
             <Style Selector="^:disabled">
                 <Style Selector="^ /template/ Ellipse#OuterEllipse">
                     <Setter Property="Stroke" Value="{DynamicResource RadioButtonUncheckIconDisabledBorderBrush}" />
@@ -110,33 +100,23 @@
             </Style>
         </Style>
 
-        <!--  Checked State  -->
         <Style Selector="^:checked">
+            <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">
-                <Setter Property="Opacity" Value="1" />
+            <Style Selector="^:pointerover /template/ Ellipse#OuterEllipse">
+                <Setter Property="Stroke" Value="{DynamicResource RadioButtonCheckIconPointeroverBorderBrush}" />
+                <Setter Property="Fill" Value="{DynamicResource RadioButtonCheckIconPointeroverBackground}" />
             </Style>
-
-            <!--  Checked Pointerover State  -->
-            <Style Selector="^:pointerover">
-                <Style Selector="^ /template/ Ellipse#OuterEllipse">
-                    <Setter Property="Stroke" Value="{DynamicResource RadioButtonCheckIconPointeroverBorderBrush}" />
-                    <Setter Property="Fill" Value="{DynamicResource RadioButtonCheckIconPointeroverBackground}" />
-                </Style>
+            <Style Selector="^:pressed /template/ Ellipse#OuterEllipse">
+                <Setter Property="Stroke" Value="{DynamicResource RadioButtonCheckIconPressedBorderBrush}" />
+                <Setter Property="Fill" Value="{DynamicResource RadioButtonCheckIconPressedBackground}" />
             </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}" />
@@ -147,6 +127,12 @@
                 </Style>
             </Style>
         </Style>
+
+        <Style Selector="^:disabled">
+            <Style Selector="^ /template/ Panel#PART_GlyphPanel">
+                <Setter Property="Opacity" Value="0.75" />
+            </Style>
+        </Style>
     </ControlTheme>
 
     <ControlTheme x:Key="RadioButtonGroupBorder" TargetType="Border">
@@ -232,6 +218,7 @@
                         VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                         ColumnDefinitions="Auto,*">
                         <Panel
+                            Name="PART_GlyphPanel"
                             Grid.Column="0"
                             VerticalAlignment="Top"
                             Margin="{DynamicResource RadioButtonIconMargin}">
@@ -271,33 +258,31 @@
             </ControlTemplate>
         </Setter>
 
-        <!--  Unchecked State  -->
         <Style Selector="^:unchecked">
+            <Style Selector="^ /template/ Ellipse#CheckGlyph">
+                <Setter Property="IsVisible" Value="False" />
+            </Style>
+
             <Style Selector="^ /template/ Ellipse#OuterEllipse">
                 <Setter Property="Stroke" Value="{DynamicResource RadioButtonUncheckIconDefaultBorderBrush}" />
                 <Setter Property="Fill" Value="{DynamicResource RadioButtonUncheckIconDefaultBackground}" />
             </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}" />
                 </Style>
+                <Style Selector="^ /template/ Border#RootBorder">
+                    <Setter Property="Background" Value="{DynamicResource RadioButtonCardUncheckPointeroverBackground}" />
+                </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 Selector="^ /template/ Border#RootBorder">
+                    <Setter Property="Background" Value="{DynamicResource RadioButtonCardUncheckPressedBackground}" />
+                </Style>
             </Style>
-
-            <!--  Unchecked Disabled state  -->
             <Style Selector="^:disabled">
                 <Style Selector="^ /template/ Ellipse#OuterEllipse">
                     <Setter Property="Stroke" Value="{DynamicResource RadioButtonUncheckIconDisabledBorderBrush}" />
@@ -309,41 +294,37 @@
             </Style>
         </Style>
 
-        <!--  Checked State  -->
         <Style Selector="^:checked">
-            <Setter Property="Background" Value="{DynamicResource RadioButtonCardCheckedBackground}" />
-            <Setter Property="BorderBrush" Value="{DynamicResource RadioButtonCardCheckDefaultBorderBrush}" />
+            <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">
-                <Setter Property="Opacity" Value="1" />
+            <Style Selector="^ /template/ Border#RootBorder">
+                <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">
-                    <Setter Property="Stroke" Value="{DynamicResource RadioButtonCheckIconPointeroverBorderBrush}" />
-                    <Setter Property="Fill" Value="{DynamicResource RadioButtonCheckIconPointeroverBackground}" />
+                <Style Selector="^ /template/ Border#RootBorder">
+                    <Setter Property="BorderBrush" Value="{DynamicResource RadioButtonCardCheckPointeroverBorderBrush}" />
                 </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}" />
@@ -358,6 +339,12 @@
                 </Style>
             </Style>
         </Style>
+
+        <Style Selector="^:disabled">
+            <Style Selector="^ /template/ Panel#PART_GlyphPanel">
+                <Setter Property="Opacity" Value="0.75" />
+            </Style>
+        </Style>
     </ControlTheme>
 
     <ControlTheme x:Key="PureCardRadioButton" TargetType="RadioButton">
@@ -389,36 +376,35 @@
             </ControlTemplate>
         </Setter>
         <Style Selector="^:unchecked">
-            <Setter Property="BorderBrush" Value="{DynamicResource RadioButtonCardDefaultBorderBrush}" />
-            <Style Selector="^:pointerover">
+            <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">
+            <Style Selector="^:pressed /template/ ContentPresenter#PART_ContentPresenter">
                 <Setter Property="Background" Value="{DynamicResource RadioButtonCardUncheckPressedBackground}" />
             </Style>
-            <Style Selector="^:disabled">
-                <Style Selector="^ /template/ ContentPresenter#PART_ContentPresenter">
-                    <Setter Property="Foreground" Value="{DynamicResource RadioButtonDisabledForeground}" />
-                </Style>
+            <Style Selector="^:disabled /template/ ContentPresenter#PART_ContentPresenter">
+                <Setter Property="Foreground" Value="{DynamicResource RadioButtonDisabledForeground}" />
             </Style>
         </Style>
         <Style Selector="^:checked">
-            <Setter Property="Background" Value="{DynamicResource RadioButtonCardCheckedBackground}" />
-            <Setter Property="BorderBrush" Value="{DynamicResource RadioButtonCardCheckDefaultBorderBrush}" />
-            <Style Selector="^:pointerover">
+            <Style Selector="^ /template/ ContentPresenter#PART_ContentPresenter">
+                <Setter Property="Background" Value="{DynamicResource RadioButtonCardCheckedBackground}" />
+                <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}" />
-                </Style>
+                <Setter Property="Foreground" Value="{DynamicResource RadioButtonDisabledForeground}" />
             </Style>
         </Style>
-
     </ControlTheme>
 </ResourceDictionary>

src/Semi.Avalonia/Controls/RepeatButton.axaml

@@ -2,267 +2,8 @@
     xmlns="https://github.com/avaloniaui"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
     x:CompileBindings="True">
-    <ControlTheme x:Key="{x:Type RepeatButton}" TargetType="RepeatButton">
-        <Setter Property="Background" Value="{DynamicResource ButtonDefaultBackground}" />
-        <Setter Property="Foreground" Value="{DynamicResource ButtonDefaultPrimaryForeground}" />
-        <Setter Property="BorderBrush" Value="{DynamicResource ButtonDefaultBorderBrush}" />
-        <Setter Property="CornerRadius" Value="{DynamicResource ButtonCornerRadius}" />
-        <Setter Property="BorderThickness" Value="{DynamicResource ButtonBorderThickness}" />
-        <Setter Property="Padding" Value="{DynamicResource ButtonDefaultPadding}" />
-        <Setter Property="HorizontalAlignment" Value="Center" />
-        <Setter Property="VerticalAlignment" Value="Center" />
-        <Setter Property="RenderTransform" Value="none" />
-        <Setter Property="FontSize" Value="{DynamicResource ButtonDefaultFontSize}" />
-        <Setter Property="FontWeight" Value="{DynamicResource ButtonDefaultFontWeight}" />
-        <Setter Property="BackgroundSizing" Value="OuterBorderEdge" />
-        <Setter Property="HorizontalContentAlignment" Value="Center" />
-        <Setter Property="VerticalContentAlignment" Value="Center" />
-        <Setter Property="MinHeight" Value="{DynamicResource ButtonDefaultHeight}" />
-        <Setter Property="Cursor" Value="Hand" />
-        <Setter Property="Template">
-            <ControlTemplate TargetType="RepeatButton">
-                <ContentPresenter
-                    Name="PART_ContentPresenter"
-                    Padding="{TemplateBinding Padding}"
-                    HorizontalAlignment="Stretch"
-                    VerticalAlignment="Stretch"
-                    HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
-                    VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
-                    BackgroundSizing="{TemplateBinding BackgroundSizing}"
-                    BorderThickness="{TemplateBinding BorderThickness}"
-                    Content="{TemplateBinding Content}"
-                    ContentTemplate="{TemplateBinding ContentTemplate}"
-                    CornerRadius="{TemplateBinding CornerRadius}"
-                    RecognizesAccessKey="True"
-                    TextElement.FontSize="{TemplateBinding FontSize}"
-                    TextElement.FontWeight="{TemplateBinding FontWeight}"
-                    UseLayoutRounding="False" />
-            </ControlTemplate>
-        </Setter>
-
-        <Style Selector="^: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}" />
-        </Style>
-
-        <Style Selector="^.Primary">
-            <Setter Property="Foreground" Value="{DynamicResource ButtonDefaultPrimaryForeground}" />
-        </Style>
-        <Style Selector="^.Secondary">
-            <Setter Property="Foreground" Value="{DynamicResource ButtonDefaultSecondaryForeground}" />
-        </Style>
-        <Style Selector="^.Tertiary">
-            <Setter Property="Foreground" Value="{DynamicResource ButtonDefaultTertiaryForeground}" />
-        </Style>
-        <Style Selector="^.Success">
-            <Setter Property="Foreground" Value="{DynamicResource ButtonDefaultSuccessForeground}" />
-        </Style>
-        <Style Selector="^.Warning">
-            <Setter Property="Foreground" Value="{DynamicResource ButtonDefaultWarningForeground}" />
-        </Style>
-        <Style Selector="^.Danger">
-            <Setter Property="Foreground" Value="{DynamicResource ButtonDefaultDangerForeground}" />
-        </Style>
-
-        <Style Selector="^:pointerover /template/ ContentPresenter#PART_ContentPresenter">
-            <Setter Property="BorderBrush" Value="{DynamicResource ButtonDefaultPointeroverBorderBrush}" />
-            <Setter Property="Background" Value="{DynamicResource ButtonDefaultPointeroverBackground}" />
-        </Style>
-
-        <Style Selector="^:pressed /template/ ContentPresenter#PART_ContentPresenter">
-            <Setter Property="BorderBrush" Value="{DynamicResource ButtonDefaultPressedBorderBrush}" />
-            <Setter Property="Background" Value="{DynamicResource ButtonDefaultPressedBackground}" />
-        </Style>
-
-        <Style Selector="^:disabled /template/ ContentPresenter#PART_ContentPresenter">
-            <Setter Property="BorderBrush" Value="{DynamicResource ButtonDefaultDisabledBorderBrush}" />
-            <Setter Property="Foreground" Value="{DynamicResource ButtonDefaultDisabledForeground}" />
-        </Style>
-
-        <Style Selector="^.Large">
-            <Setter Property="MinHeight" Value="{DynamicResource ButtonLargeHeight}" />
-            <Setter Property="Padding" Value="{DynamicResource ButtonLargePadding}" />
-        </Style>
-        <Style Selector="^.Small">
-            <Setter Property="MinHeight" Value="{DynamicResource ButtonSmallHeight}" />
-            <Setter Property="Padding" Value="{DynamicResource ButtonSmallPadding}" />
-        </Style>
-    </ControlTheme>
-
-    <ControlTheme
-        x:Key="SolidRepeatButton"
-        BasedOn="{StaticResource {x:Type RepeatButton}}"
-        TargetType="RepeatButton">
-        <Setter Property="FocusAdorner">
-            <FocusAdornerTemplate>
-                <Border Theme="{DynamicResource AdornerLayerBorder}"
-                        Classes="Solid" />
-            </FocusAdornerTemplate>
-        </Setter>
-        <Style Selector="^ /template/ ContentPresenter#PART_ContentPresenter">
-            <Setter Property="Foreground" Value="{DynamicResource ButtonSolidForeground}" />
-            <Setter Property="Background" Value="{DynamicResource ButtonSolidPrimaryBackground}" />
-            <Setter Property="BorderBrush" Value="{DynamicResource ButtonSolidPrimaryBorderBrush}" />
-        </Style>
-
-        <Style Selector="^:pointerover /template/ ContentPresenter#PART_ContentPresenter">
-            <Setter Property="Background" Value="{DynamicResource ButtonSolidPrimaryPointeroverBackground}" />
-            <Setter Property="BorderBrush" Value="{DynamicResource ButtonSolidPrimaryPointeroverBorderBrush}" />
-        </Style>
-        <Style Selector="^:pressed /template/ ContentPresenter#PART_ContentPresenter">
-            <Setter Property="Foreground" Value="{DynamicResource ButtonSolidPrimaryPressedForeground}" />
-            <Setter Property="Background" Value="{DynamicResource ButtonSolidPrimaryPressedBackground}" />
-            <Setter Property="BorderBrush" Value="{DynamicResource ButtonSolidPrimaryPressedBorderBrush}" />
-        </Style>
-
-        <Style Selector="^.Primary">
-            <Style Selector="^ /template/ ContentPresenter#PART_ContentPresenter">
-                <Setter Property="Foreground" Value="{DynamicResource ButtonSolidForeground}" />
-                <Setter Property="Background" Value="{DynamicResource ButtonSolidPrimaryBackground}" />
-                <Setter Property="BorderBrush" Value="{DynamicResource ButtonSolidPrimaryBorderBrush}" />
-            </Style>
-            <Style Selector="^:pointerover /template/ ContentPresenter#PART_ContentPresenter">
-                <Setter Property="Background" Value="{DynamicResource ButtonSolidPrimaryPointeroverBackground}" />
-                <Setter Property="BorderBrush" Value="{DynamicResource ButtonSolidPrimaryPointeroverBorderBrush}" />
-            </Style>
-            <Style Selector="^:pressed /template/ ContentPresenter#PART_ContentPresenter">
-                <Setter Property="Foreground" Value="{DynamicResource ButtonSolidPrimaryPressedForeground}" />
-                <Setter Property="Background" Value="{DynamicResource ButtonSolidPrimaryPressedBackground}" />
-                <Setter Property="BorderBrush" Value="{DynamicResource ButtonSolidPrimaryPressedBorderBrush}" />
-            </Style>
-        </Style>
-        <Style Selector="^.Secondary">
-            <Style Selector="^ /template/ ContentPresenter#PART_ContentPresenter">
-                <Setter Property="Foreground" Value="{DynamicResource ButtonSolidForeground}" />
-                <Setter Property="Background" Value="{DynamicResource ButtonSolidSecondaryBackground}" />
-                <Setter Property="BorderBrush" Value="{DynamicResource ButtonSolidSecondaryBorderBrush}" />
-            </Style>
-            <Style Selector="^:pointerover /template/ ContentPresenter#PART_ContentPresenter">
-                <Setter Property="Background" Value="{DynamicResource ButtonSolidSecondaryPointeroverBackground}" />
-                <Setter Property="BorderBrush" Value="{DynamicResource ButtonSolidSecondaryPointeroverBorderBrush}" />
-            </Style>
-            <Style Selector="^:pressed /template/ ContentPresenter#PART_ContentPresenter">
-                <Setter Property="Background" Value="{DynamicResource ButtonSolidSecondaryPressedBackground}" />
-                <Setter Property="BorderBrush" Value="{DynamicResource ButtonSolidSecondaryPressedBorderBrush}" />
-            </Style>
-        </Style>
-        <Style Selector="^.Tertiary">
-            <Style Selector="^ /template/ ContentPresenter#PART_ContentPresenter">
-                <Setter Property="Foreground" Value="{DynamicResource ButtonSolidForeground}" />
-                <Setter Property="Background" Value="{DynamicResource ButtonSolidTertiaryBackground}" />
-                <Setter Property="BorderBrush" Value="{DynamicResource ButtonSolidTertiaryBorderBrush}" />
-            </Style>
-            <Style Selector="^:pointerover /template/ ContentPresenter#PART_ContentPresenter">
-                <Setter Property="Background" Value="{DynamicResource ButtonSolidTertiaryPointeroverBackground}" />
-                <Setter Property="BorderBrush" Value="{DynamicResource ButtonSolidTertiaryPointeroverBorderBrush}" />
-            </Style>
-            <Style Selector="^:pressed /template/ ContentPresenter#PART_ContentPresenter">
-                <Setter Property="Background" Value="{DynamicResource ButtonSolidTertiaryPressedBackground}" />
-                <Setter Property="BorderBrush" Value="{DynamicResource ButtonSolidTertiaryPressedBorderBrush}" />
-            </Style>
-        </Style>
-        <Style Selector="^.Success">
-            <Style Selector="^ /template/ ContentPresenter#PART_ContentPresenter">
-                <Setter Property="Foreground" Value="{DynamicResource ButtonSolidForeground}" />
-                <Setter Property="Background" Value="{DynamicResource ButtonSolidSuccessBackground}" />
-                <Setter Property="BorderBrush" Value="{DynamicResource ButtonSolidSuccessBorderBrush}" />
-            </Style>
-            <Style Selector="^:pointerover /template/ ContentPresenter#PART_ContentPresenter">
-                <Setter Property="Background" Value="{DynamicResource ButtonSolidSuccessPointeroverBackground}" />
-                <Setter Property="BorderBrush" Value="{DynamicResource ButtonSolidSuccessPointeroverBorderBrush}" />
-            </Style>
-            <Style Selector="^:pressed /template/ ContentPresenter#PART_ContentPresenter">
-                <Setter Property="Background" Value="{DynamicResource ButtonSolidSuccessPressedBackground}" />
-                <Setter Property="BorderBrush" Value="{DynamicResource ButtonSolidSuccessPressedBorderBrush}" />
-            </Style>
-        </Style>
-        <Style Selector="^.Warning">
-            <Style Selector="^ /template/ ContentPresenter#PART_ContentPresenter">
-                <Setter Property="Foreground" Value="{DynamicResource ButtonSolidForeground}" />
-                <Setter Property="Background" Value="{DynamicResource ButtonSolidWarningBackground}" />
-                <Setter Property="BorderBrush" Value="{DynamicResource ButtonSolidWarningBorderBrush}" />
-            </Style>
-            <Style Selector="^:pointerover /template/ ContentPresenter#PART_ContentPresenter">
-                <Setter Property="Background" Value="{DynamicResource ButtonSolidWarningPointeroverBackground}" />
-                <Setter Property="BorderBrush" Value="{DynamicResource ButtonSolidWarningPointeroverBorderBrush}" />
-            </Style>
-            <Style Selector="^:pressed /template/ ContentPresenter#PART_ContentPresenter">
-                <Setter Property="Background" Value="{DynamicResource ButtonSolidWarningPressedBackground}" />
-                <Setter Property="BorderBrush" Value="{DynamicResource ButtonSolidWarningPressedBorderBrush}" />
-            </Style>
-        </Style>
-        <Style Selector="^.Danger">
-            <Style Selector="^ /template/ ContentPresenter#PART_ContentPresenter">
-                <Setter Property="Foreground" Value="{DynamicResource ButtonSolidForeground}" />
-                <Setter Property="Background" Value="{DynamicResource ButtonSolidDangerBackground}" />
-                <Setter Property="BorderBrush" Value="{DynamicResource ButtonSolidDangerBorderBrush}" />
-            </Style>
-            <Style Selector="^:pointerover /template/ ContentPresenter#PART_ContentPresenter">
-                <Setter Property="Background" Value="{DynamicResource ButtonSolidDangerPointeroverBackground}" />
-                <Setter Property="BorderBrush" Value="{DynamicResource ButtonSolidDangerPointeroverBorderBrush}" />
-            </Style>
-            <Style Selector="^:pressed /template/ ContentPresenter#PART_ContentPresenter">
-                <Setter Property="Background" Value="{DynamicResource ButtonSolidDangerPressedBackground}" />
-                <Setter Property="BorderBrush" Value="{DynamicResource ButtonSolidDangerPressedBorderBrush}" />
-            </Style>
-        </Style>
-
-        <Style Selector="^:disabled /template/ ContentPresenter#PART_ContentPresenter">
-            <Setter Property="Foreground" Value="{DynamicResource ButtonSolidDisabledForeground}" />
-            <Setter Property="Background" Value="{DynamicResource ButtonSolidDisabledBackground}" />
-            <Setter Property="BorderBrush" Value="{DynamicResource ButtonSolidDisabledBorderBrush}" />
-        </Style>
-    </ControlTheme>
-
-    <ControlTheme
-        x:Key="OutlineRepeatButton"
-        BasedOn="{StaticResource {x:Type RepeatButton}}"
-        TargetType="RepeatButton">
-        <Style Selector="^ /template/ ContentPresenter#PART_ContentPresenter">
-            <Setter Property="Background" Value="{DynamicResource ButtonOutlineBackground}" />
-            <Setter Property="BorderBrush" Value="{DynamicResource ButtonOutlineBorderBrush}" />
-        </Style>
-        <Style Selector="^:pointerover /template/ ContentPresenter#PART_ContentPresenter">
-            <Setter Property="Background" Value="{DynamicResource ButtonOutlinePointeroverBackground}" />
-            <Setter Property="BorderBrush" Value="{DynamicResource ButtonOutlineBorderBrush}" />
-        </Style>
-        <Style Selector="^:pressed /template/ ContentPresenter#PART_ContentPresenter">
-            <Setter Property="Background" Value="{DynamicResource ButtonOutlinePressedBackground}" />
-            <Setter Property="BorderBrush" Value="{DynamicResource ButtonOutlineBorderBrush}" />
-        </Style>
-        <Style Selector="^.Success /template/ ContentPresenter#PART_ContentPresenter">
-            <Setter Property="BorderBrush" Value="{DynamicResource ButtonOutlineSuccessBorderBrush}" />
-        </Style>
-        <Style Selector="^.Warning /template/ ContentPresenter#PART_ContentPresenter">
-            <Setter Property="BorderBrush" Value="{DynamicResource ButtonOutlineWarningBorderBrush}" />
-        </Style>
-        <Style Selector="^.Danger /template/ ContentPresenter#PART_ContentPresenter">
-            <Setter Property="BorderBrush" Value="{DynamicResource ButtonOutlineDangerBorderBrush}" />
-        </Style>
-        <Style Selector="^:disabled /template/ ContentPresenter#PART_ContentPresenter">
-            <Setter Property="BorderBrush" Value="{DynamicResource ButtonOutlineBorderBrush}" />
-            <Setter Property="Background" Value="{DynamicResource ButtonOutlineBackground}" />
-            <Setter Property="Foreground" Value="{DynamicResource ButtonDefaultDisabledForeground}" />
-        </Style>
-    </ControlTheme>
-
-    <ControlTheme
-        x:Key="BorderlessRepeatButton"
-        BasedOn="{StaticResource {x:Type RepeatButton}}"
-        TargetType="RepeatButton">
-        <Style Selector="^ /template/ ContentPresenter#PART_ContentPresenter">
-            <Setter Property="BorderBrush" Value="{DynamicResource ButtonBorderlessBorderBrush}" />
-            <Setter Property="Background" Value="{DynamicResource ButtonBorderlessBackground}" />
-        </Style>
-        <Style Selector="^:disabled /template/ ContentPresenter#PART_ContentPresenter">
-            <Setter Property="BorderBrush" Value="{DynamicResource ButtonBorderlessBorderBrush}" />
-            <Setter Property="Background" Value="{DynamicResource ButtonBorderlessBackground}" />
-            <Setter Property="Foreground" Value="{DynamicResource ButtonDefaultDisabledForeground}" />
-        </Style>
-
-    </ControlTheme>
+    <StaticResource x:Key="{x:Type RepeatButton}" ResourceKey="{x:Type Button}" />
+    <StaticResource x:Key="SolidRepeatButton" ResourceKey="SolidButton" />
+    <StaticResource x:Key="OutlineRepeatButton" ResourceKey="OutlineButton" />
+    <StaticResource x:Key="BorderlessRepeatButton" ResourceKey="BorderlessButton" />
 </ResourceDictionary>

src/Semi.Avalonia/Controls/ScrollViewer.axaml

@@ -39,13 +39,7 @@
 
     <ControlTheme x:Key="{x:Type ScrollBar}" TargetType="ScrollBar">
         <Setter Property="Cursor" Value="Arrow" />
-        <Setter Property="Transitions">
-            <Transitions>
-                <DoubleTransition Property="Width" Duration="0:0:0.1" />
-                <DoubleTransition Property="Height" Duration="0:0:0.1" />
-                <!--<TransformOperationsTransition Property="RenderTransform" Duration="0:0:0.1" />-->
-            </Transitions>
-        </Setter>
+        <Setter Property="ShowDelay" Value="0" />
         <Style Selector="^:horizontal">
             <Setter Property="Height" Value="{StaticResource ScrollBarThickness}" />
             <Setter Property="Template">
@@ -187,6 +181,13 @@
             </Setter>
         </Style>
         <Style Selector="^ /template/ Thumb#thumb">
+            <Setter Property="Transitions">
+                <Transitions>
+                    <DoubleTransition Property="Width" Duration="0:0:0.1" />
+                    <DoubleTransition Property="Height" Duration="0:0:0.1" />
+                    <!--<TransformOperationsTransition Property="RenderTransform" Duration="0:0:0.1" />-->
+                </Transitions>
+            </Setter>
             <Setter Property="Foreground" Value="{DynamicResource ScrollBarThumbForeground}" />
             <Setter Property="Template">
                 <ControlTemplate TargetType="Thumb">
@@ -201,12 +202,14 @@
             <Setter Property="Foreground" Value="{DynamicResource ScrollBarThumbPointeroverForeground}" />
         </Style>
         <Style Selector="^:horizontal /template/ Thumb#thumb">
-            <Setter Property="MinWidth" Value="{DynamicResource ScrollBarThickness}" />
+            <Setter Property="MinWidth" Value="{DynamicResource ScrollBarMinLength}" />
             <Setter Property="Height" Value="{DynamicResource ScrollBarThumbThickness}" />
+            <Setter Property="VerticalAlignment" Value="Bottom"/>
         </Style>
         <Style Selector="^:vertical /template/ Thumb#thumb">
-            <Setter Property="MinHeight" Value="{DynamicResource ScrollBarThickness}" />
+            <Setter Property="MinHeight" Value="{DynamicResource ScrollBarMinLength}" />
             <Setter Property="Width" Value="{DynamicResource ScrollBarThumbThickness}" />
+            <Setter Property="HorizontalAlignment" Value="Right"/>
         </Style>
         <Style Selector="^ /template/ RepeatButton > PathIcon">
             <Setter Property="Foreground" Value="{DynamicResource ScrollBarButtonDefaultForeground}" />
@@ -222,10 +225,10 @@
             <Style Selector="^ /template/ RepeatButton">
                 <Setter Property="IsVisible" Value="False" />
             </Style>
-            <Style Selector="^:vertical">
+            <Style Selector="^:vertical /template/ Thumb#thumb">
                 <Setter Property="Width" Value="2" />
             </Style>
-            <Style Selector="^:horizontal">
+            <Style Selector="^:horizontal /template/ Thumb#thumb">
                 <Setter Property="Height" Value="2" />
             </Style>
         </Style>

src/Semi.Avalonia/Controls/SplitView.axaml

@@ -233,6 +233,262 @@
             </Style>
         </Style>
 
+        <Style Selector="^:lightDismiss /template/ Rectangle#LightDismissLayer">
+            <Setter Property="Fill" Value="{DynamicResource SplitViewMaskBrush}" />
+        </Style>
+        <Style Selector="^:overlay:open /template/ Rectangle#LightDismissLayer">
+            <Setter Property="IsVisible" Value="True" />
+        </Style>
+        <Style Selector="^:compactoverlay:open /template/ Rectangle#LightDismissLayer">
+            <Setter Property="IsVisible" Value="True" />
+        </Style>
+    </ControlTheme>
+    <ControlTheme x:Key="VerticalSplitView" TargetType="SplitView">
+        <Setter Property="OpenPaneLength" Value="{DynamicResource SplitViewOpenPaneThemeLength}" />
+        <Setter Property="CompactPaneLength" Value="{DynamicResource SplitViewCompactPaneThemeLength}" />
+        <Setter Property="PaneBackground" Value="{DynamicResource SplitViewPaneBackground}" />
+
+        <Style Selector="^:left">
+            <Setter Property="Template">
+                <ControlTemplate TargetType="SplitView">
+                    <Grid Name="Container" Background="{TemplateBinding Background}">
+                        <Grid.RowDefinitions>
+                            <!--  why is this throwing a binding error?  -->
+                            <RowDefinition
+                                Height="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.PaneColumnGridLength}" />
+                            <RowDefinition Height="*" />
+                        </Grid.RowDefinitions>
+
+                        <Panel
+                            Name="PART_PaneRoot"
+                            VerticalAlignment="Top"
+                            Background="{TemplateBinding PaneBackground}"
+                            ClipToBounds="True"
+                            ZIndex="100">
+                            <ContentPresenter
+                                Name="PART_PanePresenter"
+                                Content="{TemplateBinding Pane}"
+                                ContentTemplate="{TemplateBinding PaneTemplate}" />
+                            <Rectangle
+                                Name="HCPaneBorder"
+                                Height="1"
+                                VerticalAlignment="Bottom"
+                                Fill="{DynamicResource SplitViewSeparatorBackground}" />
+                        </Panel>
+
+                        <Panel Name="ContentRoot">
+                            <ContentPresenter
+                                Name="PART_ContentPresenter"
+                                Content="{TemplateBinding Content}"
+                                ContentTemplate="{TemplateBinding ContentTemplate}" />
+                            <Rectangle
+                                Name="LightDismissLayer"
+                                Fill="Transparent"
+                                IsVisible="False" />
+                        </Panel>
+
+                    </Grid>
+                </ControlTemplate>
+            </Setter>
+
+            <Style Selector="^:overlay">
+                <Style Selector="^ /template/ Panel#PART_PaneRoot">
+                    <Setter Property="Height"
+                            Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.ClosedPaneWidth}" />
+                    <Setter Property="Grid.RowSpan" Value="1" />
+                    <Setter Property="Grid.Row" Value="0" />
+                </Style>
+                <Style Selector="^ /template/ Panel#ContentRoot">
+                    <Setter Property="Grid.Row" Value="1" />
+                    <Setter Property="Grid.RowSpan" Value="2" />
+                </Style>
+            </Style>
+
+            <Style Selector="^:compactinline">
+                <Style Selector="^ /template/ Panel#PART_PaneRoot">
+                    <Setter Property="Grid.RowSpan" Value="1" />
+                    <Setter Property="Grid.Row" Value="0" />
+                    <Setter Property="Height"
+                            Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.ClosedPaneWidth}" />
+                </Style>
+                <Style Selector="^ /template/ Panel#ContentRoot">
+                    <Setter Property="Grid.Row" Value="1" />
+                    <Setter Property="Grid.RowSpan" Value="1" />
+                </Style>
+            </Style>
+
+            <Style Selector="^:compactoverlay">
+                <Style Selector="^ /template/ Panel#PART_PaneRoot">
+                    <!--  RowSpan should be 2  -->
+                    <Setter Property="Grid.RowSpan" Value="1" />
+                    <Setter Property="Grid.Row" Value="0" />
+                    <Setter Property="Height"
+                            Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.ClosedPaneWidth}" />
+                </Style>
+                <Style Selector="^ /template/ Panel#ContentRoot">
+                    <Setter Property="Grid.Row" Value="1" />
+                    <Setter Property="Grid.RowSpan" Value="1" />
+                </Style>
+            </Style>
+
+            <Style Selector="^:inline">
+                <Style Selector="^ /template/ Panel#PART_PaneRoot">
+                    <Setter Property="Grid.RowSpan" Value="1" />
+                    <Setter Property="Grid.Row" Value="0" />
+                    <Setter Property="Height"
+                            Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.ClosedPaneWidth}" />
+                </Style>
+                <Style Selector="^ /template/ Panel#ContentRoot">
+                    <Setter Property="Grid.Row" Value="1" />
+                    <Setter Property="Grid.RowSpan" Value="1" />
+                </Style>
+            </Style>
+        </Style>
+
+        <Style Selector="^:right">
+            <Setter Property="Template">
+                <ControlTemplate>
+                    <Grid Name="Container" Background="{TemplateBinding Background}">
+                        <Grid.RowDefinitions>
+                            <RowDefinition Height="*" />
+                            <RowDefinition
+                                Height="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.PaneColumnGridLength}" />
+                        </Grid.RowDefinitions>
+
+                        <Panel
+                            Name="PART_PaneRoot"
+                            VerticalAlignment="Bottom"
+                            Background="{TemplateBinding PaneBackground}"
+                            ClipToBounds="True"
+                            ZIndex="100">
+                            <ContentPresenter
+                                Name="PART_PanePresenter"
+                                Content="{TemplateBinding Pane}"
+                                ContentTemplate="{TemplateBinding PaneTemplate}" />
+                            <Rectangle
+                                Name="HCPaneBorder"
+                                Height="1"
+                                VerticalAlignment="Top"
+                                Fill="{DynamicResource SplitViewSeparatorBackground}" />
+                        </Panel>
+
+                        <Panel Name="ContentRoot">
+                            <ContentPresenter
+                                Name="PART_ContentPresenter"
+                                Content="{TemplateBinding Content}"
+                                ContentTemplate="{TemplateBinding ContentTemplate}" />
+                            <Rectangle Name="LightDismissLayer" IsVisible="False" />
+                        </Panel>
+
+                    </Grid>
+                </ControlTemplate>
+            </Setter>
+
+            <Style Selector="^:overlay">
+                <Style Selector="^ /template/ Panel#PART_PaneRoot">
+                    <Setter Property="Height"
+                            Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.ClosedPaneWidth}" />
+                    <Setter Property="Grid.RowSpan" Value="2" />
+                    <Setter Property="Grid.Row" Value="1" />
+                </Style>
+                <Style Selector="^ /template/ Panel#ContentRoot">
+                    <Setter Property="Grid.Row" Value="0" />
+                    <Setter Property="Grid.RowSpan" Value="2" />
+                </Style>
+            </Style>
+
+            <Style Selector="^:compactinline">
+                <Style Selector="^ /template/ Panel#PART_PaneRoot">
+                    <Setter Property="Grid.RowSpan" Value="1" />
+                    <Setter Property="Grid.Row" Value="1" />
+                    <Setter Property="Height"
+                            Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.ClosedPaneWidth}" />
+                </Style>
+                <Style Selector="^ /template/ Panel#ContentRoot">
+                    <Setter Property="Grid.Row" Value="0" />
+                    <Setter Property="Grid.RowSpan" Value="1" />
+                </Style>
+            </Style>
+
+            <Style Selector="^:compactoverlay">
+                <Style Selector="^ /template/ Panel#PART_PaneRoot">
+                    <Setter Property="Grid.RowSpan" Value="2" />
+                    <Setter Property="Grid.Row" Value="1" />
+                    <Setter Property="Height"
+                            Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.ClosedPaneWidth}" />
+                </Style>
+                <Style Selector="^ /template/ Panel#ContentRoot">
+                    <Setter Property="Grid.Row" Value="0" />
+                    <Setter Property="Grid.RowSpan" Value="1" />
+                </Style>
+            </Style>
+
+            <Style Selector="^:inline">
+                <Style Selector="^ /template/ Panel#PART_PaneRoot">
+                    <Setter Property="Grid.RowSpan" Value="1" />
+                    <Setter Property="Grid.Row" Value="1" />
+                    <Setter Property="Height"
+                            Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.ClosedPaneWidth}" />
+                </Style>
+                <Style Selector="^ /template/ Panel#ContentRoot">
+                    <Setter Property="Grid.Row" Value="0" />
+                    <Setter Property="Grid.RowSpan" Value="1" />
+                </Style>
+            </Style>
+        </Style>
+
+        <Style Selector="^:open">
+            <Style Selector="^ /template/ Panel#PART_PaneRoot">
+                <Setter Property="Transitions">
+                    <Transitions>
+                        <DoubleTransition
+                            Easing="{StaticResource SplitViewPaneAnimationEasing}"
+                            Property="Height"
+                            Duration="{StaticResource SplitViewPaneAnimationOpenDuration}" />
+                    </Transitions>
+                </Setter>
+                <Setter Property="Height"
+                        Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=OpenPaneLength}" />
+            </Style>
+            <Style Selector="^ /template/ Rectangle#LightDismissLayer">
+                <Setter Property="Transitions">
+                    <Transitions>
+                        <DoubleTransition
+                            Easing="{StaticResource SplitViewPaneAnimationEasing}"
+                            Property="Opacity"
+                            Duration="{StaticResource SplitViewPaneAnimationOpenDuration}" />
+                    </Transitions>
+                </Setter>
+                <Setter Property="Opacity" Value="1.0" />
+            </Style>
+        </Style>
+
+        <Style Selector="^:closed">
+            <Style Selector="^ /template/ Panel#PART_PaneRoot">
+                <Setter Property="Transitions">
+                    <Transitions>
+                        <DoubleTransition
+                            Easing="{StaticResource SplitViewPaneAnimationEasing}"
+                            Property="Height"
+                            Duration="{StaticResource SplitViewPaneAnimationCloseDuration}" />
+                    </Transitions>
+                </Setter>
+                <Setter Property="Height"
+                        Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.ClosedPaneWidth}" />
+            </Style>
+            <Style Selector="^ /template/ Rectangle#LightDismissLayer">
+                <Setter Property="Transitions">
+                    <Transitions>
+                        <DoubleTransition
+                            Easing="{StaticResource SplitViewPaneAnimationEasing}"
+                            Property="Opacity"
+                            Duration="{StaticResource SplitViewPaneAnimationCloseDuration}" />
+                    </Transitions>
+                </Setter>
+                <Setter Property="Opacity" Value="0.0" />
+            </Style>
+        </Style>
+
         <Style Selector="^:lightDismiss /template/ Rectangle#LightDismissLayer">
             <Setter Property="Fill" Value="{DynamicResource SplitViewMaskBrush}" />
         </Style>

src/Semi.Avalonia/Controls/TabControl.axaml

@@ -2,10 +2,25 @@
     xmlns="https://github.com/avaloniaui"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
     x:CompileBindings="True">
-    <ControlTheme x:Key="{x:Type TabControl}" TargetType="TabControl">
-        <Setter Property="Margin" Value="0" />
-        <Setter Property="Padding" Value="0" />
-        <Setter Property="Background" Value="{DynamicResource TabControlBackground}" />
+    <Design.PreviewWith>
+        <StackPanel Width="400" Height="400" Margin="20">
+            <TabControl
+                Theme="{DynamicResource LineTabControl}"
+                TabStripPlacement="Top">
+                <TabItem Header="文档">
+                    <TextBlock Text="Content1" />
+                </TabItem>
+                <TabItem Header="快速起步" IsEnabled="False">
+                    <TextBlock Text="Content2" />
+                </TabItem>
+                <TabItem Header="帮助" IsSelected="True">
+                    <TextBlock Text="Content3" />
+                </TabItem>
+            </TabControl>
+        </StackPanel>
+    </Design.PreviewWith>
+
+    <ControlTheme x:Key="BaseTabControl" TargetType="TabControl">
         <Setter Property="Template">
             <ControlTemplate TargetType="TabControl">
                 <Border
@@ -17,8 +32,10 @@
                     CornerRadius="{TemplateBinding CornerRadius}">
                     <DockPanel>
                         <Panel DockPanel.Dock="{TemplateBinding TabStripPlacement}">
-                            <ItemsPresenter Name="PART_ItemsPresenter" ItemsPanel="{TemplateBinding ItemsPanel}" />
-                            <Border Name="PART_BorderSeparator" Background="{DynamicResource TabItemLinePipePressedBorderBrush}" />
+                            <ItemsPresenter
+                                Name="PART_ItemsPresenter"
+                                ItemsPanel="{TemplateBinding ItemsPanel}" />
+                            <Border Name="PART_BorderSeparator" />
                         </Panel>
                         <ContentPresenter
                             Name="PART_SelectedContentHost"
@@ -32,43 +49,132 @@
             </ControlTemplate>
         </Setter>
 
-        <Style Selector="^[TabStripPlacement=Left] /template/ ItemsPresenter#PART_ItemsPresenter > WrapPanel">
-            <Setter Property="Orientation" Value="Vertical" />
+        <Style Selector="^[TabStripPlacement=Left], ^[TabStripPlacement=Right]">
+            <Setter Property="TabControl.ItemsPanel">
+                <ItemsPanelTemplate>
+                    <WrapPanel Orientation="Vertical" />
+                </ItemsPanelTemplate>
+            </Setter>
         </Style>
-        <Style Selector="^[TabStripPlacement=Right] /template/ ItemsPresenter#PART_ItemsPresenter > WrapPanel">
-            <Setter Property="Orientation" Value="Vertical" />
-        </Style>
-        <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="^[TabStripPlacement=Right] /template/ Border#PART_BorderSeparator">
-            <Setter Property="Width" Value="1" />
-            <Setter Property="VerticalAlignment" Value="Stretch" />
-            <Setter Property="HorizontalAlignment" Value="Right" />
+
+        <Style Selector="^ /template/ Border#PART_BorderSeparator">
+            <Setter Property="Background" Value="{DynamicResource TabControlSeparatorBorderBrush}" />
         </Style>
+
         <Style Selector="^[TabStripPlacement=Top] /template/ Border#PART_BorderSeparator">
             <Setter Property="Height" Value="1" />
-            <Setter Property="HorizontalAlignment" Value="Stretch" />
             <Setter Property="VerticalAlignment" Value="Bottom" />
         </Style>
         <Style Selector="^[TabStripPlacement=Bottom] /template/ Border#PART_BorderSeparator">
             <Setter Property="Height" Value="1" />
-            <Setter Property="HorizontalAlignment" Value="Stretch" />
             <Setter Property="VerticalAlignment" Value="Top" />
         </Style>
-        <!--
-        <Style Selector="^[TabStripPlacement=Top] /template/ ItemsPresenter#PART_ItemsPresenter">
-            <Setter Property="Margin" Value="8" />
+        <Style Selector="^[TabStripPlacement=Left] /template/ Border#PART_BorderSeparator">
+            <Setter Property="Width" Value="1" />
+            <Setter Property="HorizontalAlignment" Value="Right" />
+        </Style>
+        <Style Selector="^[TabStripPlacement=Right] /template/ Border#PART_BorderSeparator">
+            <Setter Property="Width" Value="1" />
+            <Setter Property="HorizontalAlignment" Value="Left" />
         </Style>
-        -->
     </ControlTheme>
 
-    <ControlTheme x:Key="ScrollTabControl" TargetType="TabControl">
-        <Setter Property="Margin" Value="0" />
-        <Setter Property="Padding" Value="0" />
-        <Setter Property="Background" Value="{DynamicResource TabControlBackground}" />
+    <ControlTheme
+        x:Key="{x:Type TabControl}"
+        BasedOn="{StaticResource BaseTabControl}"
+        TargetType="TabControl">
+        <Style Selector="^[TabStripPlacement=Left] /template/ Border#PART_BorderSeparator">
+            <Setter Property="HorizontalAlignment" Value="Left" />
+        </Style>
+        <Style Selector="^[TabStripPlacement=Right] /template/ Border#PART_BorderSeparator">
+            <Setter Property="HorizontalAlignment" Value="Right" />
+        </Style>
+
+        <Style Selector="^.ReverseSeparator">
+            <Style Selector="^[TabStripPlacement=Left] /template/ Border#PART_BorderSeparator">
+                <Setter Property="HorizontalAlignment" Value="Right" />
+            </Style>
+            <Style Selector="^[TabStripPlacement=Left]">
+                <Setter Property="ItemContainerTheme">
+                    <ControlTheme
+                        BasedOn="{StaticResource {x:Type TabItem}}"
+                        TargetType="TabItem">
+                        <Style Selector="^[TabStripPlacement=Left]">
+                            <Setter Property="BorderThickness" Value="0 0 2 0" />
+                        </Style>
+                    </ControlTheme>
+                </Setter>
+            </Style>
+            <Style Selector="^[TabStripPlacement=Right] /template/ Border#PART_BorderSeparator">
+                <Setter Property="HorizontalAlignment" Value="Left" />
+            </Style>
+            <Style Selector="^[TabStripPlacement=Right]">
+                <Setter Property="ItemContainerTheme">
+                    <ControlTheme
+                        BasedOn="{StaticResource {x:Type TabItem}}"
+                        TargetType="TabItem">
+                        <Style Selector="^[TabStripPlacement=Right]">
+                            <Setter Property="BorderThickness" Value="2 0 0 0" />
+                        </Style>
+                    </ControlTheme>
+                </Setter>
+            </Style>
+        </Style>
+    </ControlTheme>
+
+    <ControlTheme
+        x:Key="LineTabControl"
+        BasedOn="{StaticResource BaseTabControl}"
+        TargetType="TabControl">
+        <Setter Property="ItemContainerTheme" Value="{StaticResource LineTabItem}" />
+    </ControlTheme>
+
+    <ControlTheme
+        x:Key="CardTabControl"
+        BasedOn="{StaticResource BaseTabControl}"
+        TargetType="TabControl">
+        <Setter Property="ItemContainerTheme" Value="{StaticResource CardTabItem}" />
+        <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>
+                        <Panel DockPanel.Dock="{TemplateBinding TabStripPlacement}">
+                            <Border Name="PART_BorderSeparator" />
+                            <ItemsPresenter
+                                Name="PART_ItemsPresenter"
+                                ItemsPanel="{TemplateBinding ItemsPanel}" />
+                        </Panel>
+                        <ContentPresenter
+                            Name="PART_SelectedContentHost"
+                            Margin="{TemplateBinding Padding}"
+                            HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
+                            VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
+                            Content="{TemplateBinding SelectedContent}"
+                            ContentTemplate="{TemplateBinding SelectedContentTemplate}" />
+                    </DockPanel>
+                </Border>
+            </ControlTemplate>
+        </Setter>
+    </ControlTheme>
+
+    <ControlTheme
+        x:Key="ButtonTabControl"
+        BasedOn="{StaticResource BaseTabControl}"
+        TargetType="TabControl">
+        <Setter Property="ItemContainerTheme" Value="{StaticResource ButtonTabItem}" />
+        <Style Selector="^ /template/ Border#PART_BorderSeparator">
+            <Setter Property="IsVisible" Value="False" />
+        </Style>
+    </ControlTheme>
+
+    <!-- ScrollTabControl -->
+    <ControlTheme x:Key="BaseScrollTabControl" TargetType="TabControl">
         <Setter Property="ItemsPanel">
             <ItemsPanelTemplate>
                 <VirtualizingStackPanel Orientation="Horizontal" />
@@ -85,10 +191,15 @@
                     CornerRadius="{TemplateBinding CornerRadius}">
                     <DockPanel>
                         <Panel DockPanel.Dock="{TemplateBinding TabStripPlacement}">
-                            <ScrollViewer Name="PART_ScrollViewer">
-                                <ItemsPresenter Name="PART_ItemsPresenter" ItemsPanel="{TemplateBinding ItemsPanel}" Margin="0 0 12 12" />
+                            <ScrollViewer
+                                Name="PART_ScrollViewer"
+                                HorizontalScrollBarVisibility="{TemplateBinding ScrollViewer.HorizontalScrollBarVisibility}"
+                                VerticalScrollBarVisibility="{TemplateBinding ScrollViewer.VerticalScrollBarVisibility}">
+                                <ItemsPresenter
+                                    Name="PART_ItemsPresenter"
+                                    ItemsPanel="{TemplateBinding ItemsPanel}" />
                             </ScrollViewer>
-                            <Border Name="PART_BorderSeparator" Background="{DynamicResource TabItemLinePipePressedBorderBrush}" />
+                            <Border Name="PART_BorderSeparator" />
                         </Panel>
                         <ContentPresenter
                             Name="PART_SelectedContentHost"
@@ -102,52 +213,149 @@
             </ControlTemplate>
         </Setter>
 
+        <Style Selector="^ /template/ Border#PART_BorderSeparator">
+            <Setter Property="Background" Value="{DynamicResource TabControlSeparatorBorderBrush}" />
+        </Style>
+
         <Style Selector="^[TabStripPlacement=Left], ^[TabStripPlacement=Right]">
-            <Style Selector="^ /template/ ItemsPresenter">
-                <Setter Property="ItemsPanel">
-                    <ItemsPanelTemplate>
-                        <VirtualizingStackPanel Orientation="Vertical" />
-                    </ItemsPanelTemplate>
-                </Setter>
-            </Style>
-        </Style>
-        <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="^[TabStripPlacement=Left] /template/ ScrollViewer#PART_ScrollViewer">
-            <Setter Property="HorizontalScrollBarVisibility" Value="Disabled" />
-            <Setter Property="VerticalScrollBarVisibility" Value="Auto" />
-        </Style>
-        <Style Selector="^[TabStripPlacement=Right] /template/ Border#PART_BorderSeparator">
-            <Setter Property="Width" Value="1" />
-            <Setter Property="VerticalAlignment" Value="Stretch" />
-            <Setter Property="HorizontalAlignment" Value="Right" />
-            <Setter Property="Margin" Value="0 0 12 0" />
-        </Style>
-        <Style Selector="^[TabStripPlacement=Right] /template/ ScrollViewer#PART_ScrollViewer">
-            <Setter Property="HorizontalScrollBarVisibility" Value="Disabled" />
-            <Setter Property="VerticalScrollBarVisibility" Value="Auto" />
+            <Setter Property="TabControl.ItemsPanel">
+                <ItemsPanelTemplate>
+                    <VirtualizingStackPanel />
+                </ItemsPanelTemplate>
+            </Setter>
         </Style>
+
         <Style Selector="^[TabStripPlacement=Top] /template/ Border#PART_BorderSeparator">
             <Setter Property="Height" Value="1" />
-            <Setter Property="HorizontalAlignment" Value="Stretch" />
             <Setter Property="VerticalAlignment" Value="Bottom" />
-            <Setter Property="Margin" Value="0 0 0 12" />
-        </Style>
-        <Style Selector="^[TabStripPlacement=Top] /template/ ScrollViewer#PART_ScrollViewer">
-            <Setter Property="HorizontalScrollBarVisibility" Value="Auto" />
-            <Setter Property="VerticalScrollBarVisibility" Value="Disabled" />
         </Style>
         <Style Selector="^[TabStripPlacement=Bottom] /template/ Border#PART_BorderSeparator">
             <Setter Property="Height" Value="1" />
-            <Setter Property="HorizontalAlignment" Value="Stretch" />
             <Setter Property="VerticalAlignment" Value="Top" />
         </Style>
-        <Style Selector="^[TabStripPlacement=Bottom] /template/ ScrollViewer#PART_ScrollViewer">
-            <Setter Property="HorizontalScrollBarVisibility" Value="Auto" />
-            <Setter Property="VerticalScrollBarVisibility" Value="Disabled" />
+        <Style Selector="^[TabStripPlacement=Left] /template/ Border#PART_BorderSeparator">
+            <Setter Property="Width" Value="1" />
+            <Setter Property="HorizontalAlignment" Value="Right" />
+        </Style>
+        <Style Selector="^[TabStripPlacement=Right] /template/ Border#PART_BorderSeparator">
+            <Setter Property="Width" Value="1" />
+            <Setter Property="HorizontalAlignment" Value="Left" />
+        </Style>
+
+        <Style Selector="^[TabStripPlacement=Top]">
+            <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Auto" />
+            <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Disabled" />
+        </Style>
+        <Style Selector="^[TabStripPlacement=Bottom]">
+            <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Auto" />
+            <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Disabled" />
+        </Style>
+        <Style Selector="^[TabStripPlacement=Left]">
+            <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Disabled" />
+            <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto" />
+        </Style>
+        <Style Selector="^[TabStripPlacement=Right]">
+            <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Disabled" />
+            <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto" />
+        </Style>
+    </ControlTheme>
+
+    <ControlTheme
+        x:Key="ScrollTabControl"
+        BasedOn="{StaticResource BaseScrollTabControl}"
+        TargetType="TabControl">
+        <Style Selector="^[TabStripPlacement=Left] /template/ Border#PART_BorderSeparator">
+            <Setter Property="HorizontalAlignment" Value="Left" />
+        </Style>
+        <Style Selector="^[TabStripPlacement=Right] /template/ Border#PART_BorderSeparator">
+            <Setter Property="HorizontalAlignment" Value="Right" />
+        </Style>
+
+        <Style Selector="^.ReverseSeparator">
+            <Style Selector="^[TabStripPlacement=Left] /template/ Border#PART_BorderSeparator">
+                <Setter Property="HorizontalAlignment" Value="Right" />
+            </Style>
+            <Style Selector="^[TabStripPlacement=Left]">
+                <Setter Property="ItemContainerTheme">
+                    <ControlTheme
+                        BasedOn="{StaticResource {x:Type TabItem}}"
+                        TargetType="TabItem">
+                        <Style Selector="^[TabStripPlacement=Left]">
+                            <Setter Property="BorderThickness" Value="0 0 2 0" />
+                        </Style>
+                    </ControlTheme>
+                </Setter>
+            </Style>
+            <Style Selector="^[TabStripPlacement=Right] /template/ Border#PART_BorderSeparator">
+                <Setter Property="HorizontalAlignment" Value="Left" />
+            </Style>
+            <Style Selector="^[TabStripPlacement=Right]">
+                <Setter Property="ItemContainerTheme">
+                    <ControlTheme
+                        BasedOn="{StaticResource {x:Type TabItem}}"
+                        TargetType="TabItem">
+                        <Style Selector="^[TabStripPlacement=Right]">
+                            <Setter Property="BorderThickness" Value="2 0 0 0" />
+                        </Style>
+                    </ControlTheme>
+                </Setter>
+            </Style>
+        </Style>
+    </ControlTheme>
+
+    <ControlTheme
+        x:Key="ScrollLineTabControl"
+        BasedOn="{StaticResource BaseScrollTabControl}"
+        TargetType="TabControl">
+        <Setter Property="ItemContainerTheme" Value="{StaticResource LineTabItem}" />
+    </ControlTheme>
+
+    <ControlTheme
+        x:Key="ScrollCardTabControl"
+        BasedOn="{StaticResource BaseScrollTabControl}"
+        TargetType="TabControl">
+        <Setter Property="ItemContainerTheme" Value="{StaticResource CardTabItem}" />
+        <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>
+                        <Panel DockPanel.Dock="{TemplateBinding TabStripPlacement}">
+                            <Border Name="PART_BorderSeparator" />
+                            <ScrollViewer
+                                Name="PART_ScrollViewer"
+                                HorizontalScrollBarVisibility="{TemplateBinding ScrollViewer.HorizontalScrollBarVisibility}"
+                                VerticalScrollBarVisibility="{TemplateBinding ScrollViewer.VerticalScrollBarVisibility}">
+                                <ItemsPresenter
+                                    Name="PART_ItemsPresenter"
+                                    ItemsPanel="{TemplateBinding ItemsPanel}" />
+                            </ScrollViewer>
+                        </Panel>
+                        <ContentPresenter
+                            Name="PART_SelectedContentHost"
+                            Margin="{TemplateBinding Padding}"
+                            HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
+                            VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
+                            Content="{TemplateBinding SelectedContent}"
+                            ContentTemplate="{TemplateBinding SelectedContentTemplate}" />
+                    </DockPanel>
+                </Border>
+            </ControlTemplate>
+        </Setter>
+    </ControlTheme>
+
+    <ControlTheme
+        x:Key="ScrollButtonTabControl"
+        BasedOn="{StaticResource BaseScrollTabControl}"
+        TargetType="TabControl">
+        <Setter Property="ItemContainerTheme" Value="{StaticResource ButtonTabItem}" />
+        <Style Selector="^ /template/ Border#PART_BorderSeparator">
+            <Setter Property="IsVisible" Value="False" />
         </Style>
     </ControlTheme>
 </ResourceDictionary>

src/Semi.Avalonia/Controls/TabItem.axaml

@@ -2,132 +2,231 @@
     xmlns="https://github.com/avaloniaui"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
     x:CompileBindings="True">
-    <!--  Theme: Card, Strip  default is Strip  -->
     <Design.PreviewWith>
-        <StackPanel Margin="20">
-            <TabItem Header="Hello">
-                <TextBlock Text="Content" />
-            </TabItem>
+        <StackPanel
+            Width="400"
+            Height="400"
+            Margin="20">
+            <TabControl TabStripPlacement="Top" Theme="{DynamicResource LineTabControl}">
+                <TabItem Header="文档">
+                    <TextBlock Text="Content1" />
+                </TabItem>
+                <TabItem Header="快速起步">
+                    <TextBlock Text="Content2" />
+                </TabItem>
+                <TabItem Header="帮助" IsSelected="True">
+                    <TextBlock Text="Content3" />
+                </TabItem>
+            </TabControl>
         </StackPanel>
     </Design.PreviewWith>
 
-    <ControlTheme x:Key="{x:Type TabItem}" TargetType="TabItem">
-        <Setter Property="Background" Value="{DynamicResource TabItemLinePipeBackground}" />
+    <ControlTheme x:Key="BaseTabItem" TargetType="TabItem">
         <Setter Property="Foreground" Value="{DynamicResource TabItemLineHeaderForeground}" />
-        <Setter Property="Margin" Value="0" />
-        <Setter Property="Padding" Value="8 4" />
-        <Setter Property="MinHeight" Value="5" />
-        <Setter Property="VerticalContentAlignment" Value="Center" />
+        <Setter Property="Background" Value="{DynamicResource TabItemLinePipeBackground}" />
         <Setter Property="Template">
             <ControlTemplate TargetType="TabItem">
-                <Border
-                    Name="PART_LayoutRoot"
+                <ContentPresenter
+                    Name="PART_HeaderPresenter"
+                    Padding="{TemplateBinding Padding}"
+                    HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
+                    VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
                     Background="{TemplateBinding Background}"
                     BorderBrush="{TemplateBinding BorderBrush}"
                     BorderThickness="{TemplateBinding BorderThickness}"
-                    CornerRadius="{TemplateBinding CornerRadius}">
-                    <Panel>
-                        <ContentPresenter
-                            Name="PART_ContentPresenter"
-                            Padding="{TemplateBinding Padding}"
-                            HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
-                            VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
-                            Content="{TemplateBinding Header}"
-                            ContentTemplate="{TemplateBinding HeaderTemplate}"
-                            FontFamily="{TemplateBinding FontFamily}"
-                            FontWeight="{TemplateBinding FontWeight}"
-                            Foreground="{TemplateBinding Foreground}" />
-                        <Border
-                            Name="PART_SelectedPipe"
-                            Background="{DynamicResource TabItemLinePipeBackground}"
-                            IsVisible="True"
-                            UseLayoutRounding="False" />
-                    </Panel>
-                </Border>
+                    Content="{TemplateBinding Header}"
+                    ContentTemplate="{TemplateBinding HeaderTemplate}"
+                    CornerRadius="{TemplateBinding CornerRadius}"
+                    FontFamily="{TemplateBinding FontFamily}"
+                    FontWeight="{TemplateBinding FontWeight}"
+                    Foreground="{TemplateBinding Foreground}" />
             </ControlTemplate>
         </Setter>
 
-        <!--  Selected state  -->
-        <Style Selector="^:selected /template/ ContentPresenter#PART_ContentPresenter">
-            <Setter Property="Foreground" Value="{DynamicResource TabItemLineHeaderSelectedForeground}" />
+        <Style Selector="^:selected /template/ ContentPresenter#PART_HeaderPresenter">
             <Setter Property="FontWeight" Value="{DynamicResource TabItemSelectedFontWeight}" />
+            <Setter Property="Foreground" Value="{DynamicResource TabItemLineHeaderSelectedForeground}" />
         </Style>
 
         <Style Selector="^:not(:selected)">
             <Setter Property="Cursor" Value="Hand" />
-            <Style Selector="^:pointerover /template/ ContentPresenter#PART_ContentPresenter">
+            <Style Selector="^:pointerover /template/ ContentPresenter#PART_HeaderPresenter">
                 <Setter Property="Foreground" Value="{DynamicResource TabItemLineHeaderPointeroverForeground}" />
             </Style>
-            <Style Selector="^:pointerover /template/ Border#PART_SelectedPipe">
-                <Setter Property="Background" Value="{DynamicResource TabItemLinePipePointeroverBorderBrush}" />
-            </Style>
-            <Style Selector="^:pressed /template/ Border#PART_SelectedPipe">
-                <Setter Property="Background" Value="{DynamicResource TabItemLinePipePressedBorderBrush}" />
-            </Style>
-        </Style>
-
-        <Style Selector="^:selected /template/ Border#PART_SelectedPipe">
-            <Setter Property="Background" Value="{DynamicResource TabItemLinePipeSelectedBackground}" />
-        </Style>
-
-        <!--  Selected Pressed state  -->
-        <Style Selector="^:selected:pressed /template/ Border#PART_LayoutRoot">
-            <Setter Property="Background" Value="{DynamicResource TabItemHeaderBackgroundSelectedPressed}" />
-            <Setter Property="TextElement.Foreground" Value="{DynamicResource TabItemHeaderForegroundSelectedPressed}" />
-        </Style>
-
-        <!--  Disabled state  -->
-        <Style Selector="^:disabled /template/ Border#PART_LayoutRoot">
-            <Setter Property="Background" Value="{DynamicResource TabItemHeaderBackgroundDisabled}" />
-            <Setter Property="TextElement.Foreground" Value="{DynamicResource TabItemHeaderForegroundDisabled}" />
-        </Style>
-
-        <!--  TabStripPlacement States Group  -->
-        <Style Selector="^[TabStripPlacement=Top]">
-            <Style Selector="^ /template/Border#PART_SelectedPipe">
-                <Setter Property="Height" Value="2" />
-                <Setter Property="Margin" Value="0" />
-                <Setter Property="HorizontalAlignment" Value="Stretch" />
-                <Setter Property="VerticalAlignment" Value="Bottom" />
-            </Style>
-            <Style Selector="^ /template/ ContentPresenter#PART_ContentPresenter">
-                <Setter Property="Margin" Value="0,0,0,4" />
-            </Style>
-        </Style>
-        <Style Selector="^[TabStripPlacement=Bottom]">
-            <Style Selector="^ /template/Border#PART_SelectedPipe">
-                <Setter Property="Height" Value="2" />
-                <Setter Property="Margin" Value="0" />
-                <Setter Property="HorizontalAlignment" Value="Stretch" />
-                <Setter Property="VerticalAlignment" Value="Top" />
-            </Style>
-            <Style Selector="^ /template/ ContentPresenter#PART_ContentPresenter">
-                <Setter Property="Margin" Value="0,4,0,0" />
-            </Style>
-        </Style>
-        <Style Selector="^[TabStripPlacement=Left]">
-            <Style Selector="^/template/ Border#PART_SelectedPipe">
-                <Setter Property="Width" Value="2" />
-                <Setter Property="Margin" Value="0" />
-                <Setter Property="HorizontalAlignment" Value="Left" />
-                <Setter Property="VerticalAlignment" Value="Stretch" />
-            </Style>
-            <Style Selector="^ /template/ Label#PART_ContentPresenter">
-                <Setter Property="Margin" Value="8,0,0,0" />
-            </Style>
-        </Style>
-        <Style Selector="^[TabStripPlacement=Right]">
-            <Setter Property="HorizontalContentAlignment" Value="Right" />
-            <Style Selector="^ /template/ Border#PART_SelectedPipe">
-                <Setter Property="Width" Value="2" />
-                <Setter Property="Margin" Value="0" />
-                <Setter Property="HorizontalAlignment" Value="Right" />
-                <Setter Property="VerticalAlignment" Value="Stretch" />
-            </Style>
-            <Style Selector="^ /template/ ContentPresenter#PART_ContentPresenter">
-                <Setter Property="Margin" Value="0,0,8,0" />
-            </Style>
         </Style>
     </ControlTheme>
 
+    <ControlTheme
+        x:Key="{x:Type TabItem}"
+        BasedOn="{StaticResource BaseTabItem}"
+        TargetType="TabItem">
+        <Setter Property="Padding" Value="8 4" />
+
+        <Style Selector="^:selected /template/ ContentPresenter#PART_HeaderPresenter">
+            <Setter Property="BorderBrush" Value="{DynamicResource TabItemLinePipeSelectedBackground}" />
+        </Style>
+
+        <Style Selector="^:not(:selected)">
+            <Style Selector="^:pointerover /template/ ContentPresenter#PART_HeaderPresenter">
+                <Setter Property="BorderBrush" Value="{DynamicResource TabItemLinePipePointeroverBorderBrush}" />
+            </Style>
+            <Style Selector="^:pressed /template/ ContentPresenter#PART_HeaderPresenter">
+                <Setter Property="BorderBrush" Value="{DynamicResource TabItemLinePipePressedBorderBrush}" />
+            </Style>
+        </Style>
+
+        <Style Selector="^[TabStripPlacement=Top]">
+            <Setter Property="BorderThickness" Value="0 0 0 2" />
+            <Setter Property="VerticalAlignment" Value="Center" />
+        </Style>
+        <Style Selector="^[TabStripPlacement=Bottom]">
+            <Setter Property="BorderThickness" Value="0 2 0 0" />
+            <Setter Property="VerticalAlignment" Value="Center" />
+        </Style>
+        <Style Selector="^[TabStripPlacement=Left]">
+            <Setter Property="BorderThickness" Value="2 0 0 0" />
+        </Style>
+        <Style Selector="^[TabStripPlacement=Right]">
+            <Setter Property="BorderThickness" Value="0 0 2 0" />
+        </Style>
+    </ControlTheme>
+
+    <ControlTheme
+        x:Key="LineTabItem"
+        BasedOn="{StaticResource BaseTabItem}"
+        TargetType="TabItem">
+        <Style Selector="^:selected /template/ ContentPresenter#PART_HeaderPresenter">
+            <Setter Property="BorderBrush" Value="{DynamicResource TabItemLinePipeSelectedBackground}" />
+        </Style>
+        <Style Selector="^[TabStripPlacement=Left], ^[TabStripPlacement=Right]">
+            <Style Selector="^:selected /template/ ContentPresenter#PART_HeaderPresenter">
+                <Setter Property="Background" Value="{DynamicResource TabItemLineHeaderSelectedBackground}" />
+            </Style>
+        </Style>
+
+        <Style Selector="^:not(:selected)">
+            <Style Selector="^:pointerover /template/ ContentPresenter#PART_HeaderPresenter">
+                <Setter Property="BorderBrush" Value="{DynamicResource TabItemLinePipePointeroverBorderBrush}" />
+            </Style>
+            <Style Selector="^:pressed /template/ ContentPresenter#PART_HeaderPresenter">
+                <Setter Property="BorderBrush" Value="{DynamicResource TabItemLinePipePressedBorderBrush}" />
+            </Style>
+            <Style Selector="^[TabStripPlacement=Left], ^[TabStripPlacement=Right]">
+                <Style Selector="^:pointerover /template/ ContentPresenter#PART_HeaderPresenter">
+                    <Setter Property="Background" Value="{DynamicResource TabItemLineHeaderPointeroverBackground}" />
+                </Style>
+                <Style Selector="^:pressed /template/ ContentPresenter#PART_HeaderPresenter">
+                    <Setter Property="Background" Value="{DynamicResource TabItemLineHeaderPressedBackground}" />
+                </Style>
+            </Style>
+        </Style>
+
+        <Style Selector="^[TabStripPlacement=Top]">
+            <Setter Property="Margin" Value="0 0 24 0" />
+            <Setter Property="Padding" Value="4 16 4 14" />
+            <Setter Property="BorderThickness" Value="0 0 0 2" />
+        </Style>
+        <Style Selector="^[TabStripPlacement=Bottom]">
+            <Setter Property="Margin" Value="0 0 24 0" />
+            <Setter Property="Padding" Value="4 14 4 16" />
+            <Setter Property="BorderThickness" Value="0 2 0 0" />
+        </Style>
+        <Style Selector="^[TabStripPlacement=Left]">
+            <Setter Property="Padding" Value="12" />
+            <Setter Property="BorderThickness" Value="2 0 0 0" />
+        </Style>
+        <Style Selector="^[TabStripPlacement=Right]">
+            <Setter Property="Padding" Value="12" />
+            <Setter Property="BorderThickness" Value="0 0 2 0" />
+        </Style>
+    </ControlTheme>
+
+    <ControlTheme
+        x:Key="CardTabItem"
+        BasedOn="{StaticResource BaseTabItem}"
+        TargetType="TabItem">
+        <Setter Property="BorderBrush" Value="{DynamicResource TabControlSeparatorBorderBrush}" />
+
+        <Style Selector="^:selected /template/ ContentPresenter#PART_HeaderPresenter">
+            <Setter Property="Background" Value="{DynamicResource TabItemCardHeaderSelectedBackground}" />
+        </Style>
+
+        <Style Selector="^:not(:selected)">
+            <Style Selector="^:pointerover /template/ ContentPresenter#PART_HeaderPresenter">
+                <Setter Property="Background" Value="{DynamicResource TabItemCardHeaderPointeroverBackground}" />
+            </Style>
+            <Style Selector="^:pressed /template/ ContentPresenter#PART_HeaderPresenter">
+                <Setter Property="Background" Value="{DynamicResource TabItemCardHeaderPressedBackground}" />
+            </Style>
+        </Style>
+
+        <Style Selector="^[TabStripPlacement=Top]">
+            <Setter Property="Margin" Value="0 0 8 0" />
+            <Setter Property="MinHeight" Value="{DynamicResource TabItemCardDefaultHeight}" />
+            <Setter Property="VerticalContentAlignment" Value="Center" />
+            <Setter Property="Padding" Value="12 0" />
+            <Setter Property="CornerRadius" Value="3 3 0 0" />
+            <Style Selector="^:selected">
+                <Setter Property="BorderThickness" Value="1 1 1 0" />
+            </Style>
+        </Style>
+        <Style Selector="^[TabStripPlacement=Bottom]">
+            <Setter Property="Margin" Value="0 0 8 0" />
+            <Setter Property="MinHeight" Value="{DynamicResource TabItemCardDefaultHeight}" />
+            <Setter Property="VerticalContentAlignment" Value="Center" />
+            <Setter Property="Padding" Value="12 0" />
+            <Setter Property="CornerRadius" Value="0 0 3 3" />
+            <Style Selector="^:selected">
+                <Setter Property="BorderThickness" Value="1 0 1 1" />
+            </Style>
+        </Style>
+        <Style Selector="^[TabStripPlacement=Left]">
+            <Setter Property="Margin" Value="0 0 0 8" />
+            <Setter Property="Padding" Value="12 8" />
+            <Setter Property="CornerRadius" Value="3 0 0 3" />
+            <Style Selector="^:selected">
+                <Setter Property="BorderThickness" Value="1 1 0 1" />
+            </Style>
+        </Style>
+        <Style Selector="^[TabStripPlacement=Right]">
+            <Setter Property="Margin" Value="0 0 0 8" />
+            <Setter Property="Padding" Value="12 8" />
+            <Setter Property="CornerRadius" Value="0 3 3 0" />
+            <Style Selector="^:selected">
+                <Setter Property="BorderThickness" Value="0 1 1 1" />
+            </Style>
+        </Style>
+    </ControlTheme>
+
+    <ControlTheme
+        x:Key="ButtonTabItem"
+        BasedOn="{StaticResource BaseTabItem}"
+        TargetType="TabItem">
+        <Setter Property="CornerRadius" Value="{DynamicResource SemiBorderRadiusSmall}" />
+
+        <Style Selector="^:selected /template/ ContentPresenter#PART_HeaderPresenter">
+            <Setter Property="Foreground" Value="{DynamicResource TabItemButtonHeaderSelectedForeground}" />
+            <Setter Property="Background" Value="{DynamicResource TabItemButtonHeaderSelectedBackground}" />
+        </Style>
+
+        <Style Selector="^:not(:selected)">
+            <Style Selector="^:pointerover /template/ ContentPresenter#PART_HeaderPresenter">
+                <Setter Property="Background" Value="{DynamicResource TabItemButtonHeaderPointeroverBackground}" />
+            </Style>
+            <Style Selector="^:pressed /template/ ContentPresenter#PART_HeaderPresenter">
+                <Setter Property="Background" Value="{DynamicResource TabItemButtonHeaderPressedBackground}" />
+            </Style>
+        </Style>
+
+        <Style Selector="^[TabStripPlacement=Top], ^[TabStripPlacement=Bottom]">
+            <Setter Property="TabItem.Margin" Value="0 0 8 0" />
+            <Setter Property="TabItem.VerticalContentAlignment" Value="Center" />
+            <Setter Property="TabItem.MinHeight" Value="{DynamicResource TabItemCardDefaultHeight}" />
+            <Setter Property="TabItem.Padding" Value="12 0" />
+        </Style>
+        <Style Selector="^[TabStripPlacement=Left], ^[TabStripPlacement=Right]">
+            <Setter Property="TabItem.Margin" Value="0 0 0 8" />
+            <Setter Property="TabItem.Padding" Value="12 8" />
+        </Style>
+    </ControlTheme>
 </ResourceDictionary>

src/Semi.Avalonia/Controls/TabStrip.axaml

@@ -2,108 +2,215 @@
     xmlns="https://github.com/avaloniaui"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
     x:CompileBindings="True">
+    <Design.PreviewWith>
+        <StackPanel Width="400" Height="400" Margin="20">
+            <TabStrip Theme="{DynamicResource LineTabStrip}">
+                <TabStripItem Content="文档" />
+                <TabStripItem Content="快速起步" IsEnabled="False" />
+                <TabStripItem Content="帮助" IsSelected="True" />
+            </TabStrip>
+        </StackPanel>
+    </Design.PreviewWith>
+
     <ControlTheme x:Key="{x:Type TabStrip}" TargetType="TabStrip">
+        <Setter Property="VerticalAlignment" Value="Top" />
         <Setter Property="Template">
-            <ControlTemplate>
+            <ControlTemplate TargetType="TabStrip">
                 <Border
-                    Padding="{TemplateBinding Padding}"
+                    HorizontalAlignment="{TemplateBinding HorizontalAlignment}"
+                    VerticalAlignment="{TemplateBinding VerticalAlignment}"
                     Background="{TemplateBinding Background}"
                     BorderBrush="{TemplateBinding BorderBrush}"
                     BorderThickness="{TemplateBinding BorderThickness}"
                     CornerRadius="{TemplateBinding CornerRadius}">
                     <Panel>
-                        <ItemsPresenter Name="PART_ItemsPresenter" ItemsPanel="{TemplateBinding ItemsPanel}" />
-                        <Border
-                            Name="PART_BorderSeparator"
-                            Height="1"
-                            HorizontalAlignment="Stretch"
-                            VerticalAlignment="Bottom"
-                            Background="{DynamicResource TabItemLinePipePressedBorderBrush}" />
+                        <ItemsPresenter
+                            Name="PART_ItemsPresenter"
+                            ItemsPanel="{TemplateBinding ItemsPanel}" />
+                        <Border Name="PART_BorderSeparator" />
                     </Panel>
                 </Border>
             </ControlTemplate>
         </Setter>
-        <Setter Property="ItemsPanel">
-            <ItemsPanelTemplate>
-                <WrapPanel />
-            </ItemsPanelTemplate>
+
+        <Style Selector="^ /template/ Border#PART_BorderSeparator">
+            <Setter Property="Background" Value="{DynamicResource TabControlSeparatorBorderBrush}" />
+            <Setter Property="Height" Value="1" />
+            <Setter Property="VerticalAlignment" Value="Bottom" />
+        </Style>
+    </ControlTheme>
+
+    <ControlTheme
+        x:Key="LineTabStrip"
+        BasedOn="{StaticResource {x:Type TabStrip}}"
+        TargetType="TabStrip">
+        <Setter Property="ItemContainerTheme" Value="{StaticResource LineTabStripItem}" />
+    </ControlTheme>
+
+    <ControlTheme
+        x:Key="CardTabStrip"
+        BasedOn="{StaticResource {x:Type TabStrip}}"
+        TargetType="TabStrip">
+        <Setter Property="ItemContainerTheme" Value="{StaticResource CardTabStripItem}" />
+        <Setter Property="VerticalAlignment" Value="Top" />
+        <Setter Property="Template">
+            <ControlTemplate TargetType="TabStrip">
+                <Border
+                    HorizontalAlignment="{TemplateBinding HorizontalAlignment}"
+                    VerticalAlignment="{TemplateBinding VerticalAlignment}"
+                    Background="{TemplateBinding Background}"
+                    BorderBrush="{TemplateBinding BorderBrush}"
+                    BorderThickness="{TemplateBinding BorderThickness}"
+                    CornerRadius="{TemplateBinding CornerRadius}">
+                    <Panel>
+                        <Border Name="PART_BorderSeparator" />
+                        <ItemsPresenter
+                            Name="PART_ItemsPresenter"
+                            ItemsPanel="{TemplateBinding ItemsPanel}" />
+                    </Panel>
+                </Border>
+            </ControlTemplate>
         </Setter>
     </ControlTheme>
 
-    <ControlTheme x:Key="{x:Type TabStripItem}" TargetType="TabStripItem">
-        <Setter Property="Background" Value="{DynamicResource TabItemLinePipeBackground}" />
+    <ControlTheme
+        x:Key="ButtonTabStrip"
+        BasedOn="{StaticResource {x:Type TabStrip}}"
+        TargetType="TabStrip">
+        <Setter Property="ItemContainerTheme" Value="{StaticResource ButtonTabStripItem}" />
+        <Style Selector="^ /template/ Border#PART_BorderSeparator">
+            <Setter Property="IsVisible" Value="False" />
+        </Style>
+    </ControlTheme>
+
+
+    <ControlTheme x:Key="BaseTabStripItem" TargetType="TabStripItem">
         <Setter Property="Foreground" Value="{DynamicResource TabItemLineHeaderForeground}" />
-        <Setter Property="Margin" Value="0" />
-        <Setter Property="Padding" Value="8 4" />
-        <Setter Property="MinHeight" Value="5" />
-        <Setter Property="VerticalContentAlignment" Value="Center" />
+        <Setter Property="Background" Value="{DynamicResource TabItemLinePipeBackground}" />
         <Setter Property="Template">
             <ControlTemplate TargetType="TabStripItem">
-                <Border
-                    Name="PART_LayoutRoot"
+                <ContentPresenter
+                    Name="PART_ContentPresenter"
+                    Padding="{TemplateBinding Padding}"
+                    HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
+                    VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
                     Background="{TemplateBinding Background}"
                     BorderBrush="{TemplateBinding BorderBrush}"
                     BorderThickness="{TemplateBinding BorderThickness}"
-                    CornerRadius="{TemplateBinding CornerRadius}">
-                    <Panel>
-                        <ContentPresenter
-                            Name="PART_ContentPresenter"
-                            Margin="0,0,0,4"
-                            Padding="{TemplateBinding Padding}"
-                            HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
-                            VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
-                            Content="{TemplateBinding Content}"
-                            ContentTemplate="{TemplateBinding ContentTemplate}"
-                            FontFamily="{TemplateBinding FontFamily}"
-                            FontWeight="{TemplateBinding FontWeight}"
-                            Foreground="{TemplateBinding Foreground}" />
-                        <Border
-                            Name="PART_SelectedPipe"
-                            Height="2"
-                            Margin="0"
-                            HorizontalAlignment="Stretch"
-                            VerticalAlignment="Bottom"
-                            Background="{DynamicResource TabItemLinePipeBackground}"
-                            IsVisible="True"
-                            UseLayoutRounding="False" />
-                    </Panel>
-                </Border>
+                    Content="{TemplateBinding Content}"
+                    ContentTemplate="{TemplateBinding ContentTemplate}"
+                    CornerRadius="{TemplateBinding CornerRadius}"
+                    FontFamily="{TemplateBinding FontFamily}"
+                    FontWeight="{TemplateBinding FontWeight}"
+                    Foreground="{TemplateBinding Foreground}" />
             </ControlTemplate>
         </Setter>
 
-        <!--  Selected state  -->
         <Style Selector="^:selected /template/ ContentPresenter#PART_ContentPresenter">
-            <Setter Property="Foreground" Value="{DynamicResource TabItemLineHeaderSelectedForeground}" />
             <Setter Property="FontWeight" Value="{DynamicResource TabItemSelectedFontWeight}" />
+            <Setter Property="Foreground" Value="{DynamicResource TabItemLineHeaderSelectedForeground}" />
         </Style>
 
         <Style Selector="^:not(:selected)">
             <Setter Property="Cursor" Value="Hand" />
-            <Style Selector="^:pointerover /template/ Label#PART_ContentPresenter">
+            <Style Selector="^:pointerover /template/ ContentPresenter#PART_ContentPresenter">
                 <Setter Property="Foreground" Value="{DynamicResource TabItemLineHeaderPointeroverForeground}" />
             </Style>
-            <Style Selector="^:pointerover /template/ Border#PART_SelectedPipe">
-                <Setter Property="Background" Value="{DynamicResource TabItemLinePipePointeroverBorderBrush}" />
-            </Style>
-            <Style Selector="^:pressed /template/ Border#PART_SelectedPipe">
-                <Setter Property="Background" Value="{DynamicResource TabItemLinePipePressedBorderBrush}" />
-            </Style>
-        </Style>
-
-        <Style Selector="^:selected /template/ Border#PART_SelectedPipe">
-            <Setter Property="Background" Value="{DynamicResource TabItemLinePipeSelectedBackground}" />
-        </Style>
-
-        <!--  Selected Pressed state  -->
-        <Style Selector="^:selected:pressed /template/ Border#PART_LayoutRoot">
-            <Setter Property="Background" Value="{DynamicResource TabItemHeaderBackgroundSelectedPressed}" />
-            <Setter Property="TextElement.Foreground" Value="{DynamicResource TabItemHeaderForegroundSelectedPressed}" />
-        </Style>
-
-        <!--  Disabled state  -->
-        <Style Selector="^:disabled /template/ Border#PART_LayoutRoot">
-            <Setter Property="Background" Value="{DynamicResource TabItemHeaderBackgroundDisabled}" />
-            <Setter Property="TextElement.Foreground" Value="{DynamicResource TabItemHeaderForegroundDisabled}" />
         </Style>
     </ControlTheme>
+
+    <ControlTheme
+        x:Key="{x:Type TabStripItem}"
+        BasedOn="{StaticResource BaseTabStripItem}"
+        TargetType="TabStripItem">
+        <Setter Property="Padding" Value="8 4" />
+        <Setter Property="BorderThickness" Value="0 0 0 2" />
+        <Setter Property="VerticalAlignment" Value="Center" />
+        <Style Selector="^:selected /template/ ContentPresenter#PART_ContentPresenter">
+            <Setter Property="BorderBrush" Value="{DynamicResource TabItemLinePipeSelectedBackground}" />
+        </Style>
+
+        <Style Selector="^:not(:selected)">
+            <Style Selector="^:pointerover /template/ ContentPresenter#PART_ContentPresenter">
+                <Setter Property="BorderBrush" Value="{DynamicResource TabItemLinePipePointeroverBorderBrush}" />
+            </Style>
+            <Style Selector="^:pressed /template/ ContentPresenter#PART_ContentPresenter">
+                <Setter Property="BorderBrush" Value="{DynamicResource TabItemLinePipePressedBorderBrush}" />
+            </Style>
+        </Style>
+    </ControlTheme>
+
+    <ControlTheme
+        x:Key="LineTabStripItem"
+        BasedOn="{StaticResource BaseTabStripItem}"
+        TargetType="TabStripItem">
+        <Setter Property="Margin" Value="0 0 24 0" />
+        <Setter Property="Padding" Value="4 16 4 14" />
+        <Setter Property="BorderThickness" Value="0 0 0 2" />
+        <Style Selector="^:selected /template/ ContentPresenter#PART_ContentPresenter">
+            <Setter Property="BorderBrush" Value="{DynamicResource TabItemLinePipeSelectedBackground}" />
+        </Style>
+
+        <Style Selector="^:not(:selected)">
+            <Style Selector="^:pointerover /template/ ContentPresenter#PART_ContentPresenter">
+                <Setter Property="BorderBrush" Value="{DynamicResource TabItemLinePipePointeroverBorderBrush}" />
+            </Style>
+            <Style Selector="^:pressed /template/ ContentPresenter#PART_ContentPresenter">
+                <Setter Property="BorderBrush" Value="{DynamicResource TabItemLinePipePressedBorderBrush}" />
+            </Style>
+        </Style>
+    </ControlTheme>
+
+    <ControlTheme
+        x:Key="CardTabStripItem"
+        BasedOn="{StaticResource BaseTabStripItem}"
+        TargetType="TabStripItem">
+        <Setter Property="BorderBrush" Value="{DynamicResource TabControlSeparatorBorderBrush}" />
+        <Setter Property="Margin" Value="0 0 8 0" />
+        <Setter Property="MinHeight" Value="{DynamicResource TabItemCardDefaultHeight}" />
+        <Setter Property="VerticalContentAlignment" Value="Center" />
+        <Setter Property="Padding" Value="12 0" />
+        <Setter Property="CornerRadius" Value="3 3 0 0" />
+        <Style Selector="^:selected">
+            <Setter Property="BorderThickness" Value="1 1 1 0" />
+        </Style>
+        <Style Selector="^:selected /template/ ContentPresenter#PART_ContentPresenter">
+            <Setter Property="Background" Value="{DynamicResource TabItemCardHeaderSelectedBackground}" />
+        </Style>
+
+        <Style Selector="^:not(:selected)">
+            <Style Selector="^:pointerover /template/ ContentPresenter#PART_ContentPresenter">
+                <Setter Property="Background" Value="{DynamicResource TabItemCardHeaderPointeroverBackground}" />
+            </Style>
+            <Style Selector="^:pressed /template/ ContentPresenter#PART_ContentPresenter">
+                <Setter Property="Background" Value="{DynamicResource TabItemCardHeaderPressedBackground}" />
+            </Style>
+        </Style>
+    </ControlTheme>
+
+    <ControlTheme
+        x:Key="ButtonTabStripItem"
+        BasedOn="{StaticResource BaseTabStripItem}"
+        TargetType="TabStripItem">
+        <Setter Property="Margin" Value="0 0 8 0" />
+        <Setter Property="VerticalContentAlignment" Value="Center" />
+        <Setter Property="MinHeight" Value="{DynamicResource TabItemCardDefaultHeight}" />
+        <Setter Property="Padding" Value="12 0" />
+        <Setter Property="CornerRadius" Value="{DynamicResource SemiBorderRadiusSmall}" />
+
+        <Style Selector="^:selected /template/ ContentPresenter#PART_ContentPresenter">
+            <Setter Property="Foreground" Value="{DynamicResource TabItemButtonHeaderSelectedForeground}" />
+            <Setter Property="Background" Value="{DynamicResource TabItemButtonHeaderSelectedBackground}" />
+        </Style>
+
+        <Style Selector="^:not(:selected)">
+            <Style Selector="^:pointerover /template/ ContentPresenter#PART_ContentPresenter">
+                <Setter Property="Background" Value="{DynamicResource TabItemButtonHeaderPointeroverBackground}" />
+            </Style>
+            <Style Selector="^:pressed /template/ ContentPresenter#PART_ContentPresenter">
+                <Setter Property="Background" Value="{DynamicResource TabItemButtonHeaderPressedBackground}" />
+            </Style>
+        </Style>
+    </ControlTheme>
+
 </ResourceDictionary>

src/Semi.Avalonia/Controls/ToggleButton.axaml

@@ -59,10 +59,6 @@
             </ControlTemplate>
         </Setter>
 
-        <Style Selector="^:pressed">
-            <Setter Property="RenderTransform" Value="scale(0.98)" />
-        </Style>
-
         <Style Selector="^:pointerover">
             <Setter Property="Background" Value="{DynamicResource ToggleButtonDefaultPointeroverBackground}" />
         </Style>

src/Semi.Avalonia/Controls/ToggleSwitch.axaml

@@ -432,10 +432,6 @@
             </ControlTemplate>
         </Setter>
 
-        <Style Selector="^:pressed">
-            <Setter Property="RenderTransform" Value="scale(0.98)" />
-        </Style>
-
         <Style Selector="^:pointerover">
             <Setter Property="BorderBrush" Value="{DynamicResource ButtonDefaultPointeroverBorderBrush}" />
             <Setter Property="Background" Value="{DynamicResource ButtonDefaultPointeroverBackground}" />

src/Semi.Avalonia/Controls/TreeView.axaml

@@ -1,7 +1,7 @@
 <ResourceDictionary
     xmlns="https://github.com/avaloniaui"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-    xmlns:converters="clr-namespace:Avalonia.Controls.Converters;assembly=Avalonia.Controls"
+    xmlns:converters="clr-namespace:Semi.Avalonia.Converters"
     x:CompileBindings="True">
 
     <Design.PreviewWith>
@@ -40,8 +40,8 @@
                         AllowAutoHide="{TemplateBinding (ScrollViewer.AllowAutoHide)}"
                         Background="{TemplateBinding Background}"
                         HorizontalScrollBarVisibility="{TemplateBinding (ScrollViewer.HorizontalScrollBarVisibility)}"
-                        IsScrollChainingEnabled="{TemplateBinding (ScrollViewer.IsScrollChainingEnabled)}"
                         IsDeferredScrollingEnabled="{TemplateBinding (ScrollViewer.IsDeferredScrollingEnabled)}"
+                        IsScrollChainingEnabled="{TemplateBinding (ScrollViewer.IsScrollChainingEnabled)}"
                         VerticalScrollBarVisibility="{TemplateBinding (ScrollViewer.VerticalScrollBarVisibility)}">
                         <ItemsPresenter
                             Name="PART_ItemsPresenter"
@@ -53,10 +53,6 @@
         </Setter>
     </ControlTheme>
 
-    <converters:MarginMultiplierConverter
-        x:Key="TreeViewItemLeftMarginConverter"
-        Indent="{StaticResource TreeViewItemIndent}"
-        Left="True" />
     <ControlTheme x:Key="ToggleButtonTreeViewItemIconButton" TargetType="ToggleButton">
         <Setter Property="Margin" Value="0" />
         <Setter Property="Cursor" Value="Hand" />
@@ -71,10 +67,10 @@
                     Background="Transparent">
                     <PathIcon
                         Name="PART_ExpandIconPath"
-                        Theme="{StaticResource InnerPathIcon}"
                         Classes="Small"
                         Data="{DynamicResource ExpanderIconData}"
-                        Foreground="{DynamicResource TreeViewItemIconDefaultForeground}">
+                        Foreground="{DynamicResource TreeViewItemIconDefaultForeground}"
+                        Theme="{StaticResource InnerPathIcon}">
                         <PathIcon.Transitions>
                             <Transitions>
                                 <TransformOperationsTransition Property="RenderTransform" Duration="0.1" />
@@ -110,16 +106,19 @@
                         CornerRadius="{TemplateBinding CornerRadius}"
                         Focusable="True"
                         TemplatedControl.IsTemplateFocusTarget="True">
-                        <Grid
-                            Name="PART_Header"
-                            Margin="{TemplateBinding Level, Mode=OneWay, Converter={StaticResource TreeViewItemLeftMarginConverter}}"
-                            ColumnDefinitions="Auto, *">
+                        <Grid Name="PART_Header" ColumnDefinitions="Auto, *">
+                            <Grid.Margin>
+                                <MultiBinding Converter="{x:Static converters:TreeViewItemIndentConverter.Instance}">
+                                    <Binding Path="Level" RelativeSource="{RelativeSource TemplatedParent}" />
+                                    <DynamicResource ResourceKey="TreeViewItemIndent" />
+                                </MultiBinding>
+                            </Grid.Margin>
                             <ToggleButton
                                 Name="PART_ExpandCollapseChevron"
                                 Grid.Column="0"
                                 Padding="{DynamicResource TreeViewItemIconMargin}"
                                 Focusable="False"
-                                IsChecked="{TemplateBinding IsExpanded, Mode=TwoWay}"
+                                IsChecked="{TemplateBinding IsExpanded,Mode=TwoWay}"
                                 Theme="{StaticResource ToggleButtonTreeViewItemIconButton}" />
                             <ContentPresenter
                                 Name="PART_HeaderPresenter"

src/Semi.Avalonia/Converters/TreeViewItemIndentConverter.cs

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

src/Semi.Avalonia/Icons/Icon.axaml

@@ -344,18 +344,6 @@
     <StreamGeometry x:Key="SemiIconComponentStroked">
         M1 9a1 1 0 0 1 1-1h20a1 1 0 0 1 1 1v6a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V9Zm2 1v4h18v-4H3Z
     </StreamGeometry>
-    <!-- <StreamGeometry x:Key="SemiIconConfigStroked"> -->
-    <!--     M16.95 4.24c0-.63.5-1.13 1.13-1.13h3.31a1.13 1.13 0 0 1 0 2.25h-3.31c-.62 0-1.13-.5-1.13-1.12Z, -->
-    <!--     M13.66.9c.62 0 1.12.5 1.12 1.13v4.42a1.13 1.13 0 0 1-2.25 0V2.03c0-.63.5-1.13 1.13-1.13Z, -->
-    <!--     M.38 4.24c0-.63.5-1.13 1.12-1.13h12.16a1.13 1.13 0 0 1 0 2.25H1.5c-.62 0-1.13-.5-1.13-1.12Z, -->
-    <!--     M.38 11.97c0-.62.5-1.12 1.12-1.12h4.42a1.13 1.13 0 0 1 0 2.25H1.5c-.62 0-1.13-.5-1.13-1.13Z, -->
-    <!--     M10.34 8.64c.62 0 1.13.5 1.13 1.12v4.42a1.13 1.13 0 0 1-2.25 0V9.76c0-.62.5-1.12 1.12-1.12Z, -->
-    <!--     M9.22 11.97c0-.62.5-1.12 1.12-1.12H22.5a1.13 1.13 0 0 1 0 2.25H10.34c-.62 0-1.12-.5-1.12-1.13Z, -->
-    <!--     M16.95 19.71c0-.62.5-1.13 1.13-1.13h3.31a1.13 1.13 0 0 1 0 2.25h-3.31c-.62 0-1.13-.5-1.13-1.12Z, -->
-    <!--     M13.66 16.37c.62 0 1.12.5 1.12 1.13v4.42a1.13 1.13 0 0 1-2.25 0V17.5c0-.62.5-1.13 1.13-1.13Z, -->
-    <!--     M.38 19.71c0-.62.5-1.13 1.12-1.13h12.16a1.13 1.13 0 0 1 0 2.25H1.5c-.62 0-1.13-.5-1.13-1.12Z, -->
-    <!--     clip0_1478_52 -->
-    <!-- </StreamGeometry> -->
     <StreamGeometry x:Key="SemiIconConnectionPoint1">
         M1 3c0-1.1.9-2 2-2h18a2 2 0 0 1 2 2v6a2 2 0 0 1-2 2H7.5v4c0 .83.67 1.5 1.5 1.5h4V15c0-1.1.9-2 2-2h6a2 2 0 0 1 2 2v6a2 2 0 0 1-2 2h-6a2 2 0 0 1-2-2v-1.5H9A4.5 4.5 0 0 1 4.5 15v-4H3a2 2 0 0 1-2-2V3Z
     </StreamGeometry>
@@ -417,11 +405,6 @@
     <StreamGeometry x:Key="SemiIconDescend2">
         M8 4.5a1.5 1.5 0 1 0-3 0v11.38l-1.44-1.44a1.5 1.5 0 0 0-2.12 2.12l4 4a1.5 1.5 0 0 0 2.12 0l4-4a1.5 1.5 0 0 0-2.12-2.12L8 15.88V4.5ZM13.5 3a1.5 1.5 0 0 0 0 3h8a1.5 1.5 0 0 0 0-3h-8ZM12 12c0-.83.67-1.5 1.5-1.5h8a1.5 1.5 0 0 1 0 3h-8A1.5 1.5 0 0 1 12 12Zm0 7.5c0-.83.67-1.5 1.5-1.5h8a1.5 1.5 0 0 1 0 3h-8a1.5 1.5 0 0 1-1.5-1.5Z
     </StreamGeometry>
-    <!-- <StreamGeometry x:Key="SemiIconDesktop"> -->
-    <!--     M2.5 14.5v-9c0-1.1.9-2 2-2h15a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-15a2 2 0 0 1-2-2Z, -->
-    <!--     M7.5 21.5h9, -->
-    <!--     M12 15.5v5 -->
-    <!-- </StreamGeometry> -->
     <StreamGeometry x:Key="SemiIconDisc">
         M23 12a11 11 0 1 1-22 0 11 11 0 0 1 22 0Zm-6 0a5 5 0 1 1-10 0 5 5 0 0 1 10 0Zm-5 3a3 3 0 1 0 0-6 3 3 0 0 0 0 6Z
     </StreamGeometry>
@@ -513,10 +496,6 @@
         M1 5.96a1 1 0 0 1 1.59-.8l8.3 6.03a1 1 0 0 1 0 1.62l-8.3 6.03a1 1 0 0 1-1.59-.8V5.96Z,
         M12 5.96a1 1 0 0 1 1.59-.8l8.3 6.03a1 1 0 0 1 0 1.62l-8.3 6.03a1 1 0 0 1-1.59-.8V5.96Z
     </StreamGeometry>
-    <StreamGeometry x:Key="SemiIconFastFoward">
-        M1 5.96a1 1 0 0 1 1.59-.8l8.3 6.03a1 1 0 0 1 0 1.62l-8.3 6.03a1 1 0 0 1-1.59-.8V5.96Z,
-        M12 5.96a1 1 0 0 1 1.59-.8l8.3 6.03a1 1 0 0 1 0 1.62l-8.3 6.03a1 1 0 0 1-1.59-.8V5.96Z
-    </StreamGeometry>
     <StreamGeometry x:Key="SemiIconFavoriteList">
         M13.25 1.9c-.4-1.2-2.1-1.2-2.5 0L8.76 8.02H2.31a1.3 1.3 0 0 0-.77 2.37l5.22 3.78-2 6.11c-.39 1.2 1 2.21 2.03 1.46L12 17.96V13a1 1 0 0 1 1-1h7.23l2.23-1.61a1.3 1.3 0 0 0-.77-2.37h-6.45l-2-6.12Z,
         M14 14.5a.5.5 0 0 1 .5-.5h8a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-.5.5h-8a.5.5 0 0 1-.5-.5v-2Zm0 5a.5.5 0 0 1 .5-.5h8a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-.5.5h-8a.5.5 0 0 1-.5-.5v-2Z
@@ -596,9 +575,6 @@
     <StreamGeometry x:Key="SemiIconFullScreenStroked">
         M11.2 11.2a1 1 0 0 1-1.4 0L4 5.42V9a1 1 0 1 1-2 0V3a1 1 0 0 1 .29-.7v-.01A1 1 0 0 1 3 2H9a1 1 0 0 1 0 2H5.41l5.8 5.8a1 1 0 0 1 0 1.4Zm1.6 1.6a1 1 0 0 1 1.4 0l5.8 5.79V15a1 1 0 1 1 2 0v6a1 1 0 0 1-.29.7v.01a1 1 0 0 1-.7.29H15a1 1 0 1 1 0-2h3.59l-5.8-5.8a1 1 0 0 1 0-1.4Z
     </StreamGeometry>
-    <!-- <StreamGeometry x:Key="SemiIconGallery"> -->
-    <!--     M15.66.75 2.46 4.22A3 3 0 0 0 .34 7.95l2.35 8.23a3 3 0 0 0 .31.7V11a4 4 0 0 1 4-4h13.5l-1.2-4.18A3 3 0 0 0 15.67.75Z -->
-    <!-- </StreamGeometry> -->
     <StreamGeometry x:Key="SemiIconGift">
         M4 4.5C4 2.6 5.42 1 7.5 1c.96 0 1.78.48 2.41 1.03a9.26 9.26 0 0 1 1.62 1.93c.17.26.33.52.47.78.14-.26.3-.52.47-.78.44-.67.98-1.38 1.62-1.93A3.73 3.73 0 0 1 16.5 1C18.58 1 20 2.6 20 4.5c0 .98-.4 1.86-1.05 2.5H21a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1h-8V6h-2v5H3a1 1 0 0 1-1-1V8a1 1 0 0 1 1-1h2.05A3.49 3.49 0 0 1 4 4.5Zm7 7.5H4v8c0 1.1.9 2 2 2h5V12Zm2 10h5a2 2 0 0 0 2-2v-8h-7v10ZM10.41 6c-.16-.3-.35-.63-.56-.96a7.3 7.3 0 0 0-1.25-1.5C8.15 3.14 7.8 3 7.5 3 6.58 3 6 3.64 6 4.5 6 5.33 6.67 6 7.5 6h2.91Zm3.74-.96c-.21.33-.4.66-.56.96h2.91c.83 0 1.5-.67 1.5-1.5 0-.86-.58-1.5-1.5-1.5-.29 0-.65.15-1.1.54a7.3 7.3 0 0 0-1.25 1.5Z
     </StreamGeometry>
@@ -746,9 +722,6 @@
     <StreamGeometry x:Key="SemiIconInbox">
         M.21 12.46A3 3 0 0 0 0 13.58V19a3 3 0 0 0 3 3h18a3 3 0 0 0 3-3v-5.42a3 3 0 0 0-.21-1.12l-3.29-8.2A2 2 0 0 0 18.65 3H5.35A2 2 0 0 0 3.5 4.26L.2 12.46ZM5.5 6h13l2.5 7h-5a1 1 0 0 0-1 1 3 3 0 1 1-6 0 1 1 0 0 0-1-1H3l2.5-7Z
     </StreamGeometry>
-    <StreamGeometry x:Key="SemiIconIndenpentCornersStroked">
-        M15.5 2a1 1 0 1 0 0 2h5v5a1 1 0 1 0 2 0V3a1 1 0 0 0-1-1h-6Zm-6 20a1 1 0 1 0 0-2h-5v-5a1 1 0 1 0-2 0v6a1 1 0 0 0 1 1h6Zm-6-12a1 1 0 0 1-1-1V3a1 1 0 0 1 1-1h6a1 1 0 1 1 0 2h-5v5a1 1 0 0 1-1 1Zm19 5a1 1 0 1 0-2 0v5h-5a1 1 0 1 0 0 2h6a1 1 0 0 0 1-1v-6Z
-    </StreamGeometry>
     <StreamGeometry x:Key="SemiIconIndentLeft">
         M9 4.5c0-.83.67-1.5 1.5-1.5h11a1.5 1.5 0 0 1 0 3h-11A1.5 1.5 0 0 1 9 4.5Zm0 5c0-.83.67-1.5 1.5-1.5h11a1.5 1.5 0 0 1 0 3h-11A1.5 1.5 0 0 1 9 9.5Zm1.5 3.5a1.5 1.5 0 0 0 0 3h11a1.5 1.5 0 0 0 0-3h-11ZM9 19.5c0-.83.67-1.5 1.5-1.5h11a1.5 1.5 0 0 1 0 3h-11A1.5 1.5 0 0 1 9 19.5ZM7.06 9.56a1.5 1.5 0 1 0-2.12-2.12l-3.5 3.5a1.5 1.5 0 0 0 0 2.12l3.5 3.5a1.5 1.5 0 0 0 2.12-2.12L4.62 12l2.44-2.44Z
     </StreamGeometry>
@@ -780,12 +753,6 @@
         M22 8.8c0-.1 0-.2-.1-.2 0-.1-.1-.1-.1-.2 0 0 0-.1-.1-.1 0 0-.1-.1-.2-.1L19 6.5V4c0-.5-.5-1-1-1h-4.2l-1.2-.8c-.3-.2-.8-.2-1.1 0l-1.3.8H6c-.5 0-1 .5-1 1v2.5L2.5 8.1s-.1.1-.2.1c0 0 0 .1-.1.1 0 0-.1.1-.1.2s-.1.2-.1.3V21c0 .5.5 1 1 1h18c.5 0 1-.5 1-1V8.8ZM7 5h10v5.1l-5 2.8-5-2.8V5Zm13 15H4v-9.3l1 .6 2 1.1 4.5 2.5c.3.2.7.2 1 0l4.5-2.5 2-1.1 1-.6V20Z,
         M15 9c0 .5-.5 1-1 1h-1v1c0 .5-.5 1-1 1a1 1 0 0 1-1-1v-1h-1a1 1 0 0 1-1-1c0-.6.5-1 1-1h1V7c0-.5.5-1 1-1s1 .5 1 1v1h1c.5 0 1 .5 1 1Z
     </StreamGeometry>
-    <!-- <StreamGeometry x:Key="SemiIconIssueStroked"> -->
-    <!--     M4.13 4.13a11.1 11.1 0 0 1 15.74 0 11.1 11.1 0 0 1 0 15.74 11.1 11.1 0 0 1-15.74 0 11.1 11.1 0 0 1 0-15.74Zm1.6 1.6a8.84 8.84 0 0 1 12.55 0 8.84 8.84 0 0 1 0 12.55 8.84 8.84 0 0 1-12.56 0 8.84 8.84 0 0 1 0-12.56Z, -->
-    <!--     M12 18.5a1.25 1.25 0 1 0 0-2.5 1.25 1.25 0 0 0 0 2.5Z, -->
-    <!--     M12 4.88c.62 0 1.13.5 1.13 1.12v8a1.13 1.13 0 0 1-2.26 0V6c0-.62.5-1.13 1.13-1.13Z, -->
-    <!--     clip0_1477_35 -->
-    <!-- </StreamGeometry> -->
     <StreamGeometry x:Key="SemiIconItalic">
         M9 3.5c0-.83.67-1.5 1.5-1.5h7a1.5 1.5 0 0 1 0 3h-2L12 19h1.5a1.5 1.5 0 0 1 0 3h-7a1.5 1.5 0 0 1 0-3h2L12 5h-1.5A1.5 1.5 0 0 1 9 3.5Z
     </StreamGeometry>
@@ -839,10 +806,6 @@
     <StreamGeometry x:Key="SemiIconLive">
         M8.06 1.94a1.5 1.5 0 1 0-2.12 2.12L7.88 6H5a3 3 0 0 0-3 3v10a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3V9a3 3 0 0 0-3-3h-2.88l1.94-1.94a1.5 1.5 0 0 0-2.12-2.12L12 5.88 8.06 1.94Zm1.94 9v6.13c0 .4.45.63.78.41l4.6-3.06a.5.5 0 0 0 0-.84l-4.6-3.06a.5.5 0 0 0-.78.41Z
     </StreamGeometry>
-    <!-- <StreamGeometry x:Key="SemiIconLoading"> -->
-    <!--     M12 0c.66 0 1.2.54 1.2 1.2v5.2a1.2 1.2 0 0 1-2.4 0V1.2c0-.66.54-1.2 1.2-1.2Zm7.05 2.3c.54.38.66 1.13.27 1.67l-3.06 4.2a1.2 1.2 0 0 1-1.94-1.4l3.06-4.21a1.2 1.2 0 0 1 1.67-.27Zm-14.1 0a1.2 1.2 0 0 1 1.67.26l3.06 4.2a1.2 1.2 0 1 1-1.94 1.41l-3.06-4.2a1.2 1.2 0 0 1 .27-1.68Zm-4.36 6c.2-.64.88-.98 1.5-.78l4.95 1.6a1.2 1.2 0 0 1-.74 2.3L1.36 9.8a1.2 1.2 0 0 1-.77-1.5Zm22.82 0c.2.62-.14 1.3-.77 1.5l-4.94 1.61a1.2 1.2 0 0 1-.74-2.28l4.94-1.6c.63-.21 1.3.13 1.51.76Zm-15.6 5.06c.21.63-.13 1.3-.77 1.51l-4.94 1.6a1.2 1.2 0 0 1-.74-2.27l4.94-1.61c.63-.2 1.31.14 1.52.77Zm8.37 0c.21-.63.89-.98 1.52-.77l4.94 1.6a1.2 1.2 0 0 1-.74 2.29l-4.94-1.6a1.2 1.2 0 0 1-.78-1.52Zm-6.77 2.2c.54.39.66 1.14.27 1.68l-3.06 4.2a1.2 1.2 0 1 1-1.94-1.4l3.06-4.21a1.2 1.2 0 0 1 1.67-.27Zm5.18 0a1.2 1.2 0 0 1 1.67.27l3.06 4.2a1.2 1.2 0 0 1-1.94 1.41l-3.06-4.2a1.2 1.2 0 0 1 .27-1.68ZM12 16.4c.66 0 1.2.54 1.2 1.2v5.2a1.2 1.2 0 0 1-2.4 0v-5.2c0-.66.54-1.2 1.2-1.2Z, -->
-    <!--     clip_loading -->
-    <!-- </StreamGeometry> -->
     <StreamGeometry x:Key="SemiIconLock">
         M12 2a6.5 6.5 0 0 0-6.5 6.5V10H5a2 2 0 0 0-2 2v8c0 1.1.9 2 2 2h14a2 2 0 0 0 2-2v-8a2 2 0 0 0-2-2h-.5V8.5A6.5 6.5 0 0 0 12 2Zm3.5 8V8.5a3.5 3.5 0 1 0-7 0V10h7Z
     </StreamGeometry>
@@ -1054,9 +1017,6 @@
     <StreamGeometry x:Key="SemiIconRefresh2">
         M16.56.44a1.5 1.5 0 0 0-2.12 2.12L15.88 4H12a10 10 0 1 0 10 10 1.5 1.5 0 0 0-3 0 7 7 0 1 1-7-7h3.88l-1.44 1.44a1.5 1.5 0 0 0 2.12 2.12l4-4a1.5 1.5 0 0 0 0-2.12l-4-4Z
     </StreamGeometry>
-    <!-- <StreamGeometry x:Key="SemiIconRegExp"> -->
-    <!--     M16.75 1c.83 0 1.5.67 1.5 1.5v2.7l2.17-1.45a1.5 1.5 0 1 1 1.66 2.5L19.46 8l2.62 1.75a1.5 1.5 0 1 1-1.66 2.5l-2.17-1.45v2.7a1.5 1.5 0 0 1-3 0v-2.7l-2.17 1.45a1.5 1.5 0 0 1-1.66-2.5L14.05 8l-2.63-1.75a1.5 1.5 0 0 1 1.66-2.5l2.17 1.45V2.5c0-.83.67-1.5 1.5-1.5Z -->
-    <!-- </StreamGeometry> -->
     <StreamGeometry x:Key="SemiIconReply">
         m2.28 11.31 8.07-8.5a1 1 0 0 1 1.71.7v4C19.02 7.5 23 12 23 18c0 .5-.24 2.18-.56 2.31-.13.06-.28-.01-.43-.32-2.23-4.46-4.48-4.5-9.95-4.5v5a1 1 0 0 1-1.71.7l-8.07-8.5a1 1 0 0 1 0-1.38Z
     </StreamGeometry>
@@ -1146,11 +1106,6 @@
     <StreamGeometry x:Key="SemiIconShield">
         m2.68 3.8 8.75-2.63a2 2 0 0 1 1.14 0l8.74 2.62c.41.13.7.5.7.93.03 2.63-.03 11.72-2.01 14.28-1.98 2.55-6.38 3.66-7.65 3.93-.23.05-.47.05-.7 0C10.4 22.65 6.12 21.55 4 19 1.87 16.44 1.92 7.32 1.98 4.7c0-.42.3-.78.7-.9ZM12 4v16s3.97-.73 5.6-2.9c1.61-2.2 1.39-11.2 1.39-11.2L12 4H12Z
     </StreamGeometry>
-    <!-- <StreamGeometry x:Key="SemiIconShieldStroked"> -->
-    <!--     m3 4.13 9-1.63 9 1.63v5.39c0 5.66-3.62 10.69-9 12.48-5.37-1.8-9-6.82-9-12.49V4.13Z, -->
-    <!--     M11.97 7.47v8, -->
-    <!--     M7.97 11.47h8 -->
-    <!-- </StreamGeometry> -->
     <StreamGeometry x:Key="SemiIconShift">
         M12 1c.45 0 .87.2 1.15.54l10 12A1.5 1.5 0 0 1 22 16h-4v5.5c0 .83-.67 1.5-1.5 1.5h-9A1.5 1.5 0 0 1 6 21.5V16H2a1.5 1.5 0 0 1-1.15-2.46l10-12c.28-.34.7-.54 1.15-.54ZM5.2 13H9v7h6v-7h3.8L12 4.84 5.2 13Z
     </StreamGeometry>
@@ -1208,10 +1163,6 @@
     <StreamGeometry x:Key="SemiIconSourceControl">
         M7 3a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3ZM2.5 4.5a4.5 4.5 0 1 1 6 4.24v4.23a19.2 19.2 0 0 1 3.87-.51l.28-.02a13.8 13.8 0 0 0 3.6-.54 4.5 4.5 0 1 1 3.54.41c-.14.42-.35.8-.63 1.14a4.49 4.49 0 0 1-1.94 1.3c-1.32.48-3 .6-4.37.68l-.11.01c-1.3.09-2.37.16-3.19.35a4.5 4.5 0 1 1-4.05-.53V8.74a4.5 4.5 0 0 1-3-4.24Zm16 2a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3ZM7 18a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3Z
     </StreamGeometry>
-    <!-- <StreamGeometry x:Key="SemiIconSpin"> -->
-    <!--     M14.2 3.79A8.5 8.5 0 0 0 5 16.81a1.5 1.5 0 1 1-2.48 1.7 11.5 11.5 0 1 1 20.6-3.53 1.5 1.5 0 0 1-2.91-.78A8.5 8.5 0 0 0 14.2 3.79Z, -->
-    <!--     clip_spin -->
-    <!-- </StreamGeometry> -->
     <StreamGeometry x:Key="SemiIconStackBarChartStroked">
         M10 2a1 1 0 0 0-1 1v18a1 1 0 0 0 1 1h4a1 1 0 0 0 1-1V3a1 1 0 0 0-1-1h-4Zm3 9h-2v9h2v-9Zm0-2V4h-2v5h2ZM3 7a1 1 0 0 0-1 1v13a1 1 0 0 0 1 1h4a1 1 0 0 0 1-1V8a1 1 0 0 0-1-1H3Zm3 7H4v6h2v-6Zm0-2V9H4v3h2Zm10-1a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1h-4a1 1 0 0 1-1-1V11Zm2 5h2v-4h-2v4Zm0 2v2h2v-2h-2Z
     </StreamGeometry>
@@ -1327,10 +1278,6 @@
     <StreamGeometry x:Key="SemiIconTreeTriangleRight">
         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>
-    <!-- <StreamGeometry x:Key="SemiIconTriangleArrow"> -->
-    <!--     M24 9v1c-4 0-5.5 1-7.5 3S14 16 12 16s-2.5-1-4.5-3S4 10 0 10V9h24Z, -->
-    <!--     clip_triangle_arrow -->
-    <!-- </StreamGeometry> -->
     <StreamGeometry x:Key="SemiIconTriangleArrowVertical">
         M9 0h1c0 4 1 5.5 3 7.5s3 2.5 3 4.5-1 2.5-3 4.5-3 3.5-3 7.5H9V0Z
     </StreamGeometry>
@@ -1363,9 +1310,6 @@
     <StreamGeometry x:Key="SemiIconUndo">
         M9.56 2.44a1.5 1.5 0 0 1 0 2.12L7.12 7h7.63C18.84 7 22 10.58 22 14.5S18.84 22 14.75 22H11.5a1.5 1.5 0 0 1 0-3h3.25c2.27 0 4.25-2.07 4.25-4.5S17.02 10 14.75 10H7.12l2.44 2.44a1.5 1.5 0 0 1-2.12 2.12l-5-5a1.5 1.5 0 0 1 0-2.12l5-5a1.5 1.5 0 0 1 2.12 0Z
     </StreamGeometry>
-    <StreamGeometry x:Key="SemiIconUnlink">
-        M12.94 2.94a5.74 5.74 0 1 1 8.12 8.12l-3.55 3.55-2.12-2.12 3.55-3.55a2.74 2.74 0 1 0-3.88-3.88l-3.55 3.55L9.39 6.5l3.55-3.55Zm-10 10 3.05-3.05L8.11 12l-3.05 3.05a2.74 2.74 0 0 0 3.88 3.88l3.05-3.05L14.11 18l-3.05 3.05a5.74 5.74 0 1 1-8.12-8.12Z
-    </StreamGeometry>
     <StreamGeometry x:Key="SemiIconUnlock">
         M5.5 7.5A6.5 6.5 0 0 1 18.48 7h-3.02a3.5 3.5 0 0 0-6.96.5V10H19a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-8c0-1.1.9-2 2-2h.5V7.5Z
     </StreamGeometry>
@@ -1382,12 +1326,6 @@
         M12 16c1.98 0 3.75-1.66 4.71-4.14.6-.25 1.18-1 1.44-1.97.34-1.27.27-2.4-.65-2.76C17.4 2.71 15.66 1 12 1S6.6 2.71 6.5 7.13c-.93.35-1 1.49-.65 2.76.26.98.83 1.72 1.44 1.97C8.26 14.34 10.02 16 12 16Z,
         M19.6 22c1.24 0 2.12-1.15 1.27-2.05C19.2 18.2 15.85 17 12 17c-3.85 0-7.2 1.2-8.87 2.95-.85.9.03 2.05 1.27 2.05h15.2Z
     </StreamGeometry>
-    <!-- <StreamGeometry x:Key="SemiIconUserAdd"> -->
-    <!--     M19.08 19.84c-1.38-2.24-4.32-4.34-8.62-4.34-4.3 0-7.24 2.1-8.62 4.34C1.2 20.88 2.1 22 3.34 22h14.24c1.23 0 2.14-1.12 1.5-2.16Z, -->
-    <!--     M14.05 10.42c.52-.21 1.02-.86 1.25-1.7.3-1.11.23-2.1-.57-2.4C14.65 2.48 13.13 1 9.96 1 6.78 1 5.27 2.48 5.19 6.32c-.8.3-.86 1.29-.57 2.4.23.84.73 1.49 1.25 1.7.84 2.15 2.37 3.6 4.09 3.6 1.72 0 3.25-1.45 4.09-3.6Z, -->
-    <!--     M20 1a1 1 0 0 0-1 1v2h-2a1 1 0 0 0 0 2h2v2a1 1 0 0 0 2 0V6h2a1 1 0 1 0 0-2h-2V2a1 1 0 0 0-1-1Z, -->
-    <!--     clip_user_add -->
-    <!-- </StreamGeometry> -->
     <StreamGeometry x:Key="SemiIconUserCardPhone">
         M9.78 12.97c-.58-.59-1.15-1.19-1.7-1.8a1.1 1.1 0 0 1 .3-1.69l1.68-.97c.58-.33.77-1.08.44-1.66L7.47 1.61a1.21 1.21 0 0 0-1.66-.45L1.61 3.6a1.21 1.21 0 0 0-.6.88c-.05.31.05.89.15 1.22 1.17 3.6 3.2 7 6.05 9.85a24.73 24.73 0 0 0 11.76 6.6c.5.09 1.01-.14 1.28-.6l2.42-4.2c.33-.57.14-1.31-.44-1.65l-5.25-3.03a1.21 1.21 0 0 0-1.66.45l-1.17 2.03a1.1 1.1 0 0 1-1.66.3c-.93-.77-1.83-1.6-2.7-2.47Z
     </StreamGeometry>

src/Semi.Avalonia/Icons/IconPatch.axaml

@@ -11,4 +11,59 @@
     <StreamGeometry x:Key="SemiIconCheckBoxTick">
         M17.41 7.3c.66.51.78 1.45.28 2.11l-6.5 8.5a1.5 1.5 0 0 1-2.37.01l-3.5-4.5a1.5 1.5 0 1 1 2.36-1.84L10 14.54l5.32-6.95a1.5 1.5 0 0 1 2.1-.28Z
     </StreamGeometry>
+
+    <StreamGeometry x:Key="SemiIconConfigStroked">
+        M16.95 4.24c0-.63.5-1.13 1.13-1.13h3.31a1.13 1.13 0 0 1 0 2.25h-3.31c-.62 0-1.13-.5-1.13-1.12Z,
+        M13.66.9c.62 0 1.12.5 1.12 1.13v4.42a1.13 1.13 0 0 1-2.25 0V2.03c0-.63.5-1.13 1.13-1.13Z,
+        M.38 4.24c0-.63.5-1.13 1.12-1.13h11.03v2.25H1.5c-.62 0-1.13-.5-1.13-1.12Z,
+        M.38 11.97c0-.62.5-1.12 1.12-1.12h4.42a1.13 1.13 0 0 1 0 2.25H1.5c-.62 0-1.13-.5-1.13-1.13Z,
+        M10.34 8.64c.62 0 1.13.5 1.13 1.12v4.42a1.13 1.13 0 0 1-2.25 0V9.76c0-.62.5-1.12 1.12-1.12Z,
+        M11.47 10.85H22.5a1.13 1.13 0 010 2.25H11.47Z,
+        M16.95 19.71c0-.62.5-1.13 1.13-1.13h3.31a1.13 1.13 0 0 1 0 2.25h-3.31c-.62 0-1.13-.5-1.13-1.12Z,
+        M13.66 16.37c.62 0 1.12.5 1.12 1.13v4.42a1.13 1.13 0 0 1-2.25 0V17.5c0-.62.5-1.13 1.13-1.13Z,
+        M.38 19.71c0-.62.5-1.13 1.12-1.13h11.03v2.25H1.5c-.62 0-1.13-.5-1.13-1.12Z
+    </StreamGeometry>
+    <StreamGeometry x:Key="SemiIconDesktop">
+        M2.5 14.5v-9c0-1.1.9-2 2-2h15a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-15a2 2 0 0 1-2-2Z,
+        M5.5 13.5v-7h13v7h-13Z,
+        M7 21.5h10a1 1 0 001-1v-1a1 1 0 00-1-1h-10a1 1 0 00-1 1v1a1 1 0 001 1Z,
+        M10 16.5v2h4v-2h-4Z
+    </StreamGeometry>
+    <StreamGeometry x:Key="SemiIconGallery">
+        M15.66.75 2.4 4.22A3 3 0 0 0 .34 7.95l2.35 8.23a3 3 0 0 0 .31.7V11a4 4 0 0 1 4-4h13.5l-1.2-4.18A3 3 0 0 0 15.67.75Z,
+        M8 9h13a3 3 0 013 3v9a3 3 0 01-3 3H8a3 3 0 01-3-3V12a3 3 0 013-3Z
+    </StreamGeometry>
+    <StreamGeometry x:Key="SemiIconIssueStroked">
+        M4.13 4.13a11.1 11.1 0 0 1 15.74 0 11.1 11.1 0 0 1 0 15.74 11.1 11.1 0 0 1-15.74 0 11.1 11.1 0 0 1 0-15.74Zm1.6 1.6a8.84 8.84 0 0 1 12.55 0 8.84 8.84 0 0 1 0 12.55 8.84 8.84 0 0 1-12.56 0 8.84 8.84 0 0 1 0-12.56Z,
+        M12 18.5a1.25 1.25 0 1 0 0-2.5 1.25 1.25 0 0 0 0 2.5Z,
+        M12 4.88c.62 0 1.13.5 1.13 1.12v8a1.13 1.13 0 0 1-2.26 0V6c0-.62.5-1.13 1.13-1.13Z
+    </StreamGeometry>
+    <StreamGeometry x:Key="SemiIconLoading">
+        M12 0c.66 0 1.2.54 1.2 1.2v5.2a1.2 1.2 0 0 1-2.4 0V1.2c0-.66.54-1.2 1.2-1.2Zm7.05 2.3c.54.38.66 1.13.27 1.67l-3.06 4.2a1.2 1.2 0 0 1-1.94-1.4l3.06-4.21a1.2 1.2 0 0 1 1.67-.27Zm-14.1 0a1.2 1.2 0 0 1 1.67.26l3.06 4.2a1.2 1.2 0 1 1-1.94 1.41l-3.06-4.2a1.2 1.2 0 0 1 .27-1.68Zm-4.36 6c.2-.64.88-.98 1.5-.78l4.95 1.6a1.2 1.2 0 0 1-.74 2.3L1.36 9.8a1.2 1.2 0 0 1-.77-1.5Zm22.82 0c.2.62-.14 1.3-.77 1.5l-4.94 1.61a1.2 1.2 0 0 1-.74-2.28l4.94-1.6c.63-.21 1.3.13 1.51.76Zm-15.6 5.06c.21.63-.13 1.3-.77 1.51l-4.94 1.6a1.2 1.2 0 0 1-.74-2.27l4.94-1.61c.63-.2 1.31.14 1.52.77Zm8.37 0c.21-.63.89-.98 1.52-.77l4.94 1.6a1.2 1.2 0 0 1-.74 2.29l-4.94-1.6a1.2 1.2 0 0 1-.78-1.52Zm-6.77 2.2c.54.39.66 1.14.27 1.68l-3.06 4.2a1.2 1.2 0 1 1-1.94-1.4l3.06-4.21a1.2 1.2 0 0 1 1.67-.27Zm5.18 0a1.2 1.2 0 0 1 1.67.27l3.06 4.2a1.2 1.2 0 0 1-1.94 1.41l-3.06-4.2a1.2 1.2 0 0 1 .27-1.68ZM12 16.4c.66 0 1.2.54 1.2 1.2v5.2a1.2 1.2 0 0 1-2.4 0v-5.2c0-.66.54-1.2 1.2-1.2Z
+    </StreamGeometry>
+    <StreamGeometry x:Key="SemiIconRegExp">
+        M16.75 1c.83 0 1.5.67 1.5 1.5v2.7l2.17-1.45a1.5 1.5 0 1 1 1.66 2.5L19.46 8l2.62 1.75a1.5 1.5 0 1 1-1.66 2.5l-2.17-1.45v2.7a1.5 1.5 0 0 1-3 0v-2.7l-2.17 1.45a1.5 1.5 0 0 1-1.66-2.5L14.05 8l-2.63-1.75a1.5 1.5 0 0 1 1.66-2.5l2.17 1.45V2.5c0-.83.67-1.5 1.5-1.5Z,
+        M2 17.5a4.5 4.5 0 109 0 4.5 4.5 0 10-9 0Z
+    </StreamGeometry>
+    <StreamGeometry x:Key="SemiIconShieldStroked">
+        m3 4.13 9-1.63 9 1.63v5.39c0 5.66-3.62 10.69-9 12.48-5.37-1.8-9-6.82-9-12.49V4.13Z,
+        M5 6.13 12 4.5l7 1.63v3.39c0 3.66-3 8.69-7 10.48-4-1.8-7-5.82-7-10.49V6.13Z,
+        M13 10.5h2a1 1 0 010 2h-2v2a1 1 0 01-2 0v-2H9a1 1 0 010-2h2v-2a1 1 0 012 0v2Z
+    </StreamGeometry>
+    <StreamGeometry x:Key="SemiIconSpin">
+        M14.2 3.79A8.5 8.5 0 0 0 5 16.81a1.5 1.5 0 1 1-2.48 1.7 11.5 11.5 0 1 1 20.6-3.53 1.5 1.5 0 0 1-2.91-.78A8.5 8.5 0 0 0 14.2 3.79Z
+    </StreamGeometry>
+    <StreamGeometry x:Key="SemiIconTriangleArrow">
+        M24 9v1c-4 0-5.5 1-7.5 3S14 16 12 16s-2.5-1-4.5-3S4 10 0 10V9h24Z
+    </StreamGeometry>
+    <StreamGeometry x:Key="SemiIconUnlink">
+        M12.94 2.94a5.74 5.74 0 1 1 8.12 8.12l-3.55 3.55-2.12-2.12 3.55-3.55a2.74 2.74 0 1 0-3.88-3.88l-3.55 3.55L9.39 6.5l3.55-3.55Zm-10 10 3.05-3.05L8.11 12l-3.05 3.05a2.74 2.74 0 0 0 3.88 3.88l3.05-3.05L14.11 18l-3.05 3.05a5.74 5.74 0 1 1-8.12-8.12Z,
+        M5.4 7.5l2.7 2.7 1.4-1.4-2.7-2.7L5.4 7.5Z,
+        M15.3 14.4l-1.4 1.4 2.7 2.7 1.4-1.4-2.7-2.7Z
+    </StreamGeometry>
+    <StreamGeometry x:Key="SemiIconUserAdd">
+        M19.08 19.84c-1.38-2.24-4.32-4.34-8.62-4.34-4.3 0-7.24 2.1-8.62 4.34C1.2 20.88 2.1 22 3.34 22h14.24c1.23 0 2.14-1.12 1.5-2.16Z,
+        M14.05 10.42c.52-.21 1.02-.86 1.25-1.7.3-1.11.23-2.1-.57-2.4C14.65 2.48 13.13 1 9.96 1 6.78 1 5.27 2.48 5.19 6.32c-.8.3-.86 1.29-.57 2.4.23.84.73 1.49 1.25 1.7.84 2.15 2.37 3.6 4.09 3.6 1.72 0 3.25-1.45 4.09-3.6Z,
+        M20 1a1 1 0 0 0-1 1v2h-2a1 1 0 0 0 0 2h2v2a1 1 0 0 0 2 0V6h2a1 1 0 1 0 0-2h-2V2a1 1 0 0 0-1-1Z
+    </StreamGeometry>
 </ResourceDictionary>

src/Semi.Avalonia/Index.axaml

@@ -20,4 +20,6 @@
             </ResourceDictionary.MergedDictionaries>
         </ResourceDictionary>
     </Styles.Resources>
+
+    <StyleInclude Source="avares://Semi.Avalonia/Styles/_index.axaml" />
 </Styles>

src/Semi.Avalonia/Semi.Avalonia.csproj

@@ -4,7 +4,7 @@
 
     <PropertyGroup>
         <Title>Semi.Avalonia</Title>
-        <PackageReleaseNotes>Update to Semi.Avalonia 11.2.1.6</PackageReleaseNotes>
+        <PackageReleaseNotes>Update to Semi.Avalonia 11.2.1.7</PackageReleaseNotes>
     </PropertyGroup>
 
     <PropertyGroup Condition="$([MSBuild]::IsTargetFrameworkCompatible('$(TargetFramework)', 'net8.0'))">

src/Semi.Avalonia/SemiTheme.axaml

@@ -21,4 +21,6 @@
             </ResourceDictionary.MergedDictionaries>
         </ResourceDictionary>
     </Styles.Resources>
+
+    <StyleInclude Source="avares://Semi.Avalonia/Styles/_index.axaml" />
 </Styles>

src/Semi.Avalonia/Styles/TabControl.axaml

@@ -0,0 +1,5 @@
+<Styles xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+    <Style Selector="TabControl TabItem:nth-last-child(1)">
+        <Setter Property="Margin" Value="0" />
+    </Style>
+</Styles>

src/Semi.Avalonia/Styles/TabStrip.axaml

@@ -0,0 +1,5 @@
+<Styles xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+    <Style Selector="TabStrip TabStripItem:nth-last-child(1)">
+        <Setter Property="Margin" Value="0" />
+    </Style>
+</Styles>

src/Semi.Avalonia/Styles/_index.axaml

@@ -0,0 +1,4 @@
+<Styles xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+    <StyleInclude Source="avares://Semi.Avalonia/Styles/TabControl.axaml" />
+    <StyleInclude Source="avares://Semi.Avalonia/Styles/TabStrip.axaml" />
+</Styles>

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

@@ -2,7 +2,6 @@
     <StaticResource x:Key="CheckBoxForeground" ResourceKey="SemiColorText0" />
     <StaticResource x:Key="CheckBoxDisabledForeground" ResourceKey="SemiColorDisabledText" />
     <StaticResource x:Key="CheckBoxGlyphFill" ResourceKey="SemiColorWhite" />
-    <StaticResource x:Key="CheckBoxGlyphDisabledFill" ResourceKey="SemiColorWhite" />
     <SolidColorBrush x:Key="CheckBoxDefaultBackground" Color="Transparent" />
     <StaticResource x:Key="CheckBoxDefaultBorderBrush" ResourceKey="SemiColorText3" />
     <StaticResource x:Key="CheckBoxPointeroverBackground" ResourceKey="SemiColorFill0" />
@@ -26,4 +25,7 @@
     <StaticResource x:Key="CheckBoxCardPressedBackground" ResourceKey="SemiColorFill1" />
     <StaticResource x:Key="CheckBoxCardCheckedPointeroverBorderBrush" ResourceKey="SemiColorPrimaryPointerover" />
     <StaticResource x:Key="CheckBoxCardCheckedPressedBorderBrush" ResourceKey="SemiColorPrimaryActive" />
+
+    <!-- Obsolete -->
+    <StaticResource x:Key="CheckBoxGlyphDisabledFill" ResourceKey="SemiColorWhite" />
 </ResourceDictionary>

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

@@ -1,96 +1,98 @@
 <ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
     <!--  Typography related resources are combined with TextBlock  -->
-    <SolidColorBrush x:Key="LabelTagLightRedForeground" Color="#FEE0D5" />
-    <SolidColorBrush x:Key="LabelTagLightRedBackground" Opacity="0.15" Color="#FC725A" />
-    <SolidColorBrush x:Key="LabelTagLightPinkForeground" Color="#FBD3DC" />
-    <SolidColorBrush x:Key="LabelTagLightPinkBackground" Opacity="0.15" Color="#EF5686" />
-    <SolidColorBrush x:Key="LabelTagLightPurpleForeground" Color="#EFCEF0" />
-    <SolidColorBrush x:Key="LabelTagLightPurpleBackground" Opacity="0.15" Color="#B553C2" />
-    <SolidColorBrush x:Key="LabelTagLightVioletForeground" Color="#DDD4F4" />
-    <SolidColorBrush x:Key="LabelTagLightVioletBackground" Opacity="0.15" Color="#8865D4" />
-    <SolidColorBrush x:Key="LabelTagLightIndigoForeground" Color="#D1D8F1" />
-    <SolidColorBrush x:Key="LabelTagLightIndigoBackground" Opacity="0.15" Color="#5F71C5" />
-    <SolidColorBrush x:Key="LabelTagLightBlueForeground" Color="#D4ECFF" />
-    <SolidColorBrush x:Key="LabelTagLightBlueBackground" Opacity="0.15" Color="#54A9FF" />
-    <SolidColorBrush x:Key="LabelTagLightLightBlueForeground" Color="#CEEEFC" />
-    <SolidColorBrush x:Key="LabelTagLightLightBlueBackground" Opacity="0.15" Color="#40B4F3" />
-    <SolidColorBrush x:Key="LabelTagLightCyanForeground" Color="#C6EFF1" />
-    <SolidColorBrush x:Key="LabelTagLightCyanBackground" Opacity="0.15" Color="#38BBC6" />
-    <SolidColorBrush x:Key="LabelTagLightTealForeground" Color="#C4F0E8" />
-    <SolidColorBrush x:Key="LabelTagLightTealBackground" Opacity="0.15" Color="#33C2B0" />
-    <SolidColorBrush x:Key="LabelTagLightGreenForeground" Color="#D0F0D1" />
-    <SolidColorBrush x:Key="LabelTagLightGreenBackground" Opacity="0.15" Color="#5DC264" />
-    <SolidColorBrush x:Key="LabelTagLightLightGreenForeground" Color="#E4F1D1" />
-    <SolidColorBrush x:Key="LabelTagLightLightGreenBackground" Opacity="0.15" Color="#97C65F" />
-    <SolidColorBrush x:Key="LabelTagLightLimeForeground" Color="#E5F6C9" />
-    <SolidColorBrush x:Key="LabelTagLightLimeBackground" Opacity="0.15" Color="#AEDC3A" />
-    <SolidColorBrush x:Key="LabelTagLightYellowForeground" Color="#FEFBD0" />
-    <SolidColorBrush x:Key="LabelTagLightYellowBackground" Opacity="0.15" Color="#FDDE43" />
-    <SolidColorBrush x:Key="LabelTagLightAmberForeground" Color="#FCF6D2" />
-    <SolidColorBrush x:Key="LabelTagLightAmberBackground" Opacity="0.15" Color="#F5CA50" />
-    <SolidColorBrush x:Key="LabelTagLightOrangeForeground" Color="#FFEFD0" />
-    <SolidColorBrush x:Key="LabelTagLightOrangeBackground" Opacity="0.15" Color="#FFAE43" />
-    <SolidColorBrush x:Key="LabelTagLightGreyForeground" Color="#E6E8EA" />
-    <SolidColorBrush x:Key="LabelTagLightGreyBackground" Opacity="0.15" Color="#888D92" />
-    <SolidColorBrush x:Key="LabelTagLightWhiteBackground" Color="#4F5159" />
-    <SolidColorBrush x:Key="LabelTagLightWhiteBorderBrush" Color="#41464C" />
-    <SolidColorBrush x:Key="LabelTagLightWhiteForeground" Color="#F9F9F9" />
+    <StaticResource x:Key="LabelTagLightRedForeground" ResourceKey="SemiRed8" />
+    <SolidColorBrush x:Key="LabelTagLightRedBackground" Opacity="0.15" Color="{StaticResource SemiRed5Color}" />
+    <StaticResource x:Key="LabelTagLightPinkForeground" ResourceKey="SemiPink8" />
+    <SolidColorBrush x:Key="LabelTagLightPinkBackground" Opacity="0.15" Color="{StaticResource SemiPink5Color}" />
+    <StaticResource x:Key="LabelTagLightPurpleForeground" ResourceKey="SemiPurple8" />
+    <SolidColorBrush x:Key="LabelTagLightPurpleBackground" Opacity="0.15" Color="{StaticResource SemiPurple5Color}" />
+    <StaticResource x:Key="LabelTagLightVioletForeground" ResourceKey="SemiViolet8" />
+    <SolidColorBrush x:Key="LabelTagLightVioletBackground" Opacity="0.15" Color="{StaticResource SemiViolet5Color}" />
+    <StaticResource x:Key="LabelTagLightIndigoForeground" ResourceKey="SemiIndigo8" />
+    <SolidColorBrush x:Key="LabelTagLightIndigoBackground" Opacity="0.15" Color="{StaticResource SemiIndigo5Color}" />
+    <StaticResource x:Key="LabelTagLightBlueForeground" ResourceKey="SemiBlue8" />
+    <SolidColorBrush x:Key="LabelTagLightBlueBackground" Opacity="0.15" Color="{StaticResource SemiBlue5Color}" />
+    <StaticResource x:Key="LabelTagLightLightBlueForeground" ResourceKey="SemiLightBlue8" />
+    <SolidColorBrush x:Key="LabelTagLightLightBlueBackground" Opacity="0.15" Color="{StaticResource SemiLightBlue5Color}" />
+    <StaticResource x:Key="LabelTagLightCyanForeground" ResourceKey="SemiCyan8" />
+    <SolidColorBrush x:Key="LabelTagLightCyanBackground" Opacity="0.15" Color="{StaticResource SemiCyan5Color}" />
+    <StaticResource x:Key="LabelTagLightTealForeground" ResourceKey="SemiTeal8" />
+    <SolidColorBrush x:Key="LabelTagLightTealBackground" Opacity="0.15" Color="{StaticResource SemiTeal5Color}" />
+    <StaticResource x:Key="LabelTagLightGreenForeground" ResourceKey="SemiGreen8" />
+    <SolidColorBrush x:Key="LabelTagLightGreenBackground" Opacity="0.15" Color="{StaticResource SemiGreen5Color}" />
+    <StaticResource x:Key="LabelTagLightLightGreenForeground" ResourceKey="SemiLightGreen8" />
+    <SolidColorBrush x:Key="LabelTagLightLightGreenBackground" Opacity="0.15" Color="{StaticResource SemiLightGreen5Color}" />
+    <StaticResource x:Key="LabelTagLightLimeForeground" ResourceKey="SemiLime8" />
+    <SolidColorBrush x:Key="LabelTagLightLimeBackground" Opacity="0.15" Color="{StaticResource SemiLime5Color}" />
+    <StaticResource x:Key="LabelTagLightYellowForeground" ResourceKey="SemiYellow8" />
+    <SolidColorBrush x:Key="LabelTagLightYellowBackground" Opacity="0.15" Color="{StaticResource SemiYellow5Color}" />
+    <StaticResource x:Key="LabelTagLightAmberForeground" ResourceKey="SemiAmber8" />
+    <SolidColorBrush x:Key="LabelTagLightAmberBackground" Opacity="0.15" Color="{StaticResource SemiAmber5Color}" />
+    <StaticResource x:Key="LabelTagLightOrangeForeground" ResourceKey="SemiOrange8" />
+    <SolidColorBrush x:Key="LabelTagLightOrangeBackground" Opacity="0.15" Color="{StaticResource SemiOrange5Color}" />
+    <StaticResource x:Key="LabelTagLightGreyForeground" ResourceKey="SemiGrey8" />
+    <SolidColorBrush x:Key="LabelTagLightGreyBackground" Opacity="0.15" Color="{StaticResource SemiGrey5Color}" />
 
-    <SolidColorBrush x:Key="LabelTagGhostRedBorderBrush" Color="#FB4932" />
-    <SolidColorBrush x:Key="LabelTagGhostRedForeground" Color="#FC725A" />
-    <SolidColorBrush x:Key="LabelTagGhostPinkBorderBrush" Color="#EB2F71" />
-    <SolidColorBrush x:Key="LabelTagGhostPinkForeground" Color="#EF5686" />
-    <SolidColorBrush x:Key="LabelTagGhostPurpleBorderBrush" Color="#A033B3" />
-    <SolidColorBrush x:Key="LabelTagGhostPurpleForeground" Color="#B553C2" />
-    <SolidColorBrush x:Key="LabelTagGhostVioletBorderBrush" Color="#7246C9" />
-    <SolidColorBrush x:Key="LabelTagGhostVioletForeground" Color="#8865D4" />
-    <SolidColorBrush x:Key="LabelTagGhostIndigoBorderBrush" Color="#4053B7" />
-    <SolidColorBrush x:Key="LabelTagGhostIndigoForeground" Color="#5F71C5" />
-    <SolidColorBrush x:Key="LabelTagGhostBlueBorderBrush" Color="#2990FF" />
-    <SolidColorBrush x:Key="LabelTagGhostBlueForeground" Color="#54A9FF" />
-    <SolidColorBrush x:Key="LabelTagGhostLightBlueBorderBrush" Color="#139FF0" />
-    <SolidColorBrush x:Key="LabelTagGhostLightBlueForeground" Color="#40B4F3" />
-    <SolidColorBrush x:Key="LabelTagGhostCyanBorderBrush" Color="#13A8B8" />
-    <SolidColorBrush x:Key="LabelTagGhostCyanForeground" Color="#38BBC6" />
-    <SolidColorBrush x:Key="LabelTagGhostTealBorderBrush" Color="#0EB3A1" />
-    <SolidColorBrush x:Key="LabelTagGhostTealForeground" Color="#33C2B0" />
-    <SolidColorBrush x:Key="LabelTagGhostGreenBorderBrush" Color="#3EB349" />
-    <SolidColorBrush x:Key="LabelTagGhostGreenForeground" Color="#5DC264" />
-    <SolidColorBrush x:Key="LabelTagGhostLightGreenBorderBrush" Color="#7FB840" />
-    <SolidColorBrush x:Key="LabelTagGhostLightGreenForeground" Color="#97C65F" />
-    <SolidColorBrush x:Key="LabelTagGhostLimeBorderBrush" Color="#A2D311" />
-    <SolidColorBrush x:Key="LabelTagGhostLimeForeground" Color="#AEDC3A" />
-    <SolidColorBrush x:Key="LabelTagGhostYellowBorderBrush" Color="#FCCE14" />
-    <SolidColorBrush x:Key="LabelTagGhostYellowForeground" Color="#FDDE43" />
-    <SolidColorBrush x:Key="LabelTagGhostAmberBorderBrush" Color="#F2B726" />
-    <SolidColorBrush x:Key="LabelTagGhostAmberForeground" Color="#F5CA50" />
-    <SolidColorBrush x:Key="LabelTagGhostOrangeBorderBrush" Color="#FF9214" />
-    <SolidColorBrush x:Key="LabelTagGhostOrangeForeground" Color="#FFAE43" />
-    <SolidColorBrush x:Key="LabelTagGhostGreyBorderBrush" Color="#6B7075" />
-    <SolidColorBrush x:Key="LabelTagGhostGreyForeground" Color="#888D92" />
-    <SolidColorBrush x:Key="LabelTagGhostWhiteBackground" Color="#4F5159" />
-    <SolidColorBrush x:Key="LabelTagGhostWhiteBorderBrush" Color="#41464C" />
-    <SolidColorBrush x:Key="LabelTagGhostWhiteForeground" Color="#F9F9F9" />
+    <StaticResource x:Key="LabelTagGhostRedBorderBrush" ResourceKey="SemiRed4" />
+    <StaticResource x:Key="LabelTagGhostRedForeground" ResourceKey="SemiRed5" />
+    <StaticResource x:Key="LabelTagGhostPinkBorderBrush" ResourceKey="SemiPink4" />
+    <StaticResource x:Key="LabelTagGhostPinkForeground" ResourceKey="SemiPink5" />
+    <StaticResource x:Key="LabelTagGhostPurpleBorderBrush" ResourceKey="SemiPurple4" />
+    <StaticResource x:Key="LabelTagGhostPurpleForeground" ResourceKey="SemiPurple5" />
+    <StaticResource x:Key="LabelTagGhostVioletBorderBrush" ResourceKey="SemiViolet4" />
+    <StaticResource x:Key="LabelTagGhostVioletForeground" ResourceKey="SemiViolet5" />
+    <StaticResource x:Key="LabelTagGhostIndigoBorderBrush" ResourceKey="SemiIndigo4" />
+    <StaticResource x:Key="LabelTagGhostIndigoForeground" ResourceKey="SemiIndigo5" />
+    <StaticResource x:Key="LabelTagGhostBlueBorderBrush" ResourceKey="SemiBlue4" />
+    <StaticResource x:Key="LabelTagGhostBlueForeground" ResourceKey="SemiBlue5" />
+    <StaticResource x:Key="LabelTagGhostLightBlueBorderBrush" ResourceKey="SemiLightBlue4" />
+    <StaticResource x:Key="LabelTagGhostLightBlueForeground" ResourceKey="SemiLightBlue5" />
+    <StaticResource x:Key="LabelTagGhostCyanBorderBrush" ResourceKey="SemiCyan4" />
+    <StaticResource x:Key="LabelTagGhostCyanForeground" ResourceKey="SemiCyan5" />
+    <StaticResource x:Key="LabelTagGhostTealBorderBrush" ResourceKey="SemiTeal4" />
+    <StaticResource x:Key="LabelTagGhostTealForeground" ResourceKey="SemiTeal5" />
+    <StaticResource x:Key="LabelTagGhostGreenBorderBrush" ResourceKey="SemiGreen4" />
+    <StaticResource x:Key="LabelTagGhostGreenForeground" ResourceKey="SemiGreen5" />
+    <StaticResource x:Key="LabelTagGhostLightGreenBorderBrush" ResourceKey="SemiLightGreen4" />
+    <StaticResource x:Key="LabelTagGhostLightGreenForeground" ResourceKey="SemiLightGreen5" />
+    <StaticResource x:Key="LabelTagGhostLimeBorderBrush" ResourceKey="SemiLime4" />
+    <StaticResource x:Key="LabelTagGhostLimeForeground" ResourceKey="SemiLime5" />
+    <StaticResource x:Key="LabelTagGhostYellowBorderBrush" ResourceKey="SemiYellow4" />
+    <StaticResource x:Key="LabelTagGhostYellowForeground" ResourceKey="SemiYellow5" />
+    <StaticResource x:Key="LabelTagGhostAmberBorderBrush" ResourceKey="SemiAmber4" />
+    <StaticResource x:Key="LabelTagGhostAmberForeground" ResourceKey="SemiAmber5" />
+    <StaticResource x:Key="LabelTagGhostOrangeBorderBrush" ResourceKey="SemiOrange4" />
+    <StaticResource x:Key="LabelTagGhostOrangeForeground" ResourceKey="SemiOrange5" />
+    <StaticResource x:Key="LabelTagGhostGreyBorderBrush" ResourceKey="SemiGrey4" />
+    <StaticResource x:Key="LabelTagGhostGreyForeground" ResourceKey="SemiGrey5" />
 
-    <SolidColorBrush x:Key="LabelTagSolidForeground" Color="White" />
-    <SolidColorBrush x:Key="LabelTagSolidRedBackground" Color="#FC725A" />
-    <SolidColorBrush x:Key="LabelTagSolidPinkBackground" Color="#EF5686" />
-    <SolidColorBrush x:Key="LabelTagSolidPurpleBackground" Color="#B553C2" />
-    <SolidColorBrush x:Key="LabelTagSolidVioletBackground" Color="#8865D4" />
-    <SolidColorBrush x:Key="LabelTagSolidIndigoBackground" Color="#5F71C5" />
-    <SolidColorBrush x:Key="LabelTagSolidBlueBackground" Color="#54A9FF" />
-    <SolidColorBrush x:Key="LabelTagSolidLightBlueBackground" Color="#40B4F3" />
-    <SolidColorBrush x:Key="LabelTagSolidCyanBackground" Color="#38BBC6" />
-    <SolidColorBrush x:Key="LabelTagSolidTealBackground" Color="#33C2B0" />
-    <SolidColorBrush x:Key="LabelTagSolidGreenBackground" Color="#5DC264" />
-    <SolidColorBrush x:Key="LabelTagSolidLightGreenBackground" Color="#97C65F" />
-    <SolidColorBrush x:Key="LabelTagSolidLimeBackground" Color="#AEDC3A" />
-    <SolidColorBrush x:Key="LabelTagSolidYellowBackground" Color="#FDDE43" />
-    <SolidColorBrush x:Key="LabelTagSolidAmberBackground" Color="#F5CA50" />
-    <SolidColorBrush x:Key="LabelTagSolidOrangeBackground" Color="#FFAE43" />
-    <SolidColorBrush x:Key="LabelTagSolidGreyBackground" Color="#888D92" />
+    <StaticResource x:Key="LabelTagSolidForeground" ResourceKey="SemiWhite" />
+    <StaticResource x:Key="LabelTagSolidRedBackground" ResourceKey="SemiRed5" />
+    <StaticResource x:Key="LabelTagSolidPinkBackground" ResourceKey="SemiPink5" />
+    <StaticResource x:Key="LabelTagSolidPurpleBackground" ResourceKey="SemiPurple5" />
+    <StaticResource x:Key="LabelTagSolidVioletBackground" ResourceKey="SemiViolet5" />
+    <StaticResource x:Key="LabelTagSolidIndigoBackground" ResourceKey="SemiIndigo5" />
+    <StaticResource x:Key="LabelTagSolidBlueBackground" ResourceKey="SemiBlue5" />
+    <StaticResource x:Key="LabelTagSolidLightBlueBackground" ResourceKey="SemiLightBlue5" />
+    <StaticResource x:Key="LabelTagSolidCyanBackground" ResourceKey="SemiCyan5" />
+    <StaticResource x:Key="LabelTagSolidTealBackground" ResourceKey="SemiTeal5" />
+    <StaticResource x:Key="LabelTagSolidGreenBackground" ResourceKey="SemiGreen5" />
+    <StaticResource x:Key="LabelTagSolidLightGreenBackground" ResourceKey="SemiLightGreen5" />
+    <StaticResource x:Key="LabelTagSolidLimeBackground" ResourceKey="SemiLime5" />
+    <StaticResource x:Key="LabelTagSolidYellowBackground" ResourceKey="SemiYellow5" />
+    <StaticResource x:Key="LabelTagSolidAmberBackground" ResourceKey="SemiAmber5" />
+    <StaticResource x:Key="LabelTagSolidOrangeBackground" ResourceKey="SemiOrange5" />
+    <StaticResource x:Key="LabelTagSolidGreyBackground" ResourceKey="SemiGrey5" />
 
-    <SolidColorBrush x:Key="LabelTagSolidWhiteBackground" Color="#4F5159" />
-    <SolidColorBrush x:Key="LabelTagSolidWhiteBorderBrush" Color="#41464C" />
-    <SolidColorBrush x:Key="LabelTagSolidWhiteForeground" Color="#F9F9F9" />
+    <StaticResource x:Key="LabelTagSolidWhiteForeground" ResourceKey="SemiColorText0" />
+    <StaticResource x:Key="LabelTagSolidWhiteBackground" ResourceKey="SemiColorBackground4" />
+    <SolidColorBrush x:Key="LabelTagSolidWhiteBorderBrush" Opacity="0.7" Color="{StaticResource SemiGrey2Color}" />
+
+    <!-- Obsolete -->
+    <StaticResource x:Key="LabelTagLightWhiteForeground" ResourceKey="LabelTagSolidWhiteForeground" />
+    <StaticResource x:Key="LabelTagLightWhiteBackground" ResourceKey="LabelTagSolidWhiteBackground" />
+    <StaticResource x:Key="LabelTagLightWhiteBorderBrush" ResourceKey="LabelTagSolidWhiteBorderBrush" />
+    <StaticResource x:Key="LabelTagGhostWhiteForeground" ResourceKey="LabelTagSolidWhiteForeground" />
+    <StaticResource x:Key="LabelTagGhostWhiteBackground" ResourceKey="LabelTagSolidWhiteBackground" />
+    <StaticResource x:Key="LabelTagGhostWhiteBorderBrush" ResourceKey="LabelTagSolidWhiteBorderBrush" />
 </ResourceDictionary>

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

@@ -4,7 +4,7 @@
     <SolidColorBrush x:Key="RadioButtonUncheckIconDefaultBackground" Color="Transparent" />
     <StaticResource x:Key="RadioButtonUncheckIconPointeroverBackground" ResourceKey="SemiColorFill0" />
     <StaticResource x:Key="RadioButtonUncheckIconPressedBackground" ResourceKey="SemiColorFill1" />
-    <StaticResource x:Key="RadioButtonUncheckIconDisabledBackground" ResourceKey="SemiColorFill0" />
+    <StaticResource x:Key="RadioButtonUncheckIconDisabledBackground" ResourceKey="SemiColorDisabledFill" />
     <StaticResource x:Key="RadioButtonUncheckIconDefaultBorderBrush" ResourceKey="SemiColorText3" />
     <StaticResource x:Key="RadioButtonUncheckIconPointeroverBorderBrush" ResourceKey="SemiColorPrimaryPointerover" />
     <StaticResource x:Key="RadioButtonUncheckIconPressedBorderBrush" ResourceKey="SemiColorPrimaryActive" />

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

@@ -1,2 +1,3 @@
 <ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+    <StaticResource x:Key="TabControlSeparatorBorderBrush" ResourceKey="SemiColorBorder" />
 </ResourceDictionary>

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

@@ -5,6 +5,18 @@
     <StaticResource x:Key="TabItemLinePipePointeroverBorderBrush" ResourceKey="SemiColorFill1" />
     <StaticResource x:Key="TabItemLinePipePressedBorderBrush" ResourceKey="SemiColorFill2" />
     <StaticResource x:Key="TabItemLineHeaderForeground" ResourceKey="SemiColorText2" />
-    <StaticResource x:Key="TabItemLineHeaderPointeroverForeground" ResourceKey="SemiColorText1" />
+    <StaticResource x:Key="TabItemLineHeaderPointeroverForeground" ResourceKey="SemiColorText0" />
     <StaticResource x:Key="TabItemLineHeaderSelectedForeground" ResourceKey="SemiColorText0" />
+    <StaticResource x:Key="TabItemLineHeaderSelectedBackground" ResourceKey="SemiColorPrimaryLight" />
+    <StaticResource x:Key="TabItemLineHeaderPointeroverBackground" ResourceKey="SemiColorFill0" />
+    <StaticResource x:Key="TabItemLineHeaderPressedBackground" ResourceKey="SemiColorFill1" />
+    <!--  Card  -->
+    <StaticResource x:Key="TabItemCardHeaderSelectedBackground" ResourceKey="SemiColorBackground0" />
+    <StaticResource x:Key="TabItemCardHeaderPointeroverBackground" ResourceKey="SemiColorFill0" />
+    <StaticResource x:Key="TabItemCardHeaderPressedBackground" ResourceKey="SemiColorFill1" />
+    <!--  Button  -->
+    <StaticResource x:Key="TabItemButtonHeaderSelectedForeground" ResourceKey="SemiColorPrimary" />
+    <StaticResource x:Key="TabItemButtonHeaderSelectedBackground" ResourceKey="SemiColorPrimaryLight" />
+    <StaticResource x:Key="TabItemButtonHeaderPointeroverBackground" ResourceKey="SemiColorFill0" />
+    <StaticResource x:Key="TabItemButtonHeaderPressedBackground" ResourceKey="SemiColorFill1" />
 </ResourceDictionary>

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

@@ -2,7 +2,6 @@
     <StaticResource x:Key="CheckBoxForeground" ResourceKey="SemiColorWindowText" />
     <StaticResource x:Key="CheckBoxDisabledForeground" ResourceKey="SemiColorGrayText" />
     <StaticResource x:Key="CheckBoxGlyphFill" ResourceKey="SemiColorHighlightText" />
-    <StaticResource x:Key="CheckBoxGlyphDisabledFill" ResourceKey="SemiColorHighlightText" />
     <StaticResource x:Key="CheckBoxDefaultBackground" ResourceKey="SemiColorWindow" />
     <StaticResource x:Key="CheckBoxDefaultBorderBrush" ResourceKey="SemiColorButtonText" />
     <StaticResource x:Key="CheckBoxPointeroverBackground" ResourceKey="SemiColorHighlightText" />
@@ -26,4 +25,7 @@
     <StaticResource x:Key="CheckBoxCardPressedBackground" ResourceKey="SemiColorWindow" />
     <StaticResource x:Key="CheckBoxCardCheckedPointeroverBorderBrush" ResourceKey="SemiColorButtonText" />
     <StaticResource x:Key="CheckBoxCardCheckedPressedBorderBrush" ResourceKey="SemiColorHighlight" />
+
+    <!-- Obsolete -->
+    <StaticResource x:Key="CheckBoxGlyphDisabledFill" ResourceKey="SemiColorHighlightText" />
 </ResourceDictionary>

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

@@ -1,2 +1,3 @@
 <ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+    <StaticResource x:Key="TabControlSeparatorBorderBrush" ResourceKey="SemiColorWindowText" />
 </ResourceDictionary>

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

@@ -7,4 +7,16 @@
     <StaticResource x:Key="TabItemLineHeaderForeground" ResourceKey="SemiColorWindowText" />
     <StaticResource x:Key="TabItemLineHeaderPointeroverForeground" ResourceKey="SemiColorWindowText" />
     <StaticResource x:Key="TabItemLineHeaderSelectedForeground" ResourceKey="SemiColorWindowText" />
+    <StaticResource x:Key="TabItemLineHeaderSelectedBackground" ResourceKey="SemiColorWindow" />
+    <StaticResource x:Key="TabItemLineHeaderPointeroverBackground" ResourceKey="SemiColorHighlightText" />
+    <StaticResource x:Key="TabItemLineHeaderPressedBackground" ResourceKey="SemiColorHighlightText" />
+    <!--  Card  -->
+    <StaticResource x:Key="TabItemCardHeaderSelectedBackground" ResourceKey="SemiColorHighlight" />
+    <StaticResource x:Key="TabItemCardHeaderPointeroverBackground" ResourceKey="SemiColorHighlightText" />
+    <StaticResource x:Key="TabItemCardHeaderPressedBackground" ResourceKey="SemiColorHighlightText" />
+    <!--  Button  -->
+    <StaticResource x:Key="TabItemButtonHeaderSelectedForeground" ResourceKey="SemiColorHighlight" />
+    <StaticResource x:Key="TabItemButtonHeaderSelectedBackground" ResourceKey="SemiColorHighlightText" />
+    <StaticResource x:Key="TabItemButtonHeaderPointeroverBackground" ResourceKey="SemiColorHighlightText" />
+    <StaticResource x:Key="TabItemButtonHeaderPressedBackground" ResourceKey="SemiColorHighlightText" />
 </ResourceDictionary>

src/Semi.Avalonia/Themes/Light/CheckBox.axaml

@@ -2,7 +2,6 @@
     <StaticResource x:Key="CheckBoxForeground" ResourceKey="SemiColorText0" />
     <StaticResource x:Key="CheckBoxDisabledForeground" ResourceKey="SemiColorDisabledText" />
     <StaticResource x:Key="CheckBoxGlyphFill" ResourceKey="SemiColorWhite" />
-    <StaticResource x:Key="CheckBoxGlyphDisabledFill" ResourceKey="SemiColorWhite" />
     <SolidColorBrush x:Key="CheckBoxDefaultBackground" Color="Transparent" />
     <StaticResource x:Key="CheckBoxDefaultBorderBrush" ResourceKey="SemiColorText3" />
     <StaticResource x:Key="CheckBoxPointeroverBackground" ResourceKey="SemiColorFill0" />
@@ -26,4 +25,7 @@
     <StaticResource x:Key="CheckBoxCardPressedBackground" ResourceKey="SemiColorFill1" />
     <StaticResource x:Key="CheckBoxCardCheckedPointeroverBorderBrush" ResourceKey="SemiColorPrimaryPointerover" />
     <StaticResource x:Key="CheckBoxCardCheckedPressedBorderBrush" ResourceKey="SemiColorPrimaryActive" />
+
+    <!-- Obsolete -->
+    <StaticResource x:Key="CheckBoxGlyphDisabledFill" ResourceKey="SemiColorWhite" />
 </ResourceDictionary>

src/Semi.Avalonia/Themes/Light/Label.axaml

@@ -1,95 +1,98 @@
 <ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
     <!--  Typography related resources are combined with TextBlock  -->
-    <SolidColorBrush x:Key="LabelTagLightRedForeground" Color="#8E0805" />
-    <SolidColorBrush x:Key="LabelTagLightRedBackground" Opacity="0.15" Color="#F93920" />
-    <SolidColorBrush x:Key="LabelTagLightPinkForeground" Color="#7E053A" />
-    <SolidColorBrush x:Key="LabelTagLightPinkBackground" Opacity="0.15" Color="#E91E63" />
-    <SolidColorBrush x:Key="LabelTagLightPurpleForeground" Color="#5C0F75" />
-    <SolidColorBrush x:Key="LabelTagLightPurpleBackground" Opacity="0.15" Color="#9E28B3" />
-    <SolidColorBrush x:Key="LabelTagLightVioletForeground" Color="#6A3AC7" />
-    <SolidColorBrush x:Key="LabelTagLightVioletBackground" Opacity="0.15" Color="#361C8A" />
-    <SolidColorBrush x:Key="LabelTagLightIndigoForeground" Color="#1F2878" />
-    <SolidColorBrush x:Key="LabelTagLightIndigoBackground" Opacity="0.15" Color="#3F51B5" />
-    <SolidColorBrush x:Key="LabelTagLightBlueForeground" Color="#003D8F" />
-    <SolidColorBrush x:Key="LabelTagLightBlueBackground" Opacity="0.15" Color="#0077FA" />
-    <SolidColorBrush x:Key="LabelTagLightLightBlueForeground" Color="#004B83" />
-    <SolidColorBrush x:Key="LabelTagLightLightBlueBackground" Opacity="0.15" Color="#0095EE" />
-    <SolidColorBrush x:Key="LabelTagLightCyanForeground" Color="#004D5B" />
-    <SolidColorBrush x:Key="LabelTagLightCyanBackground" Opacity="0.15" Color="#05A4B6" />
-    <SolidColorBrush x:Key="LabelTagLightTealForeground" Color="#005955" />
-    <SolidColorBrush x:Key="LabelTagLightTealBackground" Opacity="0.15" Color="#00B3A1" />
-    <SolidColorBrush x:Key="LabelTagLightGreenForeground" Color="#1B5924" />
-    <SolidColorBrush x:Key="LabelTagLightGreenBackground" Opacity="0.15" Color="#3BB346" />
-    <SolidColorBrush x:Key="LabelTagLightLightGreenForeground" Color="#395B1B" />
-    <SolidColorBrush x:Key="LabelTagLightLightGreenBackground" Opacity="0.15" Color="#7BB63C" />
-    <SolidColorBrush x:Key="LabelTagLightLimeForeground" Color="#486800" />
-    <SolidColorBrush x:Key="LabelTagLightLimeBackground" Opacity="0.15" Color="#9BD100" />
-    <SolidColorBrush x:Key="LabelTagLightYellowForeground" Color="#7D6A00" />
-    <SolidColorBrush x:Key="LabelTagLightYellowBackground" Opacity="0.15" Color="#FAC800" />
-    <SolidColorBrush x:Key="LabelTagLightAmberForeground" Color="#784606" />
-    <SolidColorBrush x:Key="LabelTagLightAmberBackground" Opacity="0.15" Color="#F0B114" />
-    <SolidColorBrush x:Key="LabelTagLightOrangeForeground" Color="#7E3100" />
-    <SolidColorBrush x:Key="LabelTagLightOrangeBackground" Opacity="0.15" Color="#FC8800" />
-    <SolidColorBrush x:Key="LabelTagLightGreyForeground" Color="#2E3238" />
-    <SolidColorBrush x:Key="LabelTagLightGreyBackground" Opacity="0.15" Color="#6B7075" />
-    <SolidColorBrush x:Key="LabelTagLightWhiteForeground" Color="#1C1F23" />
-    <SolidColorBrush x:Key="LabelTagLightWhiteBackground" Opacity="0.15" Color="White" />
-    <SolidColorBrush x:Key="LabelTagLightWhiteBorderBrush" Color="#C6CACD" />
+    <StaticResource x:Key="LabelTagLightRedForeground" ResourceKey="SemiRed8" />
+    <SolidColorBrush x:Key="LabelTagLightRedBackground" Opacity="0.15" Color="{StaticResource SemiRed5Color}" />
+    <StaticResource x:Key="LabelTagLightPinkForeground" ResourceKey="SemiPink8" />
+    <SolidColorBrush x:Key="LabelTagLightPinkBackground" Opacity="0.15" Color="{StaticResource SemiPink5Color}" />
+    <StaticResource x:Key="LabelTagLightPurpleForeground" ResourceKey="SemiPurple8" />
+    <SolidColorBrush x:Key="LabelTagLightPurpleBackground" Opacity="0.15" Color="{StaticResource SemiPurple5Color}" />
+    <StaticResource x:Key="LabelTagLightVioletForeground" ResourceKey="SemiViolet8" />
+    <SolidColorBrush x:Key="LabelTagLightVioletBackground" Opacity="0.15" Color="{StaticResource SemiViolet5Color}" />
+    <StaticResource x:Key="LabelTagLightIndigoForeground" ResourceKey="SemiIndigo8" />
+    <SolidColorBrush x:Key="LabelTagLightIndigoBackground" Opacity="0.15" Color="{StaticResource SemiIndigo5Color}" />
+    <StaticResource x:Key="LabelTagLightBlueForeground" ResourceKey="SemiBlue8" />
+    <SolidColorBrush x:Key="LabelTagLightBlueBackground" Opacity="0.15" Color="{StaticResource SemiBlue5Color}" />
+    <StaticResource x:Key="LabelTagLightLightBlueForeground" ResourceKey="SemiLightBlue8" />
+    <SolidColorBrush x:Key="LabelTagLightLightBlueBackground" Opacity="0.15" Color="{StaticResource SemiLightBlue5Color}" />
+    <StaticResource x:Key="LabelTagLightCyanForeground" ResourceKey="SemiCyan8" />
+    <SolidColorBrush x:Key="LabelTagLightCyanBackground" Opacity="0.15" Color="{StaticResource SemiCyan5Color}" />
+    <StaticResource x:Key="LabelTagLightTealForeground" ResourceKey="SemiTeal8" />
+    <SolidColorBrush x:Key="LabelTagLightTealBackground" Opacity="0.15" Color="{StaticResource SemiTeal5Color}" />
+    <StaticResource x:Key="LabelTagLightGreenForeground" ResourceKey="SemiGreen8" />
+    <SolidColorBrush x:Key="LabelTagLightGreenBackground" Opacity="0.15" Color="{StaticResource SemiGreen5Color}" />
+    <StaticResource x:Key="LabelTagLightLightGreenForeground" ResourceKey="SemiLightGreen8" />
+    <SolidColorBrush x:Key="LabelTagLightLightGreenBackground" Opacity="0.15" Color="{StaticResource SemiLightGreen5Color}" />
+    <StaticResource x:Key="LabelTagLightLimeForeground" ResourceKey="SemiLime8" />
+    <SolidColorBrush x:Key="LabelTagLightLimeBackground" Opacity="0.15" Color="{StaticResource SemiLime5Color}" />
+    <StaticResource x:Key="LabelTagLightYellowForeground" ResourceKey="SemiYellow8" />
+    <SolidColorBrush x:Key="LabelTagLightYellowBackground" Opacity="0.15" Color="{StaticResource SemiYellow5Color}" />
+    <StaticResource x:Key="LabelTagLightAmberForeground" ResourceKey="SemiAmber8" />
+    <SolidColorBrush x:Key="LabelTagLightAmberBackground" Opacity="0.15" Color="{StaticResource SemiAmber5Color}" />
+    <StaticResource x:Key="LabelTagLightOrangeForeground" ResourceKey="SemiOrange8" />
+    <SolidColorBrush x:Key="LabelTagLightOrangeBackground" Opacity="0.15" Color="{StaticResource SemiOrange5Color}" />
+    <StaticResource x:Key="LabelTagLightGreyForeground" ResourceKey="SemiGrey8" />
+    <SolidColorBrush x:Key="LabelTagLightGreyBackground" Opacity="0.15" Color="{StaticResource SemiGrey5Color}" />
 
-    <SolidColorBrush x:Key="LabelTagGhostRedBorderBrush" Color="#FA664C" />
-    <SolidColorBrush x:Key="LabelTagGhostRedForeground" Color="#F93920" />
-    <SolidColorBrush x:Key="LabelTagGhostPinkBorderBrush" Color="#ED487B" />
-    <SolidColorBrush x:Key="LabelTagGhostPinkForeground" Color="#E91E63" />
-    <SolidColorBrush x:Key="LabelTagGhostPurpleBorderBrush" Color="#B449C2" />
-    <SolidColorBrush x:Key="LabelTagGhostPurpleForeground" Color="#9E28B3" />
-    <SolidColorBrush x:Key="LabelTagGhostVioletBorderBrush" Color="#885BD2" />
-    <SolidColorBrush x:Key="LabelTagGhostVioletForeground" Color="#6A3AC7" />
-    <SolidColorBrush x:Key="LabelTagGhostIndigoBorderBrush" Color="#5E6FC4" />
-    <SolidColorBrush x:Key="LabelTagGhostIndigoForeground" Color="#3F51B5" />
-    <SolidColorBrush x:Key="LabelTagGhostBlueBorderBrush" Color="#3295FB" />
-    <SolidColorBrush x:Key="LabelTagGhostBlueForeground" Color="#0077FA" />
-    <SolidColorBrush x:Key="LabelTagGhostLightBlueBorderBrush" Color="#30ACF1" />
-    <SolidColorBrush x:Key="LabelTagGhostLightBlueForeground" Color="#0095EE" />
-    <SolidColorBrush x:Key="LabelTagGhostCyanBorderBrush" Color="#2CB8C5" />
-    <SolidColorBrush x:Key="LabelTagGhostCyanForeground" Color="#05A4B6" />
-    <SolidColorBrush x:Key="LabelTagGhostTealBorderBrush" Color="#27C2B0" />
-    <SolidColorBrush x:Key="LabelTagGhostTealForeground" Color="#00B3A1" />
-    <SolidColorBrush x:Key="LabelTagGhostGreenBorderBrush" Color="#5AC262" />
-    <SolidColorBrush x:Key="LabelTagGhostGreenForeground" Color="#3BB346" />
-    <SolidColorBrush x:Key="LabelTagGhostLightGreenBorderBrush" Color="#93C55B" />
-    <SolidColorBrush x:Key="LabelTagGhostLightGreenForeground" Color="#7BB63C" />
-    <SolidColorBrush x:Key="LabelTagGhostLimeBorderBrush" Color="#A7DA2C" />
-    <SolidColorBrush x:Key="LabelTagGhostLimeForeground" Color="#9BD100" />
-    <SolidColorBrush x:Key="LabelTagGhostYellowBorderBrush" Color="#FBDA32" />
-    <SolidColorBrush x:Key="LabelTagGhostYellowForeground" Color="#FAC800" />
-    <SolidColorBrush x:Key="LabelTagGhostAmberBorderBrush" Color="#F3C341" />
-    <SolidColorBrush x:Key="LabelTagGhostAmberForeground" Color="#F0B114" />
-    <SolidColorBrush x:Key="LabelTagGhostOrangeBorderBrush" Color="#FDA633" />
-    <SolidColorBrush x:Key="LabelTagGhostOrangeForeground" Color="#FC8800" />
-    <SolidColorBrush x:Key="LabelTagGhostGreyBorderBrush" Color="#888D92" />
-    <SolidColorBrush x:Key="LabelTagGhostGreyForeground" Color="#6B7075" />
-    <SolidColorBrush x:Key="LabelTagGhostWhiteBorderBrush" Color="#C6CACD" />
-    <SolidColorBrush x:Key="LabelTagGhostWhiteForeground" Color="#1C1F23" />
+    <StaticResource x:Key="LabelTagGhostRedBorderBrush" ResourceKey="SemiRed4" />
+    <StaticResource x:Key="LabelTagGhostRedForeground" ResourceKey="SemiRed5" />
+    <StaticResource x:Key="LabelTagGhostPinkBorderBrush" ResourceKey="SemiPink4" />
+    <StaticResource x:Key="LabelTagGhostPinkForeground" ResourceKey="SemiPink5" />
+    <StaticResource x:Key="LabelTagGhostPurpleBorderBrush" ResourceKey="SemiPurple4" />
+    <StaticResource x:Key="LabelTagGhostPurpleForeground" ResourceKey="SemiPurple5" />
+    <StaticResource x:Key="LabelTagGhostVioletBorderBrush" ResourceKey="SemiViolet4" />
+    <StaticResource x:Key="LabelTagGhostVioletForeground" ResourceKey="SemiViolet5" />
+    <StaticResource x:Key="LabelTagGhostIndigoBorderBrush" ResourceKey="SemiIndigo4" />
+    <StaticResource x:Key="LabelTagGhostIndigoForeground" ResourceKey="SemiIndigo5" />
+    <StaticResource x:Key="LabelTagGhostBlueBorderBrush" ResourceKey="SemiBlue4" />
+    <StaticResource x:Key="LabelTagGhostBlueForeground" ResourceKey="SemiBlue5" />
+    <StaticResource x:Key="LabelTagGhostLightBlueBorderBrush" ResourceKey="SemiLightBlue4" />
+    <StaticResource x:Key="LabelTagGhostLightBlueForeground" ResourceKey="SemiLightBlue5" />
+    <StaticResource x:Key="LabelTagGhostCyanBorderBrush" ResourceKey="SemiCyan4" />
+    <StaticResource x:Key="LabelTagGhostCyanForeground" ResourceKey="SemiCyan5" />
+    <StaticResource x:Key="LabelTagGhostTealBorderBrush" ResourceKey="SemiTeal4" />
+    <StaticResource x:Key="LabelTagGhostTealForeground" ResourceKey="SemiTeal5" />
+    <StaticResource x:Key="LabelTagGhostGreenBorderBrush" ResourceKey="SemiGreen4" />
+    <StaticResource x:Key="LabelTagGhostGreenForeground" ResourceKey="SemiGreen5" />
+    <StaticResource x:Key="LabelTagGhostLightGreenBorderBrush" ResourceKey="SemiLightGreen4" />
+    <StaticResource x:Key="LabelTagGhostLightGreenForeground" ResourceKey="SemiLightGreen5" />
+    <StaticResource x:Key="LabelTagGhostLimeBorderBrush" ResourceKey="SemiLime4" />
+    <StaticResource x:Key="LabelTagGhostLimeForeground" ResourceKey="SemiLime5" />
+    <StaticResource x:Key="LabelTagGhostYellowBorderBrush" ResourceKey="SemiYellow4" />
+    <StaticResource x:Key="LabelTagGhostYellowForeground" ResourceKey="SemiYellow5" />
+    <StaticResource x:Key="LabelTagGhostAmberBorderBrush" ResourceKey="SemiAmber4" />
+    <StaticResource x:Key="LabelTagGhostAmberForeground" ResourceKey="SemiAmber5" />
+    <StaticResource x:Key="LabelTagGhostOrangeBorderBrush" ResourceKey="SemiOrange4" />
+    <StaticResource x:Key="LabelTagGhostOrangeForeground" ResourceKey="SemiOrange5" />
+    <StaticResource x:Key="LabelTagGhostGreyBorderBrush" ResourceKey="SemiGrey4" />
+    <StaticResource x:Key="LabelTagGhostGreyForeground" ResourceKey="SemiGrey5" />
 
-    <SolidColorBrush x:Key="LabelTagSolidForeground" Color="White" />
-    <SolidColorBrush x:Key="LabelTagSolidRedBackground" Color="#F93920" />
-    <SolidColorBrush x:Key="LabelTagSolidPinkBackground" Color="#E91E63" />
-    <SolidColorBrush x:Key="LabelTagSolidPurpleBackground" Color="#9E28B3" />
-    <SolidColorBrush x:Key="LabelTagSolidVioletBackground" Color="#6A3AC7" />
-    <SolidColorBrush x:Key="LabelTagSolidIndigoBackground" Color="#3F51B5" />
-    <SolidColorBrush x:Key="LabelTagSolidBlueBackground" Color="#0077FA" />
-    <SolidColorBrush x:Key="LabelTagSolidLightBlueBackground" Color="#0095EE" />
-    <SolidColorBrush x:Key="LabelTagSolidCyanBackground" Color="#05A4B6" />
-    <SolidColorBrush x:Key="LabelTagSolidTealBackground" Color="#00B3A1" />
-    <SolidColorBrush x:Key="LabelTagSolidGreenBackground" Color="#3BB346" />
-    <SolidColorBrush x:Key="LabelTagSolidLightGreenBackground" Color="#7BB63C" />
-    <SolidColorBrush x:Key="LabelTagSolidLimeBackground" Color="#9BD100" />
-    <SolidColorBrush x:Key="LabelTagSolidYellowBackground" Color="#FAC800" />
-    <SolidColorBrush x:Key="LabelTagSolidAmberBackground" Color="#F0B114" />
-    <SolidColorBrush x:Key="LabelTagSolidOrangeBackground" Color="#FC8800" />
-    <SolidColorBrush x:Key="LabelTagSolidGreyBackground" Color="#6B7075" />
+    <StaticResource x:Key="LabelTagSolidForeground" ResourceKey="SemiWhite" />
+    <StaticResource x:Key="LabelTagSolidRedBackground" ResourceKey="SemiRed5" />
+    <StaticResource x:Key="LabelTagSolidPinkBackground" ResourceKey="SemiPink5" />
+    <StaticResource x:Key="LabelTagSolidPurpleBackground" ResourceKey="SemiPurple5" />
+    <StaticResource x:Key="LabelTagSolidVioletBackground" ResourceKey="SemiViolet5" />
+    <StaticResource x:Key="LabelTagSolidIndigoBackground" ResourceKey="SemiIndigo5" />
+    <StaticResource x:Key="LabelTagSolidBlueBackground" ResourceKey="SemiBlue5" />
+    <StaticResource x:Key="LabelTagSolidLightBlueBackground" ResourceKey="SemiLightBlue5" />
+    <StaticResource x:Key="LabelTagSolidCyanBackground" ResourceKey="SemiCyan5" />
+    <StaticResource x:Key="LabelTagSolidTealBackground" ResourceKey="SemiTeal5" />
+    <StaticResource x:Key="LabelTagSolidGreenBackground" ResourceKey="SemiGreen5" />
+    <StaticResource x:Key="LabelTagSolidLightGreenBackground" ResourceKey="SemiLightGreen5" />
+    <StaticResource x:Key="LabelTagSolidLimeBackground" ResourceKey="SemiLime5" />
+    <StaticResource x:Key="LabelTagSolidYellowBackground" ResourceKey="SemiYellow5" />
+    <StaticResource x:Key="LabelTagSolidAmberBackground" ResourceKey="SemiAmber5" />
+    <StaticResource x:Key="LabelTagSolidOrangeBackground" ResourceKey="SemiOrange5" />
+    <StaticResource x:Key="LabelTagSolidGreyBackground" ResourceKey="SemiGrey5" />
 
-    <SolidColorBrush x:Key="LabelTagSolidWhiteBackground" Color="White" />
-    <SolidColorBrush x:Key="LabelTagSolidWhiteBorderBrush" Color="#C6CACD" />
-    <SolidColorBrush x:Key="LabelTagSolidWhiteForeground" Color="#1C1F23" />
+    <StaticResource x:Key="LabelTagSolidWhiteForeground" ResourceKey="SemiColorText0" />
+    <StaticResource x:Key="LabelTagSolidWhiteBackground" ResourceKey="SemiColorBackground4" />
+    <SolidColorBrush x:Key="LabelTagSolidWhiteBorderBrush" Opacity="0.7" Color="{StaticResource SemiGrey2Color}" />
+
+    <!-- Obsolete -->
+    <StaticResource x:Key="LabelTagLightWhiteForeground" ResourceKey="LabelTagSolidWhiteForeground" />
+    <StaticResource x:Key="LabelTagLightWhiteBackground" ResourceKey="LabelTagSolidWhiteBackground" />
+    <StaticResource x:Key="LabelTagLightWhiteBorderBrush" ResourceKey="LabelTagSolidWhiteBorderBrush" />
+    <StaticResource x:Key="LabelTagGhostWhiteForeground" ResourceKey="LabelTagSolidWhiteForeground" />
+    <StaticResource x:Key="LabelTagGhostWhiteBackground" ResourceKey="LabelTagSolidWhiteBackground" />
+    <StaticResource x:Key="LabelTagGhostWhiteBorderBrush" ResourceKey="LabelTagSolidWhiteBorderBrush" />
 </ResourceDictionary>

src/Semi.Avalonia/Themes/Light/RadioButton.axaml

@@ -4,7 +4,7 @@
     <SolidColorBrush x:Key="RadioButtonUncheckIconDefaultBackground" Color="Transparent" />
     <StaticResource x:Key="RadioButtonUncheckIconPointeroverBackground" ResourceKey="SemiColorFill0" />
     <StaticResource x:Key="RadioButtonUncheckIconPressedBackground" ResourceKey="SemiColorFill1" />
-    <StaticResource x:Key="RadioButtonUncheckIconDisabledBackground" ResourceKey="SemiColorFill0" />
+    <StaticResource x:Key="RadioButtonUncheckIconDisabledBackground" ResourceKey="SemiColorDisabledFill" />
     <StaticResource x:Key="RadioButtonUncheckIconDefaultBorderBrush" ResourceKey="SemiColorText3" />
     <StaticResource x:Key="RadioButtonUncheckIconPointeroverBorderBrush" ResourceKey="SemiColorPrimaryPointerover" />
     <StaticResource x:Key="RadioButtonUncheckIconPressedBorderBrush" ResourceKey="SemiColorPrimaryActive" />

src/Semi.Avalonia/Themes/Light/TabControl.axaml

@@ -1,2 +1,3 @@
 <ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+    <StaticResource x:Key="TabControlSeparatorBorderBrush" ResourceKey="SemiColorBorder" />
 </ResourceDictionary>

src/Semi.Avalonia/Themes/Light/TabItem.axaml

@@ -5,6 +5,18 @@
     <StaticResource x:Key="TabItemLinePipePointeroverBorderBrush" ResourceKey="SemiColorFill1" />
     <StaticResource x:Key="TabItemLinePipePressedBorderBrush" ResourceKey="SemiColorFill2" />
     <StaticResource x:Key="TabItemLineHeaderForeground" ResourceKey="SemiColorText2" />
-    <StaticResource x:Key="TabItemLineHeaderPointeroverForeground" ResourceKey="SemiColorText1" />
+    <StaticResource x:Key="TabItemLineHeaderPointeroverForeground" ResourceKey="SemiColorText0" />
     <StaticResource x:Key="TabItemLineHeaderSelectedForeground" ResourceKey="SemiColorText0" />
+    <StaticResource x:Key="TabItemLineHeaderSelectedBackground" ResourceKey="SemiColorPrimaryLight" />
+    <StaticResource x:Key="TabItemLineHeaderPointeroverBackground" ResourceKey="SemiColorFill0" />
+    <StaticResource x:Key="TabItemLineHeaderPressedBackground" ResourceKey="SemiColorFill1" />
+    <!--  Card  -->
+    <StaticResource x:Key="TabItemCardHeaderSelectedBackground" ResourceKey="SemiColorBackground0" />
+    <StaticResource x:Key="TabItemCardHeaderPointeroverBackground" ResourceKey="SemiColorFill0" />
+    <StaticResource x:Key="TabItemCardHeaderPressedBackground" ResourceKey="SemiColorFill1" />
+    <!--  Button  -->
+    <StaticResource x:Key="TabItemButtonHeaderSelectedForeground" ResourceKey="SemiColorPrimary" />
+    <StaticResource x:Key="TabItemButtonHeaderSelectedBackground" ResourceKey="SemiColorPrimaryLight" />
+    <StaticResource x:Key="TabItemButtonHeaderPointeroverBackground" ResourceKey="SemiColorFill0" />
+    <StaticResource x:Key="TabItemButtonHeaderPressedBackground" ResourceKey="SemiColorFill1" />
 </ResourceDictionary>

src/Semi.Avalonia/Themes/Shared/Label.axaml

@@ -5,6 +5,7 @@
     <x:Double x:Key="LabelTagSmallHeight">20</x:Double>
     <x:Double x:Key="LabelTagLargeHeight">24</x:Double>
     <StaticResource x:Key="LabelTagFontSize" ResourceKey="SemiFontSizeSmall" />
+    <StaticResource x:Key="LabelTagFontWeight" ResourceKey="SemiFontWeightRegular" />
     <StaticResource x:Key="LabelTagSquareCornerRadius" ResourceKey="SemiBorderRadiusSmall" />
     <StaticResource x:Key="LabelTagCircleCornerRadius" ResourceKey="SemiBorderRadiusFull" />
 </ResourceDictionary>

src/Semi.Avalonia/Themes/Shared/ScrollViewer.axaml

@@ -1,5 +1,6 @@
 <ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
     <StaticResource x:Key="ScrollBarThickness" ResourceKey="SemiSpacingTight" />
+    <x:Double x:Key="ScrollBarMinLength">24</x:Double>
     <StaticResource x:Key="ScrollBarThumbThickness" ResourceKey="SemiSpacingTight" />
     <StaticResource x:Key="ScrollBarThumbCornerRadius" ResourceKey="SemiBorderRadiusMedium" />
     <StaticResource x:Key="ScrollBarUpGlyph" ResourceKey="SemiIconSmallTriangleTop" />

src/Semi.Avalonia/Themes/Shared/TabItem.axaml

@@ -1,3 +1,4 @@
 <ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
     <StaticResource x:Key="TabItemSelectedFontWeight" ResourceKey="SemiFontWeightBold" />
+    <StaticResource x:Key="TabItemCardDefaultHeight" ResourceKey="SemiHeightControlDefault" />
 </ResourceDictionary>

src/Semi.Avalonia/Tokens/Palette/Light.axaml

@@ -57,7 +57,7 @@
     <Color x:Key="SemiBlue2Color">#98CDFD</Color>
     <Color x:Key="SemiBlue3Color">#65B2FC</Color>
     <Color x:Key="SemiBlue4Color">#3295FB</Color>
-    <Color x:Key="SemiBlue5Color">#0077FA</Color>
+    <Color x:Key="SemiBlue5Color">#0064FA</Color>
     <Color x:Key="SemiBlue6Color">#0062D6</Color>
     <Color x:Key="SemiBlue7Color">#004FB3</Color>
     <Color x:Key="SemiBlue8Color">#003D8F</Color>

src/Semi.Avalonia/Tokens/Variables.axaml

@@ -20,6 +20,10 @@
     <Thickness x:Key="SemiBorderThicknessControl">1</Thickness> <!-- 描边宽度 - 默认状态 -->
     <Thickness x:Key="SemiBorderThicknessControlFocus">1</Thickness> <!-- 描边宽度 - focus 状态 -->
     <CornerRadius x:Key="SemiBorderRadiusExtraSmall">3</CornerRadius> <!-- 圆角 - 超小 -->
+    <x:Double x:Key="SemiBorderRadiusSpacingSmall">3</x:Double> <!-- 半径 - 小 -->
+    <x:Double x:Key="SemiBorderRadiusSpacingMedium">6</x:Double> <!-- 半径 - 中 -->
+    <x:Double x:Key="SemiBorderRadiusSpacingLarge">12</x:Double> <!-- 半径 - 大 -->
+    <x:Double x:Key="SemiBorderRadiusSpacingFull">9999</x:Double> <!-- 半径 - 全圆 -->
     <CornerRadius x:Key="SemiBorderRadiusSmall">3</CornerRadius> <!-- 圆角 - 小 -->
     <CornerRadius x:Key="SemiBorderRadiusMedium">6</CornerRadius> <!-- 圆角 - 中 -->
     <CornerRadius x:Key="SemiBorderRadiusLarge">12</CornerRadius> <!-- 圆角 - 大 -->