Как уже было сказано, решать задачу в текстовом режиме — не лучшая идея, поскольку наши углы наклона стрелок ограничены по сути ровно одним значением. Поэтому вот вам решение на WPF. Раз уж мы пользуемся WPF, то надо использовать существующий в поставке layout manager.
Поскольку дерево — рекурсивная структура данных, мы создадим рекурсивный UserControl
. (Возможно, подход с кастомизацией TreeView был бы проще.)
Начнём с данных.
Кажется разумным определить такую структуру данных:
class BinaryTree<T>
{
public T Value { get; set; }
public BinaryTree<T> Left { get; set; }
public BinaryTree<T> Right { get; set; }
}
Но работать с неизвестным типом на уровне представления будет неудобно, поэтому добавим ещё и нетипизированный интерфейс:
interface IBinaryTree
{
public object Value { get; }
public IBinaryTree Left { get; }
public IBinaryTree Right { get; }
}
class BinaryTree<T> : IBinaryTree
{
public T Value { get; set; }
public BinaryTree<T> Left { get; set; }
public BinaryTree<T> Right { get; set; }
object IBinaryTree.Value => Value;
IBinaryTree IBinaryTree.Left => Left;
IBinaryTree IBinaryTree.Right => Right;
}
Если вы захотите реализовать INotifyPropertyChanged
, чтобы WPF на лету подхватывал изменения, почему бы и нет.
Далее, наш контрол.
Для начала, положим вот такой XAML:
<UserControl x:Class="Test.BinaryTreePresenter"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:local="clr-namespace:Test"
mc:Ignorable="d"
d:DesignWidth="200" d:DesignHeight="150">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="10"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Border CornerRadius="4" Padding="5,2" Grid.Row="0" Grid.ColumnSpan="3"
HorizontalAlignment="Center" BorderThickness="1" BorderBrush="Black">
<TextBlock Text="{Binding Value}"/>
</Border>
<local:BinaryTreePresenter DataContext="{Binding Left}" Grid.Row="1" Grid.Column="0" />
<local:BinaryTreePresenter DataContext="{Binding Right}" Grid.Row="1" Grid.Column="2" />
</Grid>
</UserControl>
Такая штука не сработает, и немедленно приведёт к переполнению стека, ведь дерево контролов получается бесконечным. Даже установка триггера, который отключает Visibility при нулевом DataContext
, не спасает. Значит, элементы нужно генерировать динамически. Для этого иcпользуется либо связка ItemsPanel
/ItemsHost
, либо code-behind. Давайте пойдём через code-behind, это, кажется, будет проще.
Поменяем в XAML строки
<local:BinaryTreePresenter DataContext="{Binding Left}" Grid.Row="1" Grid.Column="0" />
<local:BinaryTreePresenter DataContext="{Binding Right}" Grid.Row="1" Grid.Column="2" />
на
<Decorator x:Name="LeftHost" DataContext="{Binding Left}" Grid.Row="1" Grid.Column="0" />
<Decorator x:Name="RightHost" DataContext="{Binding Right}" Grid.Row="1" Grid.Column="2" />
А в code-behind напишем:
public partial class BinaryTreePresenter : UserControl
{
public BinaryTreePresenter()
{
InitializeComponent();
LeftHost.DataContextChanged += OnDataContextChanged;
RightHost.DataContextChanged += OnDataContextChanged;
}
void OnDataContextChanged(object sender, DependencyPropertyChangedEventArgs e)
{
var host = (Decorator)sender;
if (host.DataContext is IBinaryTree)
host.Child ??= new BinaryTreePresenter();
else
host.Child = null;
}
}
Запускаем, получаем:

