Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

TreeView selection API spec #31

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
86 changes: 86 additions & 0 deletions active/TreeView/TreeViewSelectionAPI.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,86 @@
# Background

The Xaml [TreeView](https://docs.microsoft.com/uwp/api/Microsoft.UI.Xaml.Controls.TreeView) control shows a list of hierarchical data, similar to a ListView.

When TreeView was first released, you populated it using the [RootNode property](https://docs.microsoft.com/uwp/api/Microsoft.UI.Xaml.Controls.TreeView.RootNodes), giving it a tree of nodes, each node referencing a data item. There was negative feedback about this nodes approach, though, from developers preferring a more data binding friendly pattern along the lines of [ListView.ItemsSource](https://docs.microsoft.com/uwp/api/Windows.UI.Xaml.Controls.ItemsControl.ItemsSource).

So a [TreeView.ItemsSource](https://docs.microsoft.com/uwp/api/Microsoft.UI.Xaml.Controls.TreeView.ItemsSource) property was added, and now you can use either the nodes approach or the ItemsSource approach. But unlike ListView, TreeView doesn't have the corresponding SelectedItem and SelectedItems properties for single- and multi-select. Those are being added in this spec.

Also being added in this spec, for the case where the RootNode is being used instead of ItemsSource, is an API to select a single node. That is, there is a [SelectedNodes](https://docs.microsoft.com/uwp/api/Microsoft.UI.Xaml.Controls.TreeView.SelectedNodes) property today, and this spec is adding a singular SelectedNode property.

Related GitHub issues:
https://github.com/microsoft/microsoft-ui-xaml/issues/197
https://github.com/microsoft/microsoft-ui-xaml/issues/124
https://github.com/microsoft/microsoft-ui-xaml/issues/386

# Description

Extend TreeView selection API sets to make selections easier.

- Add `SelectedNode`: get/set the selected TreeViewNode for single selection
- Add `SelectedItem`: get/set the selected item for single selection
- Add `SelectedItems`: get the SelectedItems collection.

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What is the reason that SelectedItems cannot be set via binding? As SelectedItem can be set by two-way binding, it seems to make sense to me to give the same functionality to SelectedItems as well.

<TreeView ItemsSource="{x:Bind Descendants}" SelectedItems="{x:Bind CurrentDescendants, Mode=TwoWay}" />

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This matches ListView.SelectedItems, but I realize that doesn't answer the question. ListView also supports source collections that implement ISelectionInfo, which is a way for the source to have full control over the selection, but it's pretty advanced.

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@kaiguo @MikeHillberg Yeah, I'd say selecting a group of items should be as simple as possible. Right now, looking at the TreeView Selection API, I need to interact with the specific TreeView object to select multiple items. Hence, if I just wanted to mark a group of items in a TreeView as selected, I can't easily do that without somehow referencing an object of the View (as in MVVM). That seems to me like a pretty big oversight and an unnecessary hurdle for the developer.

- Fix existing `SelectedNodes` property: Currently this only works in multi-select mode ([SelectionMode](https://docs.microsoft.com/uwp/api/Microsoft.UI.Xaml.Controls.TreeView.SelectionMode) set to `Multiple`). It will now also work in single selection mode (consistent with ListView).

# Examples

## TreeView.SelectedNode
Ouput the depth of the selected tree view node.
```C#
TreeViewNode selectedNode = treeView.SelectedNode;
if (selectedNode != null)
{
Debug.WriteLine($"Selected node depth: {selectedNode.Depth}");
}
```

## TreeView.SelectedItem
Bind the TreeView control to a View Model with the data source and the currently selected item.
```Xaml
<TreeView ItemsSource="{x:Bind Descendants}"
SelectedItem="{x:Bind CurrentDescendant, Mode=TwoWay}" />
```

## TreeView.SelectedItems
```C#
void AddToSelection(TreeView treeView, object item)
{
IList<Object> selectedItems = treeView.SelectedItems;
selectedItems.Add(item);
}
```

# API Details

```
namespace Microsoft.UI.Xaml.Controls
{
[webhosthidden]
unsealed runtimeclass TreeView : Windows.UI.Xaml.Controls.Control
{
...

TreeViewNode SelectedNode{ get; set; };
Object SelectedItem{ get; set; };
Windows.Foundation.Collections.IVector<Object> SelectedItems{ get; };

...
}
}
```

# Remarks

SelectedItem(s) returns Object(collection of objects), it will be the ItemsSource type object when using databinding, or TreeViewNode when not using databinding.

Prior to WinUI 2.2, the [TreeView.SelectedNodes](https://docs.microsoft.com/uwp/api/Microsoft.UI.Xaml.Controls.TreeView.SelectedNodes) property can only be used when the [SelectionMode](https://docs.microsoft.com/uwp/api/Microsoft.UI.Xaml.Controls.TreeView.SelectionMode) is set to `Multiple`.

# API Notes

## Class: TreeView
| Member Name | Description |
|:- |:--|
| SelectedNode | Gets or sets the selected TreeViewNode. |
| SelectedNodes | The collection of nodes that are selected in the tree. The default is an empty collection. |
| SelectedItem | Gets or sets the selected item. |
| SelectedItems | The collection of items that are selected in the tree. The default is an empty collection. |