5 основных функций WPF TreeView

WPF TreeView имеет все функции, которыми должен обладать необходимый элемент управления древовидным представлением. В этом блоге мы рассмотрим 5 лучших функций, доступных для улучшения вашего приложения:

Развернуть и свернуть действия
Рекурсивная проверка
Загрузка по запросу со встроенной анимацией занятости
Автоподбор высоты узлов
Перетаскивание внутри элементов управления и между ними

Давайте начнем!

Развернуть и свернуть действия

Расширение и свертывание узлов — обычные операции, выполняемые в элементе управления TreeView. Но наш Syncfusion WPF TreeView предоставляет интуитивно понятный способ развертывания и свертывания узлов. Вы можете выполнять действия по развертыванию и сворачиванию, взаимодействуя либо со значком расширения, либо со всем представлением содержимого в узле. Вы можете управлять этим поведением с помощью свойства ExpandActionTrigger.

<syncfusion:SfTreeView x:Name="sfTreeView" ExpandActionTrigger="Node" />

Вы также можете изменить положение расширенного вида. Вы можете отобразить расширитель в начале или в конце узла, задав значения для свойства ExpanderPosition.

<Syncfusion:SfTreeView x:Name="sfTreeView" ExpanderPosition="End">

Рекурсивная проверка

Загрузите флажок в каждом узле, чтобы пользователи могли устанавливать и снимать их. Вы можете загружать флажки в элементе управления WPF TreeView при загрузке TreeView в связанном или несвязанном режимах. Вы также можете изменить состояние отмеченного родительского узла, когда вы устанавливаете или снимаете отметки с дочерних узлов, установив для свойства CheckBoxMode значение Recursive.

Если вы привязываете ItemsSource и вам нужно привязать значение CheckBox, вам следует установить для ItemTemplateDataContextType значение Node, чтобы привязать свойство TreeViewNode.IsChecked к CheckBox в Шаблон элемента.

См. следующий пример кода.

<syncfusion:SfTreeView
  x:Name="sfTreeView"
  CheckBoxMode ="Recursive"
  CheckedItems="{Binding CheckedStates}"
  ChildPropertyName="Models"
  ItemTemplateDataContextType="Node"
  ItemsSource="{Binding Items}"> <syncfusion:SfTreeView.ItemTemplate> 
<DataTemplate> 
<Grid> 
<CheckBox x:Name="CheckBox" FocusVisualStyle="{x:Null}"
 IsChecked="{Binding IsChecked, Mode=TwoWay}"/> 
<TextBlock FontSize="12" VerticalAlignment="Center" Text="{Binding Content.State}" Margin="25,0,0,0"/> 
</Grid> 
</DataTemplate> 
</syncfusion:SfTreeView.ItemTemplate> 
</syncfusion:SfTreeView>

Ссылка на GitHub: вы можете просмотреть пример в этом месте GitHub.

Загрузка по запросу со встроенной анимацией занятости (ленивая загрузка)

TreeView позволяет загружать дочерние узлы по запросу, используя функцию загрузки по требованию (отложенная загрузка). Это помогает вам загружать дочерние узлы из служб, когда конечный пользователь расширяет узел. Вы можете использовать свойство LoadOnDemandCommand, чтобы загружать дочерние узлы по требованию при расширении узлов.

Важной особенностью является то, что вы также можете отображать индикатор занятости в узле с помощью свойства TreeViewNode.ShowExpanderAnimation до тех пор, пока данные не будут получены в команде.

В следующем примере кода показана процедура привязки свойства LoadOnDemandCommand к свойству ViewModel в XAML.

<syncfusion:SfTreeView
 x:Name="sfTreeView"
 LoadOnDemandCommand="{Binding TreeViewOnDemandCommand}"  
 ItemsSource="{Binding Menu}" > 
<syncfusion:SfTreeView.ItemTemplate> 
<DataTemplate> 
<Label
 VerticalContentAlignment="Center"
 Content="{Binding ItemName}"
 FocusVisualStyle="{x:Null}"
 FontSize="12" /> 
</DataTemplate> 
</syncfusion:SfTreeView.ItemTemplate> 
</syncfusion:SfTreeView>

В следующем коде показано, как загружать дочерние узлы по требованию при запуске команды OnDemandCommand.

