WPF中TreeView的+-号和连线style的一种实现

最近又开始跟WPF打交道，项目里面用到了TreeView这个控件。然后需要有一个连线的外观就像是这样

二话不说，百度了一下，找到一个实现， 通道。

把代码拷贝到项目里面，跑了一下，看上去还不错。但是这哥们的实现里面有一个缺陷。我们可以看到每个节点的最后的子节点前面的竖线，绘制方式跟其他的节点是有区别的，跟上图显示的一样。

拷贝的代码，在树中添加新的节点的时候，之前最后节点的"|_"这种风格的线在新节点插入后不会动态更新，还是会保持这种风格。这种风格在不需要改变节点的时候还是可以的，而需要增删节点的话，那么  就不合适了。

继续在网上找了找没有现成的解决方案，后来想了一下，可以试试在给一个节点添加子节点的时候，将所有子节点都删除然后再重新添加进去这种方式来更新UI。但我没去尝试这个方案是否真的可以。额，不管是否可行，我都不太喜欢这个方案，所以就只能自己做了。

那么从这里开始描述整个实现过程。

---

首先是问题的根源，一组节点的最后一个节点前面的竖线的绘制方式是需要区别于其他的节点。然后这个是由于它的位置所决定的，而跟它本身的属性是没有一点关系的，我们也没有什么直接的方式来得到这个信息，能做的无非就像上面那个哥们那样，去跑一遍index之类的方法来判定是否是最后一个节点。

根据这个逻辑，我们可以发现，单单处理TreeViewItem这个类的Style是没有用的，或者说是有缺陷的。

那么怎么办呢？

TreeViewItem本身是ItemsControl，TreeView本身也是，那么它的绘制方式就很明显了，无非是ItemsTemplate决定了Item的数据外观，ItemsPanel决定了如何去组织Items。

我们要做的就是在绘制Items的时候，把竖线放到里面就行了，这样我们就有了竖线，而且我们在遍历的时候是知道每个节点的位置信息的，这样最后一个节点的绘制信息我们是能拿到的。

横线的话，我们有两个选择，一个是也在ItemsPanel里面去绘制；或者我们把这根线放到TreeViewItem的Style里面。我选择了后者，原因是，我们的“+”是在TreeViewItem里面的。而“+”在横线的前面。

ItemsPanel的话，我们重写一下StackPanel就足够了。

这样方案基本就确定了：

1. 重写StackPanel来绘制Item前面的竖线

2. 重写TreeViewItem的Style来绘制“+-”号和横线

 

首先们准备数据模型，来调试UI

public class ItemViewModel
{
    public string Name { get; set; }
    public IList<ItemViewModel> Children { get; set; }
}

TreeView的基本设置

<TreeView x:Name="treeView">
    <TreeView.ItemTemplate>
        <HierarchicalDataTemplate ItemsSource="{Binding Children}">
            <TextBlock Text="{Binding Name}"/>
        </HierarchicalDataTemplate>
    </TreeView.ItemTemplate>
</TreeView>

TreeView和TreeViewItem的默认模板，直接从msdn拷贝，通道。

只需要在OnRender方法里面在绘制Item的时候在前面画一根线就行了，主要是处理一下最后一个节点前的线，只绘制1/2即可。但这么算的话，会有一个问题，如果节点自己有子节点的话，那么子节点的高度是会算在当前节点的，这样一来竖线的高度是错的，我做了一个设定，就是在子节点的内容没有换行的情况下，所有的子节点的高度都是一样的（实际上，基本情况也就是这样）。这样一来：1. 没有子节点那么就是1/2的子节点高度；如果有那么就是RenderSize.Height / Items.Count / 2这种。

protected override void OnRender(DrawingContext dc)
{
    base.OnRender(dc);
    if (Children.Count > 0)
    {
        TreeViewItem child;
        Point point;
        Pen pen = new Pen(LineBrush, LineThiness);
        Point startPoint = new Point(Offset,0), endPoint = new Point(Offset,0);
        for (int i = 0; i < Children.Count - 1; i++)
        {
            child = Children[i] as TreeViewItem;
            point = child.TranslatePoint(new Point(), this);
            startPoint.Y = point.Y;
            endPoint.Y = point.Y + child.RenderSize.Height;
            dc.DrawLine(pen, startPoint, endPoint);
        }
        child = Children[Children.Count - 1] as TreeViewItem;
        point = child.TranslatePoint(new Point(), this);
        startPoint.Y = point.Y;
        if (!child.IsExpanded || child.Items == null || child.Items.Count < 1)
            endPoint.Y = point.Y + child.RenderSize.Height / 2;
        else
            endPoint.Y = point.Y + child.RenderSize.Height / child.Items.Count / 2;
        dc.DrawLine(pen, startPoint, endPoint);
    }
}

然后再新建一个TreeViewItem的Style，里面画个“+” "-"号再加一根横线就好了

        <Style x:Key="customToggleButtonStyle" TargetType="{x:Type ToggleButton}">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type ToggleButton}">
                        <Grid Background="White">
                            <Rectangle  Fill="{x:Null}" Stroke="Black" StrokeThickness="1"/>
                            <Rectangle Height="1"  Fill="Black" VerticalAlignment="Center" />
                            <Rectangle Width="1" Fill="Black" HorizontalAlignment="Center"  x:Name="line" Visibility="Collapsed"/>
                        </Grid>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsChecked" Value="False">
                                <Setter Property="Visibility" Value="Visible" TargetName="line"/>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

设置一下TreeViewItem中的ItemsPanel引用我们定义的Panel，就可以了，当然还有一些细节要处理，不过我就不细说了，我已经没耐心说下去了，所有的代码都在下面，写这篇文章主要是想写了，嗯，就是这样。

<Window x:Class="TreeViewStyleDemo.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:TreeViewStyleDemo"
        mc:Ignorable="d"
        Title="MainWindow" Height="350" Width="525">
    <Window.Resources>
        <!--Control colors.-->
        <Color x:Key="WindowColor">#FFE8EDF9</Color>
        <Color x:Key="ContentAreaColorLight">#FFC5CBF9</Color>
        <Color x:Key="ContentAreaColorDark">#FF7381F9</Color>
        <Color x:Key="DisabledControlLightColor">#FFE8EDF9</Color>
        <Color x:Key="DisabledControlDarkColor">#FFC5CBF9</Color>
        <Color x:Key="DisabledForegroundColor">#FF888888</Color>
        <Color x:Key="SelectedBackgroundColor">#FFC5CBF9</Color>
        <Color x:Key="SelectedUnfocusedColor">#FFDDDDDD</Color>
        <Color x:Key="ControlLightColor">White</Color>
        <Color x:Key="ControlMediumColor">#FF7381F9</Color>
        <Color x:Key="ControlDarkColor">#FF211AA9</Color>
        <Color x:Key="ControlMouseOverColor">#FF3843C