Merge pull request #572 from irihitech/tree

enhance TreeDataGrid

src/Semi.Avalonia.TreeDataGrid/Dark.axaml

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

src/Semi.Avalonia.TreeDataGrid/Light.axaml

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

src/Semi.Avalonia.TreeDataGrid/Shared.axaml

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

src/Semi.Avalonia.TreeDataGrid/TreeDataGrid.axaml

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

src/Semi.Avalonia/Controls/TreeView.axaml

@@ -71,8 +71,8 @@
                     Background="Transparent">
                     <PathIcon
                         Name="PART_ExpandIconPath"
-                        Width="{DynamicResource TreeViewItemIconSize}"
-                        Height="{DynamicResource TreeViewItemIconSize}"
+                        Theme="{StaticResource InnerPathIcon}"
+                        Classes="Small"
                         Data="{DynamicResource ExpanderIconData}"
                         Foreground="{DynamicResource TreeViewItemIconDefaultForeground}">
                         <PathIcon.Transitions>

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

@@ -1,7 +1,6 @@
 <ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
     <StaticResource x:Key="TreeViewItemDefaultCornerRadius" ResourceKey="SemiBorderRadiusSmall" />
     <x:Double x:Key="TreeViewItemIndent">20</x:Double>
-    <x:Double x:Key="TreeViewItemIconSize">8</x:Double>
     <StaticResource x:Key="ExpanderIconData" ResourceKey="SemiIconTreeTriangleRight" />
     <Thickness x:Key="TreeViewItemIconMargin">8 0</Thickness>
     <Thickness x:Key="TreeViewItemPadding">0 4 8 4</Thickness>