WinUI list control that allows for dynamic item size, reordering, and virtualization

Question

I am trying to implement a document editor similar to Notion or Craft but in a WinUI/UWP application. Instead of using a "single-field" editor (like MS Word has), these apps show a vertical stack of content rows (so-called "blocks") that can contain text, media, link previews, LaTeX, etc. These rows can be rearranged with a :: handle on the side:

So I've been looking for some list/stack control that:

• Recycles the row views that are not visible (i.e. "virtualization" in the XAML terminology).
• Allows to reorder rows by dragging and dropping them (single or multiple).
• Automatically adjusts row heights based on their content growing or shrinking in height (due to the user's input or because the app's window resized horizontally and wrapped some content).

Features I do not need: headers, columns, sorting, filtering. I have reviewed the following controls in WinUI 2.x and Windows Community Toolkit, but it looks like each of them lacks one or more of the required capabilities.

ListView

It seems to be the go-to control for the lists with drag'n'drop, but it can't resize the items dynamically. Also, its dragging uses the whole item area while I need to make it available only with a :: handle on the side.

ItemsStackPanel

A virtualization-supporting version of StackPanel, but, as far as I understand, panels are supposed to be used for simple layouting of child items and not for presenting long lists based on a data source.

VariableSizedWrapGrid

This is the only list/grid control that officially declares the support of variable-sized items, but at the same time, it does not support virtualization. However, I found a solution from 2013 that is based on pre-calculating the content size for invisible elements.

ItemsRepeater

A very basic control that does not provide virtualization on its own: "ItemsRepeater supports virtualization when attached to a host that supports virtualization."

DataGrid

A rather heavy control from WCT that seems to be the only one to dynamically resize cells depending on their content. Unfortunately, it does not allow row reordering (only sorting), so I can't use it either.

---

Did I miss something? If not, I wonder which one would be the best to build upon. Thanks!

Answer 1

I have to say there is no control could fulfill all demands. In fact, the :: is used to control darg the specified item, you could achieve similar behavior in ListView control.

The ListView allows you to easily reorder items inside a ListView by setting the CanReorderItems and AllowDrop properties to True.If you don’t want to allow the user to drag specific items, you could set the CanDragItems property to True, and add an event handler for the DragItemsStarting event. For the event handler, you can check any condition and then simply set the Cancel property of the event arguments to true if you want to cancel the dragging action. As follows:

Xaml code:

<ListView x:Name="TargetListView"              
                CanReorderItems="True" CanDragItems="True" AllowDrop="True"         DragItemsStarting="TargetListView_DragItemsStarting">

            <ListViewItem>
                <TextBlock x:Name="item1" Text="item1"/>
            </ListViewItem>
            <ListViewItem >
                <TextBlock x:Name="item2" Text="item2"/>
            </ListViewItem>
            <ListViewItem>
                <TextBlock x:Name="item3" Text="item3"/>
            </ListViewItem>
          
  </ListView>

Code behind:

private void TargetListView_DragItemsStarting(object sender, DragItemsStartingEventArgs e)
        {
            e.Cancel = e.Items.Any(o =>
            {
                if (o is TextBlock t && t.Name.ToString() == "item2")
                    return true;

                return false;
            });
        }

As you can see, there are three textBlocks in ListView, the drag action of the textblock named item2 will be limited.

Answer 2

It turns out, a ListView can resize its items dynamically – one just needs to put a StackPanel inside a ListViewItem because a stack "pushes" its parent's size outwards. As this answer says:

Container controls like Grid and RelativePanel automatically scale to the full available size of their parent, while others like StackPanel only grow to the minimal size needed for their child elements.

Also, adding a TextBox inside a ListViewItem overrides the dragging behavior with text input behavior, but the list item is still draggable outside the text box. I can leave it like this or reduce the draggable area to the :: handle by following Arya's answer.