Пользовательский WPF Treeview

Question

Я пытаюсь написать пользовательское Treeview в WPF, где дочерние элементы связаны с родителями по строкам.

Это трудно объяснить, но я в основном пытаюсь сделать собственную версию ниже TreeView, так что наш дизайнер может настроить его в соответствии с требованиями:

Requirement

Есть простой способ сделать это? До сих пор я взламывал ее и не очень далеко.

Answer 1

Это интересная проблема. Я думаю, что, вероятно, вам нужно будет создать настраиваемый элемент управления, который подклассы TreeViewItem и добавить пару свойств зависимостей, которые не предоставляет родительский класс.

С TreeViewItem наследует от ItemsControl, а не Selector, он не имеет SelectedItem или SelectedIndex свойствами. Ваш пользовательский элемент управления должен реализовать эти свойства. Сложная вещь об этом заключается в установке SelectedItem: это может быть элемент, для которого IsSelected является истинным, или может быть элементом, чье свойство Items содержит элемент, для которого SelectedItem не имеет значения. Свойство SelectedIndex должно работать одинаково.

Еще одно свойство, которое вам понадобится - и я не уверен, как вы это вычисляете - это высота линии, которая будет идти в строку 1, столбец 0 сетки в шаблоне TreeViewItem. Может быть возможно рассчитать это как функцию SelectedIndex и строки ActualHeight, что было бы мило, потому что тогда вам не нужно ввязываться ни в какие детали того, как визуализируется элемент управления.

Во всяком случае, как только у вас есть эти свойства, редактирование шаблона управления для их использования должно быть простым. У вас есть круг вокруг треугольника расширителя, который отображается только в том случае, если SelectedItem не равен нулю. (На самом деле это круг с линией, спускающейся к нижней части ячейки сетки.) У вас есть линия, проходящая от круга к левому краю ячейки сетки, которая видна, если SelectedItem не является нулевым и Parent не имеет значения null. У вас есть вертикальная строка в строке 1, столбец 0 сетки, которая снова видна только в том случае, если SelectedItem не является нулевым.

У вас есть элементы, которые отображаются, если верно IsSelected: горизонтальная линия в ячейке расширителя и фон черной стрелки.

Это не сумасшедшее количество работы, чтобы получить такой классный эффект, я думаю.

Answer 2

Чтобы настроить WPF TreeView несколько вещей важны:

1. Использования привязки данных для привязки узлов TreeView к объектам ViewModel для узлов
2. Сделать DataTemplates, которые соответствуют по типу ViewModel узлы

Josh Smith имеет good article on Code Project, который объясняет все это и многое другое.

Edit:

Вы можете поместить полный UserControl в узле, который делает что-то, что UserControl может сделать.

Edit 2:

С обновленной иллюстрации я хотел бы предложить создать стиль для TreeView. DataTemplates применяются только к отдельным узлам элемента в дереве.