zhusenlin/Semi.Avalonia
1
0
Fork 0
mirror of https://gitcode.com/gh_mirrors/se/Semi.Avalonia synced 2026-03-03 00:00:55 +08:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #572 from irihitech/tree

Browse Source 
enhance TreeDataGrid
This commit is contained in:
Dong Bin
2025-03-18 22:43:08 +08:00
committed by GitHub
parent 3b41331c67 a796cb828b
commit 992017951b
8 changed files with 55 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
demo/Semi.Avalonia.TreeDataGrid.Demo/Converters/FileIconConverter.cs
View File

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

18
demo/Semi.Avalonia.TreeDataGrid.Demo/MainWindow.axaml
View File

@@ -13,9 +13,9 @@
mc:Ignorable="d"> mc:Ignorable="d">
<Window.Resources> <Window.Resources>
<converters:FileIconConverter x:Key="FileIconConverter"> <converters:FileIconConverter x:Key="FileIconConverter">
<PathGeometry x:Key="file">M14,2H6A2,2 0 0,0 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2M18,20H6V4H13V9H18V20Z</PathGeometry> <StaticResource x:Key="file" ResourceKey="SemiIconFile" />
<PathGeometry x:Key="folderOpen">M6.1,10L4,18V8H21A2,2 0 0,0 19,6H12L10,4H4A2,2 0 0,0 2,6V18A2,2 0 0,0 4,20H19C19.9,20 20.7,19.4 20.9,18.5L23.2,10H6.1M19,18H6L7.6,12H20.6L19,18Z</PathGeometry> <StaticResource x:Key="folderOpen" ResourceKey="SemiIconFolderOpen" />
<PathGeometry x:Key="folderClosed">M20,18H4V8H20M20,6H12L10,4H4C2.89,4 2,4.89 2,6V18A2,2 0 0,0 4,20H20A2,2 0 0,0 22,18V8C22,6.89 21.1,6 20,6Z</PathGeometry> <StaticResource x:Key="folderClosed" ResourceKey="SemiIconFolder" />
</converters:FileIconConverter> </converters:FileIconConverter>
</Window.Resources> </Window.Resources>
<Grid RowDefinitions="Auto, *"> <Grid RowDefinitions="Auto, *">
@@ -58,7 +58,7 @@
</TreeDataGrid.Resources> </TreeDataGrid.Resources>
<TreeDataGrid.Styles> <TreeDataGrid.Styles>
<Style Selector="TreeDataGrid TreeDataGridRow:nth-last-child(2n)"> <Style Selector="TreeDataGrid TreeDataGridRow:nth-last-child(2n)">
<Setter Property="Background" Value="#20808080" /> <Setter Property="Background" Value="{DynamicResource SemiColorFill0}" />
</Style> </Style>
</TreeDataGrid.Styles> </TreeDataGrid.Styles>
</TreeDataGrid> </TreeDataGrid>
@@ -86,10 +86,8 @@
<DataTemplate x:Key="FileNameCell" DataType="vm:FileNodeViewModel"> <DataTemplate x:Key="FileNameCell" DataType="vm:FileNodeViewModel">
<StackPanel Orientation="Horizontal"> <StackPanel Orientation="Horizontal">
<PathIcon <PathIcon
Width="16" Theme="{StaticResource InnerPathIcon}"
Height="16" Margin="8,0">
Margin="8,0"
VerticalAlignment="Center">
<PathIcon.Data> <PathIcon.Data>
<MultiBinding Converter="{StaticResource FileIconConverter}"> <MultiBinding Converter="{StaticResource FileIconConverter}">
<Binding Path="IsDirectory" /> <Binding Path="IsDirectory" />
@@ -127,7 +125,7 @@
</TreeDataGrid.Resources> </TreeDataGrid.Resources>
<TreeDataGrid.Styles> <TreeDataGrid.Styles>
<Style Selector="TreeDataGrid TreeDataGridRow:nth-child(2n)"> <Style Selector="TreeDataGrid TreeDataGridRow:nth-child(2n)">
<Setter Property="Background" Value="#20808080" /> <Setter Property="Background" Value="{DynamicResource SemiColorFill0}" />
</Style> </Style>
</TreeDataGrid.Styles> </TreeDataGrid.Styles>
</TreeDataGrid> </TreeDataGrid>
@@ -135,4 +133,4 @@
</TabItem> </TabItem>
</TabControl> </TabControl>
</Grid> </Grid>
</Window> </Window>

16
src/Semi.Avalonia.TreeDataGrid/Dark.axaml
View File

