Official documentation claims:

ItemWidth

The width of the layout area for each item that is contained in an ItemsWrapGrid. The default is Double.NaN, which results in the "Auto" layout behavior.

This statement doesn't look right because the simpliest example proves it wrong:

<ListView>
    <ListView.ItemsPanel>
        <ItemsPanelTemplate>
            <ItemsWrapGrid Orientation="Vertical"/>
        </ItemsPanelTemplate>
    </ListView.ItemsPanel>
    <ListViewItem>One</ListViewItem>
    <ListViewItem>Two</ListViewItem>
    <ListViewItem>Little bit long Three</ListViewItem>
</ListView>

Which renders in to:

screenshot

I can set width manually:

<ItemsWrapGrid Orientation="Vertical" ItemWidth="300"/>

But it's not what I want. I want ItemWidth automatically adjust to content width. How to do it?

UPD: Solution (somewhat)

It looks like there're no direct simple solution so instead of fixing that bug you may use 3rd party component WrapPanel from Microsoft Community Toolkit (search in NuGet). It has poor perfomance with 5000 items or above though.

1 Answers

1
Muzib On Best Solutions

Actually it's not "wrong" what the official doc says. The ItemsWrapGrid arranges children in rows and columns. So, all the other cells get the width of the first cell, if it didn't do it that way, then you wouldn't have rows and columns because different cells would have different height and width and to arrange them in rows and columns will be rather complicated.

I think I understand what type of Layout Panel you want. It's called FlowPane, I didn't find this panel in UWP, but they exists in WinForms.

But, you can write your own layout to achieve the arrangement of children you want. And writing up a flow layout shouldn't be problem if you understand the basics of layout. The problem is, even if you write your own Layout Panel and use that as the ItemsPanel of an ItemsControl like GridView, you won't have virtualization as the ItemsWrapGrid panel has. And that's going to bother if the ItemsControl has a lots of items. The virtualization problem has been solved with ItemsRepeater. So use that if you want virtualization.

Hope that helps.

Edit:

I found the layout panel in the community toolkit, it's called WrapPanel: