紧凑树形结构布局
This commit is contained in:
zhengxuan.zhang
@@ -24,7 +24,7 @@
|
||||
<SolidColorBrush x:Key="TreeParentBg" Color="#F6F8FB" />
|
||||
<SolidColorBrush x:Key="TreeChildBg" Color="#FBFCFE" />
|
||||
<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>
|
||||
|
||||
<Style x:Key="TreeItemStyle" TargetType="TreeViewItem">
|
||||
@@ -70,6 +70,19 @@
|
||||
<Setter Property="FontFamily" Value="{StaticResource UiFont}" />
|
||||
<Setter Property="FontSize" Value="11" />
|
||||
</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>
|
||||
|
||||
<Border
|
||||
@@ -91,13 +104,40 @@
|
||||
|
||||
<Grid Grid.Column="0">
|
||||
<Grid.RowDefinitions>
|
||||
<RowDefinition Height="Auto" />
|
||||
<RowDefinition Height="*" />
|
||||
</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
|
||||
x:Name="CncTreeView"
|
||||
Grid.Row="0"
|
||||
Padding="4,6"
|
||||
Grid.Row="1"
|
||||
Padding="3,5"
|
||||
Background="Transparent"
|
||||
BorderThickness="0"
|
||||
ItemsSource="{Binding ProgramTreeRoots}"
|
||||
@@ -109,29 +149,36 @@
|
||||
ItemContainerStyle="{StaticResource TreeItemStyle}"
|
||||
ItemsSource="{Binding Children}">
|
||||
<Border
|
||||
x:Name="ProgramRootCard"
|
||||
Margin="0,1,0,3"
|
||||
Padding="2,4"
|
||||
Padding="0,2"
|
||||
Background="Transparent"
|
||||
BorderBrush="Transparent"
|
||||
BorderThickness="1"
|
||||
CornerRadius="4">
|
||||
<StackPanel Orientation="Horizontal">
|
||||
<TextBlock
|
||||
Margin="2,0,6,0"
|
||||
Margin="1,0,4,0"
|
||||
VerticalAlignment="Center"
|
||||
FontFamily="{StaticResource UiFont}"
|
||||
FontSize="13"
|
||||
FontSize="12"
|
||||
Foreground="#2B8A3E"
|
||||
Text="◆" />
|
||||
<TextBlock
|
||||
VerticalAlignment="Center"
|
||||
FontFamily="{StaticResource UiFont}"
|
||||
FontSize="13"
|
||||
FontSize="12"
|
||||
FontWeight="SemiBold"
|
||||
Text="{Binding DisplayName}"
|
||||
TextTrimming="CharacterEllipsis" />
|
||||
</StackPanel>
|
||||
</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
|
||||
@@ -146,10 +193,10 @@
|
||||
BorderBrush="Transparent"
|
||||
BorderThickness="1"
|
||||
CornerRadius="4">
|
||||
<Grid x:Name="NodeRoot" MinHeight="28">
|
||||
<Grid x:Name="NodeRoot" MinHeight="23">
|
||||
<Grid.ColumnDefinitions>
|
||||
<ColumnDefinition Width="18" />
|
||||
<ColumnDefinition Width="24" />
|
||||
<ColumnDefinition Width="15" />
|
||||
<ColumnDefinition Width="20" />
|
||||
<ColumnDefinition Width="*" />
|
||||
<ColumnDefinition Width="Auto" />
|
||||
</Grid.ColumnDefinitions>
|
||||
@@ -157,33 +204,31 @@
|
||||
<Grid Grid.Column="0">
|
||||
<Border
|
||||
x:Name="ChildStem"
|
||||
Width="2"
|
||||
Margin="8,0,0,0"
|
||||
Width="1"
|
||||
Margin="7,0,0,0"
|
||||
HorizontalAlignment="Left"
|
||||
Background="{StaticResource TreeChildLineBrush}"
|
||||
Visibility="Collapsed" />
|
||||
Background="{StaticResource TreeChildLineBrush}" />
|
||||
<Border
|
||||
x:Name="ChildBranch"
|
||||
Width="10"
|
||||
Height="2"
|
||||
Margin="8,0,0,0"
|
||||
Width="8"
|
||||
Height="1"
|
||||
Margin="7,0,0,0"
|
||||
HorizontalAlignment="Left"
|
||||
VerticalAlignment="Center"
|
||||
Background="{StaticResource TreeChildLineBrush}"
|
||||
Visibility="Collapsed" />
|
||||
Background="{StaticResource TreeChildLineBrush}" />
|
||||
</Grid>
|
||||
|
||||
<Border
|
||||
Grid.Column="1"
|
||||
Width="18"
|
||||
Height="18"
|
||||
Width="16"
|
||||
Height="16"
|
||||
HorizontalAlignment="Center"
|
||||
VerticalAlignment="Center"
|
||||
Background="Transparent"
|
||||
CornerRadius="4">
|
||||
<Image
|
||||
Width="14"
|
||||
Height="14"
|
||||
Width="13"
|
||||
Height="13"
|
||||
Source="{Binding Icon}"
|
||||
Stretch="Uniform" />
|
||||
</Border>
|
||||
@@ -196,13 +241,13 @@
|
||||
<TextBlock
|
||||
VerticalAlignment="Center"
|
||||
FontFamily="{StaticResource UiFont}"
|
||||
FontSize="10.5"
|
||||
FontSize="10"
|
||||
Foreground="#888888"
|
||||
Text="{Binding Index, StringFormat='[{0}] '}" />
|
||||
<TextBlock
|
||||
VerticalAlignment="Center"
|
||||
FontFamily="{StaticResource UiFont}"
|
||||
FontSize="11.5"
|
||||
FontSize="11"
|
||||
FontWeight="SemiBold"
|
||||
Text="{Binding Name}" />
|
||||
</StackPanel>
|
||||
@@ -232,12 +277,13 @@
|
||||
<DataTemplate.Triggers>
|
||||
<Trigger SourceName="NodeRoot" Property="IsMouseOver" Value="True">
|
||||
<Setter TargetName="NodeActions" Property="Visibility" Value="Visible" />
|
||||
<Setter TargetName="NodeCard" Property="Background" Value="#F3F7FB" />
|
||||
<Setter TargetName="NodeCard" Property="BorderBrush" Value="#D7E4F1" />
|
||||
<Setter TargetName="NodeCard" Property="Background" Value="#F6FAFD" />
|
||||
<Setter TargetName="NodeCard" Property="BorderBrush" Value="#DFEAF3" />
|
||||
</Trigger>
|
||||
<DataTrigger Binding="{Binding IsPositionChild}" Value="True">
|
||||
<Setter TargetName="ChildStem" Property="Visibility" Value="Visible" />
|
||||
<Setter TargetName="ChildBranch" Property="Visibility" Value="Visible" />
|
||||
<DataTrigger Binding="{Binding IsSelected, RelativeSource={RelativeSource AncestorType=TreeViewItem}}" Value="True">
|
||||
<Setter TargetName="NodeActions" Property="Visibility" Value="Visible" />
|
||||
<Setter TargetName="NodeCard" Property="Background" Value="#DCEEFF" />
|
||||
<Setter TargetName="NodeCard" Property="BorderBrush" Value="#71A9DB" />
|
||||
</DataTrigger>
|
||||
</DataTemplate.Triggers>
|
||||
</HierarchicalDataTemplate>
|
||||
|
||||
Reference in New Issue
Block a user