@@ -1,11 +1,11 @@
<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">
<SolidColorBrush x:Key="TreeDataGridGridLinesBrush" Opacity="0.08" Color="White" /> <StaticResource x:Key="TreeDataGridGridLinesBrush" ResourceKey="SemiColorBorder" />
<SolidColorBrush x:Key="TreeDataGridHeaderPointerOverBackground" Opacity="0.16" Color="White" /> <StaticResource x:Key="TreeDataGridHeaderPointerOverBackground" ResourceKey="SemiColorFill1" />
<SolidColorBrush x:Key="TreeDataGridHeaderPressedBackground" Opacity="0.20" Color="White" /> <StaticResource x:Key="TreeDataGridHeaderPressedBackground" ResourceKey="SemiColorFill2" />
<SolidColorBrush x:Key="TreeDataGridHeaderPointerOverBorderBrush" Color="Transparent" /> <SolidColorBrush x:Key="TreeDataGridHeaderPointerOverBorderBrush" Color="Transparent" />
<SolidColorBrush x:Key="TreeDataGridHeaderPressedBorderBrush" Color="Transparent" /> <SolidColorBrush x:Key="TreeDataGridHeaderPressedBorderBrush" Color="Transparent" />
<SolidColorBrush x:Key="TreeDataGridHeaderPointerOverForeground" Opacity="0.8" Color="#F9F9F9" /> <StaticResource x:Key="TreeDataGridHeaderPointerOverForeground" ResourceKey="SemiColorText1" />
<SolidColorBrush x:Key="TreeDataGridHeaderPressedForeground" Opacity="1" Color="#F9F9F9" /> <StaticResource x:Key="TreeDataGridHeaderPressedForeground" ResourceKey="SemiColorText0" />
<SolidColorBrush x:Key="TreeDataGridCellSelectedBackground" Opacity="0.2" Color="#FF54A9FF" /> <StaticResource x:Key="TreeDataGridCellSelectedBackground" ResourceKey="SemiColorPrimaryLight" />
<SolidColorBrush x:Key="TreeDataGridColumnHeaderForeground" Opacity="0.6" Color="#F9F9F9" /> <StaticResource x:Key="TreeDataGridColumnHeaderForeground" ResourceKey="SemiColorText2" />
</ResourceDictionary> </ResourceDictionary>

16
src/Semi.Avalonia.TreeDataGrid/Light.axaml
View File

@@ -1,11 +1,11 @@
<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">
<SolidColorBrush x:Key="TreeDataGridGridLinesBrush" Opacity="0.08" Color="#1C1F23" /> <StaticResource x:Key="TreeDataGridGridLinesBrush" ResourceKey="SemiColorBorder" />
<SolidColorBrush x:Key="TreeDataGridHeaderPointerOverBackground" Opacity="0.09" Color="#2E3238" /> <StaticResource x:Key="TreeDataGridHeaderPointerOverBackground" ResourceKey="SemiColorFill1" />
<SolidColorBrush x:Key="TreeDataGridHeaderPressedBackground" Opacity="0.13" Color="#2E3238" /> <StaticResource x:Key="TreeDataGridHeaderPressedBackground" ResourceKey="SemiColorFill2" />
<SolidColorBrush x:Key="TreeDataGridHeaderPointerOverBorderBrush" Color="Transparent" /> <SolidColorBrush x:Key="TreeDataGridHeaderPointerOverBorderBrush" Color="Transparent" />
<SolidColorBrush x:Key="TreeDataGridHeaderPressedBorderBrush" Color="Transparent" /> <SolidColorBrush x:Key="TreeDataGridHeaderPressedBorderBrush" Color="Transparent" />
<SolidColorBrush x:Key="TreeDataGridHeaderPointerOverForeground" Opacity="0.8" Color="#1C1F23" /> <StaticResource x:Key="TreeDataGridHeaderPointerOverForeground" ResourceKey="SemiColorText1" />
<SolidColorBrush x:Key="TreeDataGridHeaderPressedForeground" Opacity="1" Color="#1C1F23" /> <StaticResource x:Key="TreeDataGridHeaderPressedForeground" ResourceKey="SemiColorText0" />
<SolidColorBrush x:Key="TreeDataGridCellSelectedBackground" Color="#EAF5FF" /> <StaticResource x:Key="TreeDataGridCellSelectedBackground" ResourceKey="SemiColorPrimaryLight" />
<SolidColorBrush x:Key="TreeDataGridColumnHeaderForeground" Opacity="0.62" Color="#1C1F23" /> <StaticResource x:Key="TreeDataGridColumnHeaderForeground" ResourceKey="SemiColorText2" />
</ResourceDictionary> </ResourceDictionary>

16
src/Semi.Avalonia.TreeDataGrid/Shared.axaml
View File

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

45
src/Semi.Avalonia.TreeDataGrid/TreeDataGrid.axaml
View File

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

4
src/Semi.Avalonia/Controls/TreeView.axaml
View File

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

1
src/Semi.Avalonia/Themes/Shared/TreeView.axaml
View File

@@ -1,7 +1,6 @@
<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">
<StaticResource x:Key="TreeViewItemDefaultCornerRadius" ResourceKey="SemiBorderRadiusSmall" /> <StaticResource x:Key="TreeViewItemDefaultCornerRadius" ResourceKey="SemiBorderRadiusSmall" />
<x:Double x:Key="TreeViewItemIndent">20</x:Double> <x:Double x:Key="TreeViewItemIndent">20</x:Double>
<x:Double x:Key="TreeViewItemIconSize">8</x:Double>
<StaticResource x:Key="ExpanderIconData" ResourceKey="SemiIconTreeTriangleRight" /> <StaticResource x:Key="ExpanderIconData" ResourceKey="SemiIconTreeTriangleRight" />
<Thickness x:Key="TreeViewItemIconMargin">8 0</Thickness> <Thickness x:Key="TreeViewItemIconMargin">8 0</Thickness>
<Thickness x:Key="TreeViewItemPadding">0 4 8 4</Thickness> <Thickness x:Key="TreeViewItemPadding">0 4 8 4</Thickness>