public class MusicInfoRepository 
{ 
................ 
private ICommand treeViewOnDemandCommand; 
public ICommand TreeViewOnDemandCommand 
{ 
  get{ return treeViewOnDemandCommand; } 
  set{ treeViewOnDemandCommand = value; } 
} 
public MusicInfoRepository() 
{ 
.................... 
TreeViewOnDemandCommand = new OnDemandCommand(ExecuteOnDemandLoading, CanExecuteOnDemandLoading); } 
private bool CanExecuteOnDemandLoading(object sender) 
{ 
var hasChildNodes = ((sender as TreeViewNode).Content as MusicInfo).HasChildNodes; 
if (hasChildNodes)
 return true; 
else
 return false; 
} 
private void ExecuteOnDemandLoading(object obj) 
{ 
var node = obj as TreeViewNode; 
// Skip the repeated population of child items every time the node expands. 
if (node.ChildNodes.Count > 0) 
{
 node.IsExpanded = true;
 return; 
} 
//Animation starts for expander to show progress of load on demand. node.ShowExpanderAnimation = true; 
treeViewNodes.Add(node); 
Application.Current.MainWindow.Dispatcher.BeginInvoke(DispatcherPriority.Background, 
new Action(async () => 
{ 
await Task.Delay(1000); 
foreach (var item in treeViewNodes) 
{ 
  if (!item.ShowExpanderAnimation)
     continue; 
  currentNode = item; 
  break; 
} 
MusicInfo musicInfo = currentNode.Content as MusicInfo; 
//Fetching child items to add. 
var items = GetSubMenu(musicInfo.ID); 
// Populating child items for the node in on-demand. currentNode.PopulateChildNodes(items); 
if (items.Count() > 0)
 //Expand the node after child items are added.  
 currentNode.IsExpanded = true; 
//Stop the animation after load on demand is executed If animation is not stopped, it remains after execution of load on demand. currentNode.ShowExpanderAnimation = false; treeViewNodes.Remove(currentNode); 
})); 
} 
.................. 
}

Ссылка на GitHub: вы можете ознакомиться с примером проекта в этом месте GitHub.

Автоподбор высоты узла

TreeView позволяет установить высоту узла:

По умолчанию используется свойство ItemHeight.
Условно используя событие QueryNodeSize.

Вы можете настроить (автоподбор) высоту узла на основе измеренного размера содержимого, чтобы улучшить читаемость. Сделать это можно через событие QueryNodeSize и метод QueryNodeSizeEventArgs.GetAutoFitNodeHeight.

См. следующий пример кода.

sfTreeView.QueryNodeSize += SfTreeView_QueryNodeSize; 
private void SfTreeView_QueryNodeSize(object sender, Syncfusion.UI.Xaml.TreeView.QueryNodeSizeEventArgs e) 
{ 
 if (e.Node.Level == 0) 
 { 
   //Returns specified item height for items.
   e.Height = 30;
   e.Handled = true; 
  } 
 else 
  {
    // Returns item height based on the content loaded.
    e.Height = e.GetAutoFitNodeHeight();
    e.Handled = true; 
   } 
}

Ссылка на GitHub: вы можете просмотреть пример проекта в этом месте GitHub.

Перетаскивание в TreeView и между элементами управления

TreeView позволяет перетаскивать элементы внутри элемента управления TreeView, установив для свойства AllowDragging значение true. Вы также можете перетаскивать элементы между TreeViews или в любой другой элемент управления, например ListView и DataGrid.

При перетаскивании вы можете добавить перетаскиваемые узлы выше или ниже целевого элемента или в качестве дочернего элемента к определенному узлу в зависимости от положения индикатора перетаскивания.

См. следующий пример кода.

<treeview:SfTreeView
 Name="sfTreeView"
 AllowDragging="True"
 ChildPropertyName="Childs"
 ItemsSource="{Binding Nodes1}" />

WPF TreeView имеет следующие события для выполнения пользовательских операций при перетаскивании элементов между узлами. Кроме того, вы можете использовать эти события для выполнения действий перетаскивания между TreeView и другими элементами управления:

Примеры на гитхабе

Примеры перетаскивания элементов между TreeView и другими элементами управления:

Вывод

Спасибо за чтение! В этом блоге мы узнали о пяти основных функциях, доступных в нашем элементе управления Syncfusion WPF TreeView. Он также предоставляет другие функции, такие как редактирование, выбор, контекстное меню и линии дерева. Вы можете обратиться к этой документации UG за полным руководством по всем доступным функциям в элементе управления WPF TreeView. Попробуйте наши демо-версии TreeView по этой ссылке. Просмотрите нашу документацию, чтобы узнать больше о других элементах управления WPF.

Если вы еще не являетесь клиентом, вы можете попробовать нашу 30-дневную бесплатную пробную версию, чтобы проверить эти функции.

Если вы хотите отправить нам отзыв или задать какие-либо вопросы, пожалуйста, не стесняйтесь публиковать их в разделе комментариев этого сообщения в блоге. Вы также можете связаться с нами через наш форум поддержки, портал обратной связи или систему поддержки Direct-Trac. Мы всегда рады Вам помочь!

Первоначально опубликовано на https://www.syncfusion.com 8 декабря 2020 г.

5 основных функций WPF TreeView