Вроде бы всё хорошо, но не хватает стрелок. А также вертикального пространства, которое будут занимать стрелки.
Для начала, как сделать стрелки? Я не стал изобретать велосипед, а украл одолжил готовое решение вот тут.
В XAML добавим ещё один «этаж», в котором будет располагаться стрелка.
<UserControl x:Class="Test.BinaryTreePresenter"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:local="clr-namespace:Test"
mc:Ignorable="d"
d:DesignWidth="200" d:DesignHeight="150">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="10"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Canvas Grid.Row="0" Grid.ColumnSpan="3" ClipToBounds="False" Height="30" Visibility="Collapsed"
Name="ArrowHost">
<local:ArrowLine x:Name="Arrow" Stroke="Black" />
</Canvas>
<Border CornerRadius="4" Padding="5,2" Name="ValueHost" Grid.Row="1" Grid.ColumnSpan="3"
HorizontalAlignment="Center" BorderThickness="1" BorderBrush="Black">
<TextBlock Text="{Binding Value}"/>
</Border>
<Decorator x:Name="LeftHost" DataContext="{Binding Left}" Grid.Row="2" Grid.Column="0" />
<Decorator x:Name="RightHost" DataContext="{Binding Right}" Grid.Row="2" Grid.Column="2" />
</Grid>
</UserControl>
Затем, нам нужно задать элемент, от низа которого будет тянуться стрелка, то есть, родительский элемент. Но это должен не весь родительский BinaryTreePresenter
, т. к. он охватывает наш элемент тоже. Нам нужен его ValueHost
(для этого мы и дали ему имя, чтобы сослаться из code-behind).
В code-behind кладём поле FrameworkElement parent;
, и присваиваем его, когда создаём внутренний элемент. Мы хотим соединить стрелкой середину верхнего узла с серединой нашего, для этого нам надо знать, когда положение или размер любого из этих элементов поменяется. (Можно сделать это один раз в начале, но тогда при изменении содержания узлов или добавлении/убирании веток стрелки не будут обновляться.)
Для этого я достал из старого проекта вот такой вспомогательный класс:
public class LayoutWatcher : IDisposable
{
public LayoutWatcher(UIElement target)
{
this.target = target;
target.LayoutUpdated += OnLayoutUpdate;
oldRenderSize = target.RenderSize;
oldRenderPosition = GetRenderPosition();
}
UIElement target;
Size oldRenderSize;
Point oldRenderPosition;
void OnLayoutUpdate(object sender, EventArgs e)
{
var newRenderSize = target.RenderSize;
var newRenderPosition = GetRenderPosition();
var needUpdate = newRenderSize != oldRenderSize ||
newRenderPosition != oldRenderPosition;
oldRenderSize = newRenderSize;
oldRenderPosition = newRenderPosition;
if (needUpdate)
FireChanged();
}
Point GetRenderPosition() => target.TranslatePoint(new Point(), null);
void FireChanged() => Changed?.Invoke(target, new EventArgs());
public event EventHandler<EventArgs> Changed;
public void Dispose()
{
target.LayoutUpdated -= OnLayoutUpdate;
}
}
Добавляем обработчик обытия Loaded
, в котором мы будем устанавливать слежку за позицией и размерами обеих узлов. Симметрично, добавляем обработчик события Unloaded
, в котором будем отписываться от изменений (чтобы не було утечек памяти). Получаем в итоге вот что:
public partial class BinaryTreePresenter : UserControl
{
public BinaryTreePresenter()
{
InitializeComponent();
LeftHost.DataContextChanged += OnDataContextChanged;
RightHost.DataContextChanged += OnDataContextChanged;
Loaded += OnLoaded;
Unloaded += OnUnloaded;
}
void OnLoaded(object sender, RoutedEventArgs e)
{
if (parent is null)
return;
ArrowHost.Visibility = Visibility.Visible;
selfWatcher = new LayoutWatcher(this);
parentWatcher = new LayoutWatcher(this);
selfWatcher.Changed += UpdateArrow;
parentWatcher.Changed += UpdateArrow;
UpdateArrow(null, null);
}
void UpdateArrow(object sender, EventArgs e)
{
var start = parent.TranslatePoint(new Point(parent.ActualWidth / 2, parent.ActualHeight), ArrowHost);
Arrow.X1 = start.X;
Arrow.Y1 = 0;
Arrow.X2 = ActualWidth / 2;
Arrow.Y2 = ArrowHost.ActualHeight - 2;
}
void OnUnloaded(object sender, RoutedEventArgs e)
{
if (selfWatcher is not null)
{
selfWatcher.Changed -= UpdateArrow;
selfWatcher.Dispose();
}
if (parentWatcher is not null)
{
parentWatcher.Changed -= UpdateArrow;
parentWatcher.Dispose();
}
}
FrameworkElement parent;
LayoutWatcher selfWatcher, parentWatcher;
void OnDataContextChanged(object sender, DependencyPropertyChangedEventArgs e)
{
var host = (Decorator)sender;
if (host.DataContext is IBinaryTree)
host.Child ??= new BinaryTreePresenter() { parent = ValueHost };
else
host.Child = null;
}
}
Отдельных пояснений заслуживает функция UpdateArrow
. В ней мы вычисляем при помощи TranslatePoint
позицию нижней точки родительского узла относительно ArrowHost
. Остальные координаты стрелки рассчитываются очевидным образом.
Получаем вот что:

Всё!
чтобы можно было его красиво выводить
у каждого своё понятие о красоте. Будьте более конкретны и покажите, как вы сами пытались решить вашу проблему.