How to select the items in WinUI TreeView (SfTreeView)?
WinUI TreeView (SfTreeView) allows selecting the items either programmatically or mouse click/touch interactions by setting the SelectionMode property value to something other than None. The control has different selection modes to perform selection operations listed as follows.
None: Allows disabling the selection.
Single: Allows selecting a single item only. When clicking on the selected item, the selection is not cleared. This is the default value for SelectionMode.
SingleDeselect: Allows selecting a single item only. When clicking on the selected item, the selection gets cleared.
Multiple: Allows selecting more than one item. Selection is not cleared, when selecting multiple items. When clicking on the selected item, the selection gets cleared.
Extended: Allows selecting the multiple items using the common key modifiers.
The following code sample explains the single item selection in TreeView.
<treeView:SfTreeView x:Name="treeView"
Width="400"
Height="500"
AutoExpandMode="AllNodes"
ChildPropertyName="Childs"
IsAnimationEnabled="True"
SelectionMode="Single"
FullRowSelect="True"
ItemsSource="{Binding Nodes1}">
<treeView:SfTreeView.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<ContentPresenter Width="20"
Height="20"
HorizontalAlignment="Stretch"
VerticalAlignment="Center"
ContentTemplate="{Binding ImageTemplate}" />
<TextBlock
Margin="5"
VerticalAlignment="Center"
Text="{Binding Header}" />
</StackPanel>
</DataTemplate>
</treeView:SfTreeView.ItemTemplate>
</treeView:SfTreeView>
Multiple Items Selection
TreeView allows to select multiple items by setting the SfTreeView.SelectionMode as Multiple or Extended.
<treeView:SfTreeView x:Name="treeView"
Width="400"
Height="500"
AutoExpandMode="AllNodes"
ChildPropertyName="Childs"
IsAnimationEnabled="True"
SelectionMode="Multiple"
FullRowSelect="True"
ItemsSource="{Binding Nodes1}">
<treeView:SfTreeView.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<ContentPresenter Width="20"
Height="20"
HorizontalAlignment="Stretch"
VerticalAlignment="Center"
ContentTemplate="{Binding ImageTemplate}" />
<TextBlock
Margin="5"
VerticalAlignment="Center"
Text="{Binding Header}" />
</StackPanel>
</DataTemplate>
</treeView:SfTreeView.ItemTemplate>
</treeView:SfTreeView>
Programmatic Selection
When the SelectionMode is other than None, the item or items in the TreeView can be selected from the code by setting the SelectedItem or adding items to the SelectedItems property based on the SelectionMode.
When the selection mode is Single or SingleDeselect, programmatically select an item by setting the underlying object to the `SelectedItem` property.
treeView.SelectedItem = viewModel.Items[0];
When the selection mode is Multiple, programmatically select more than one item by adding the underlying object to the `SelectedItems` property.
treeView.SelectedItems.Add(viewModel.Items[2]); treeView.SelectedItems.Add(viewModel.Items[3]);
If an item is selected programmatically when SelectionMode is None and if multiple items are programmatically selected when SelectionMode is Single or SingleDeselect, then an exception will be thrown internally.
Events
SelectionChanging Event
The SelectionChanging event will be triggered while selecting an item at the execution time. The ItemSelectionChangingEventArgs has the following members, which provide the information for the SelectionChanging event:
- AddedItems: Gets a collection of the underlying data objects where the selection is going to process.
- RemovedItems: Gets a collection of the underlying data objects where the selection is going to remove.
treeView.SelectionChanging += OnSelectionChanging; private void OnSelectionChanging(object sender, Syncfusion.UI.Xaml.TreeView.ItemSelectionChangingEventArgs e) { }
SelectionChanged event
The SelectionChanged event will occur, once the selection process has been completed for the selected item in the TreeView. The ItemSelectionChangedEventArgs has the following members, which provide information for the SelectionChanged event:
- AddedItems: Gets a collection of the underlying data objects where the selection has been processed.
- RemovedItems: Gets a collection of the underlying data objects where the selection has been removed.
treeView.SelectionChanged += OnSelectionChanged; private void OnSelectionChanged(object sender, Syncfusion.UI.Xaml.TreeView.ItemSelectionChangedEventArgs e) { }
SelectionChanging and SelectionChanged events will be triggered only on UI interactions.
Disable the selection for a specific item
TreeView selection for specific items can be disabled by setting the ItemSelectionChangingEventArgs.Cancel property to true in the SelectionChanging event.
treeView.SelectionChanging += OnSelectionChanging;
private void OnSelectionChanging(object sender, Syncfusion.UI.Xaml.TreeView.ItemSelectionChangingEventArgs e)
{
if(e.AddedItems.Count > 0)
{
//disable the selection for specific items by setting the ItemSelectionChangingEventArgs.Cancel property to true.
if ((e.AddedItems[0] as Model).Header == "Overall Project Plan.docx" || (e.AddedItems[0] as Model).Header == "Server")
e.Cancel = true;
}
}
Take a moment to peruse the WinUI TreeView - Selection documentation, where you can find about selection with code examples.
Conclusion
I hope you enjoyed learning about how to select the items in WinUI TreeView.
You can refer to our WinUI TreeView feature tour page to know about its other groundbreaking feature representations and documentation, configuration specifications, to understand how to create and manipulate data.
For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.
If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
