This example illustrates 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>
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>
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]);
Note: 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.
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)
{
}
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)
{
}
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.
Visual Studio 2019 and above versions.