紧凑树形结构布局

This commit is contained in:
zhengxuan.zhang
2026-04-23 18:14:23 +08:00
parent ca86e8f7e8
commit ed4b1d8031
+76 -30
View File
@@ -24,7 +24,7 @@
<SolidColorBrush x:Key="TreeParentBg" Color="#F6F8FB" /> <SolidColorBrush x:Key="TreeParentBg" Color="#F6F8FB" />
<SolidColorBrush x:Key="TreeChildBg" Color="#FBFCFE" /> <SolidColorBrush x:Key="TreeChildBg" Color="#FBFCFE" />
<SolidColorBrush x:Key="TreeAccentBrush" Color="#2E6FA3" /> <SolidColorBrush x:Key="TreeAccentBrush" Color="#2E6FA3" />
<SolidColorBrush x:Key="TreeChildLineBrush" Color="#B9CDE0" /> <SolidColorBrush x:Key="TreeChildLineBrush" Color="#C7D4DF" />
<FontFamily x:Key="UiFont">Microsoft YaHei UI</FontFamily> <FontFamily x:Key="UiFont">Microsoft YaHei UI</FontFamily>
<Style x:Key="TreeItemStyle" TargetType="TreeViewItem"> <Style x:Key="TreeItemStyle" TargetType="TreeViewItem">
@@ -70,6 +70,19 @@
<Setter Property="FontFamily" Value="{StaticResource UiFont}" /> <Setter Property="FontFamily" Value="{StaticResource UiFont}" />
<Setter Property="FontSize" Value="11" /> <Setter Property="FontSize" Value="11" />
</Style> </Style>
<Style x:Key="TreeToolbarButton" TargetType="Button">
<Setter Property="Height" Value="24" />
<Setter Property="MinWidth" Value="42" />
<Setter Property="Margin" Value="0,0,4,0" />
<Setter Property="Padding" Value="8,0" />
<Setter Property="Background" Value="#F8F8F8" />
<Setter Property="BorderBrush" Value="#CFCFCF" />
<Setter Property="BorderThickness" Value="1" />
<Setter Property="Cursor" Value="Hand" />
<Setter Property="FontFamily" Value="{StaticResource UiFont}" />
<Setter Property="FontSize" Value="11" />
</Style>
</UserControl.Resources> </UserControl.Resources>
<Border <Border
@@ -91,13 +104,40 @@
<Grid Grid.Column="0"> <Grid Grid.Column="0">
<Grid.RowDefinitions> <Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" /> <RowDefinition Height="*" />
</Grid.RowDefinitions> </Grid.RowDefinitions>
<Border
Grid.Row="0"
Padding="6,5"
Background="{StaticResource HeaderBg}"
BorderBrush="{StaticResource SeparatorBrush}"
BorderThickness="0,0,0,1">
<WrapPanel>
<Button
Command="{Binding NewProgramCommand}"
Content="新建"
Style="{StaticResource TreeToolbarButton}" />
<Button
Command="{Binding SaveProgramCommand}"
Content="保存"
Style="{StaticResource TreeToolbarButton}" />
<Button
Command="{Binding LoadProgramCommand}"
Content="加载"
Style="{StaticResource TreeToolbarButton}" />
<Button
Command="{Binding ExportCsvCommand}"
Content="导出"
Style="{StaticResource TreeToolbarButton}" />
</WrapPanel>
</Border>
<TreeView <TreeView
x:Name="CncTreeView" x:Name="CncTreeView"
Grid.Row="0" Grid.Row="1"
Padding="4,6" Padding="3,5"
Background="Transparent" Background="Transparent"
BorderThickness="0" BorderThickness="0"
ItemsSource="{Binding ProgramTreeRoots}" ItemsSource="{Binding ProgramTreeRoots}"
@@ -109,29 +149,36 @@
ItemContainerStyle="{StaticResource TreeItemStyle}" ItemContainerStyle="{StaticResource TreeItemStyle}"
ItemsSource="{Binding Children}"> ItemsSource="{Binding Children}">
<Border <Border
x:Name="ProgramRootCard"
Margin="0,1,0,3" Margin="0,1,0,3"
Padding="2,4" Padding="0,2"
Background="Transparent" Background="Transparent"
BorderBrush="Transparent" BorderBrush="Transparent"
BorderThickness="1" BorderThickness="1"
CornerRadius="4"> CornerRadius="4">
<StackPanel Orientation="Horizontal"> <StackPanel Orientation="Horizontal">
<TextBlock <TextBlock
Margin="2,0,6,0" Margin="1,0,4,0"
VerticalAlignment="Center" VerticalAlignment="Center"
FontFamily="{StaticResource UiFont}" FontFamily="{StaticResource UiFont}"
FontSize="13" FontSize="12"
Foreground="#2B8A3E" Foreground="#2B8A3E"
Text="◆" /> Text="◆" />
<TextBlock <TextBlock
VerticalAlignment="Center" VerticalAlignment="Center"
FontFamily="{StaticResource UiFont}" FontFamily="{StaticResource UiFont}"
FontSize="13" FontSize="12"
FontWeight="SemiBold" FontWeight="SemiBold"
Text="{Binding DisplayName}" Text="{Binding DisplayName}"
TextTrimming="CharacterEllipsis" /> TextTrimming="CharacterEllipsis" />
</StackPanel> </StackPanel>
</Border> </Border>
<DataTemplate.Triggers>
<DataTrigger Binding="{Binding IsSelected, RelativeSource={RelativeSource AncestorType=TreeViewItem}}" Value="True">
<Setter TargetName="ProgramRootCard" Property="Background" Value="#E7F1FB" />
<Setter TargetName="ProgramRootCard" Property="BorderBrush" Value="#9FC6E8" />
</DataTrigger>
</DataTemplate.Triggers>
</HierarchicalDataTemplate> </HierarchicalDataTemplate>
<HierarchicalDataTemplate <HierarchicalDataTemplate
@@ -146,10 +193,10 @@
BorderBrush="Transparent" BorderBrush="Transparent"
BorderThickness="1" BorderThickness="1"
CornerRadius="4"> CornerRadius="4">
<Grid x:Name="NodeRoot" MinHeight="28"> <Grid x:Name="NodeRoot" MinHeight="23">
<Grid.ColumnDefinitions> <Grid.ColumnDefinitions>
<ColumnDefinition Width="18" /> <ColumnDefinition Width="15" />
<ColumnDefinition Width="24" /> <ColumnDefinition Width="20" />
<ColumnDefinition Width="*" /> <ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" /> <ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions> </Grid.ColumnDefinitions>
@@ -157,33 +204,31 @@
<Grid Grid.Column="0"> <Grid Grid.Column="0">
<Border <Border
x:Name="ChildStem" x:Name="ChildStem"
Width="2" Width="1"
Margin="8,0,0,0" Margin="7,0,0,0"
HorizontalAlignment="Left" HorizontalAlignment="Left"
Background="{StaticResource TreeChildLineBrush}" Background="{StaticResource TreeChildLineBrush}" />
Visibility="Collapsed" />
<Border <Border
x:Name="ChildBranch" x:Name="ChildBranch"
Width="10" Width="8"
Height="2" Height="1"
Margin="8,0,0,0" Margin="7,0,0,0"
HorizontalAlignment="Left" HorizontalAlignment="Left"
VerticalAlignment="Center" VerticalAlignment="Center"
Background="{StaticResource TreeChildLineBrush}" Background="{StaticResource TreeChildLineBrush}" />
Visibility="Collapsed" />
</Grid> </Grid>
<Border <Border
Grid.Column="1" Grid.Column="1"
Width="18" Width="16"
Height="18" Height="16"
HorizontalAlignment="Center" HorizontalAlignment="Center"
VerticalAlignment="Center" VerticalAlignment="Center"
Background="Transparent" Background="Transparent"
CornerRadius="4"> CornerRadius="4">
<Image <Image
Width="14" Width="13"
Height="14" Height="13"
Source="{Binding Icon}" Source="{Binding Icon}"
Stretch="Uniform" /> Stretch="Uniform" />
</Border> </Border>
@@ -196,13 +241,13 @@
<TextBlock <TextBlock
VerticalAlignment="Center" VerticalAlignment="Center"
FontFamily="{StaticResource UiFont}" FontFamily="{StaticResource UiFont}"
FontSize="10.5" FontSize="10"
Foreground="#888888" Foreground="#888888"
Text="{Binding Index, StringFormat='[{0}] '}" /> Text="{Binding Index, StringFormat='[{0}] '}" />
<TextBlock <TextBlock
VerticalAlignment="Center" VerticalAlignment="Center"
FontFamily="{StaticResource UiFont}" FontFamily="{StaticResource UiFont}"
FontSize="11.5" FontSize="11"
FontWeight="SemiBold" FontWeight="SemiBold"
Text="{Binding Name}" /> Text="{Binding Name}" />
</StackPanel> </StackPanel>
@@ -232,12 +277,13 @@
<DataTemplate.Triggers> <DataTemplate.Triggers>
<Trigger SourceName="NodeRoot" Property="IsMouseOver" Value="True"> <Trigger SourceName="NodeRoot" Property="IsMouseOver" Value="True">
<Setter TargetName="NodeActions" Property="Visibility" Value="Visible" /> <Setter TargetName="NodeActions" Property="Visibility" Value="Visible" />
<Setter TargetName="NodeCard" Property="Background" Value="#F3F7FB" /> <Setter TargetName="NodeCard" Property="Background" Value="#F6FAFD" />
<Setter TargetName="NodeCard" Property="BorderBrush" Value="#D7E4F1" /> <Setter TargetName="NodeCard" Property="BorderBrush" Value="#DFEAF3" />
</Trigger> </Trigger>
<DataTrigger Binding="{Binding IsPositionChild}" Value="True"> <DataTrigger Binding="{Binding IsSelected, RelativeSource={RelativeSource AncestorType=TreeViewItem}}" Value="True">
<Setter TargetName="ChildStem" Property="Visibility" Value="Visible" /> <Setter TargetName="NodeActions" Property="Visibility" Value="Visible" />
<Setter TargetName="ChildBranch" Property="Visibility" Value="Visible" /> <Setter TargetName="NodeCard" Property="Background" Value="#DCEEFF" />
<Setter TargetName="NodeCard" Property="BorderBrush" Value="#71A9DB" />
</DataTrigger> </DataTrigger>
</DataTemplate.Triggers> </DataTemplate.Triggers>
</HierarchicalDataTemplate> </HierarchicalDataTemplate>