带有 WinForms 风格格式的 WPF TreeView
一个具有连接线和加减切换按钮的 WPF TreeView，就像 WinForms 一样
注意：Kenneth Haugland 在这篇文章中发布了一个更好的解决方案：WPF 中附加行为的示例。
如果您一次性将所有 TreeViewItem 加载到 TreeView 控件（这意味着在显示之后您不添加或删除项目），我的文章解决方案可能更轻量级。
引言
WPF 默认的 TreeView 非常好，但很多人仍然希望它像 Windows Forms TreeView 一样，具有连接其每个子元素的线条，包括我。我在互联网上搜索了一些示例，但它们的设计不够好。
现在，我自己设计了一个具有 WinForms 样式的 TreeView。希望这对很多人有帮助！
目录
源代码
你只需要一个 XAML 文件和一个代码隐藏文件。
首先，你需要绘制切换按钮：从三角形按钮到加减按钮：绘制一个带有深色边框的矩形，然后绘制两条线，一条垂直线和一条水平线。 当 TreeViewItem 展开时，垂直线将隐藏
<!-- Toggle Button -->
<Style x:Key="ExpandCollapseToggleStyle" TargetType="ToggleButton">
<Setter Property="Focusable" Value="False"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ToggleButton">
<Grid Width="15" Height="13" SnapsToDevicePixels="True">
<!-- Rectangle 9x9 pixels -->
<Rectangle Width="9" Height="9"
Stroke="#919191" SnapsToDevicePixels="true">
<Rectangle.Fill>
<LinearGradientBrush EndPoint="0.5,2" StartPoint="0.5,0">
<GradientStop Color="White" Offset="0"/>
<GradientStop Color="Silver" Offset="0.5"/>
<GradientStop Color="LightGray" Offset="1"/>
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
<!-- Vertical line inside rectangle -->
<Rectangle x:Name="ExpandPath" Width="1"
Height="5" Stroke="Black" SnapsToDevicePixels="true"/>
<!-- Horizontal line inside rectangle -->
<Rectangle Width="5" Height="1"
Stroke="Black" SnapsToDevicePixels="true"/>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsChecked" Value="True">
<Setter Property="Visibility"
TargetName="ExpandPath" Value="Collapsed"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
在上面的代码中，你可以看到一个触发器，如果项目展开，它将使切换按钮内的垂直线隐藏，或者在其子项折叠时显示。
然后，你需要绘制节点之间的垂直和水平连接线：你需要重新设计 TreeViewItem 控件。添加这些连接线
<!-- Horizontal line -->
<Rectangle x:Name="HorLn" Margin="9,1,0,0" Height="1"
Stroke="#DCDCDC" SnapsToDevicePixels="True"/>
<!-- Vertical line -->
<Rectangle x:Name="VerLn" Width="1" Stroke="#DCDCDC"
Margin="0,0,1,0" Grid.RowSpan="2" SnapsToDevicePixels="true"
Fill="White"/>
到你的 TreeViewItem 模板中，像这样
<!-- TreeViewItem -->
<Style x:Key="{x:Type TreeViewItem}" TargetType="{x:Type TreeViewItem}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TreeViewItem}">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition MinWidth="19" Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition/>
</Grid.RowDefinitions>
<!-- Connecting Lines -->
<!-- Horizontal line -->
<Rectangle x:Name="HorLn" Margin="9,1,0,0" Height="1"
Stroke="#DCDCDC" SnapsToDevicePixels="True"/>
<!-- Vertical line -->
<Rectangle x:Name="VerLn" Width="1"
Stroke="#DCDCDC" Margin="0,0,1,0" Grid.RowSpan="2"
SnapsToDevicePixels="true" Fill="White"/>
<!-- Insert Toggle Button -->
<ToggleButton Margin="-1,0,0,0" x:Name="Expander"
Style="{StaticResource ExpandCollapseToggleStyle}"
IsChecked="{Binding Path=IsExpanded,
RelativeSource={RelativeSource TemplatedParent}}" ClickMode="Press"/>
<Border Name="Bd" Grid.Column="1"
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
Padding="{TemplateBinding Padding}" SnapsToDevicePixels="True">
<ContentPresenter x:Name="PART_Header"
ContentSource="Header"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
MinWidth="20"/>
</Border>
<ItemsPresenter x:Name="ItemsHost" Grid.Row="1"
Grid.Column="1" Grid.ColumnSpan="2"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
然后，你需要将类 TreeViewLineConverter 放入你的命名空间。如果项目是列表中的最后一个，此类将更改连接线
using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
namespace TreeViewEx
{
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
}
}
class TreeViewLineConverter : IValueConverter
{
public object Convert(object value, Type targetType,
object parameter, System.Globalization.CultureInfo culture)
{
TreeViewItem item = (TreeViewItem)value;
ItemsControl ic = ItemsControl.ItemsControlFromItemContainer(item);
return ic.ItemContainerGenerator.IndexFromContainer(item) == ic.Items.Count - 1;
}
public object ConvertBack(object value, Type targetType,
object parameter, System.Globalization.CultureInfo culture)
{
return false;
}
}
}
将你的命名空间插入到你的 XAML 中，即
<Window x:Class="TreeViewEx.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:TreeViewEx"/>
将此行添加到 Window.Resources
<local:TreeViewLineConverter x:Key="LineConverter"/>
将触发器添加到 TreeViewItem 模板，如果项目是列表中的最后一个，则此触发器更改连接线
<!-- This trigger changes the connecting lines if the item is the last in the list -->
<DataTrigger Binding="{Binding RelativeSource={RelativeSource Self},
Converter={StaticResource LineConverter}}" Value="true">
<Setter TargetName="VerLn" Property="Height" Value="9"/>
<Setter TargetName="VerLn" Property="VerticalAlignment" Value="Top"/>
</DataTrigger>
现在 TreeView 将具有 WinForms 样式。如果需要，您可以添加更多触发器来控制 TreeView 的行为。完整的触发器可以在附件中找到。
待办事项
当你向 TreeView 中添加一个新的 TreeViewItem 时，垂直线存在一个问题，连接线没有更新
当你更改 treeview 项目的字体大小时，也会发生此问题。
如果你知道如何解决这个问题，请发表评论。谢谢！
参考
这是在我编写自己的代码之前引用的代码
我的重写代码几乎与此相同，不同之处在于
- 将三角形切换按钮更改为加减按钮
- 调整了更好的连接线位置/大小
- 添加了一些解释并指出了问题
历史
- 2013/10/24：首次发布
- 2015/01/28：小幅更新