Stretch item in two column listview

Question

I'm trying to create a two column listview with stretched item width and stretched item height in UWP (XAML only).

<ListView HorizontalAlignment="Stretch">
    <ListView.ItemsPanel>
        <ItemsPanelTemplate>
            <VariableSizedWrapGrid MaximumRowsOrColumns="2" HorizontalChildrenAlignment="Stretch" HorizontalAlignment="Stretch"  />
        </ItemsPanelTemplate>
    </ListView.ItemsPanel>
    <ListViewItem Background="Black"  />
    <ListViewItem Background="Yellow" />
    <ListViewItem Background="Blue"/>
</ListView>

Unfortunately I don't have the result yet, I'd like to have:

How it should look like:

I would expect that there would be something like ItemWidth="Stretch" and then to set the same width as height, but it doesn't exist.

Any help would be greatly appreciated.

Thanks.

Maybe *GridView* will be better here? Maybe [this will help](http://stackoverflow.com/a/31299246/2681948), or [this one](http://stackoverflow.com/q/33589510/2681948). — Romasz, May 12 '16 at 08:02
Hi Romasz, thanks for your reply. I've already seen those examples. Unfortunately they won't work for me, because the first example sets the width and heigth explicitly and the second solution is with help of code behind, which I try to avoid (unless there is no other solution). Of course listview or gridview doesn't matter, so you're right that I have to go for a gridview for the better solution. — user1011394, May 12 '16 at 08:09
Have you also taken a look at [this question](http://stackoverflow.com/q/23144519/2681948) - seems to have couple of solutions. — Romasz, May 12 '16 at 08:28
Yes, but anyway thank you Romasz. I think as a quick solution I'll just use: (var panel = (ItemsWrapGrid)gridView.ItemsPanelRoot; panel.ItemWidth = panel.ItemHeight = e.NewSize.Width / 2;). Not XAML but it works.... — user1011394, May 12 '16 at 08:51

score 3 · Answer 1 · answered May 12 '16 at 09:55

To create a two column ListView, I recommend you to check out the UniformGrid-panel, which is available from GitHub with MIT-license.

After copying the UniformGrid.cs into your project, you should quite nicely get the layout you need.

XAML:

    <ListView HorizontalAlignment="Stretch">
        <ListView.ItemsPanel>
            <ItemsPanelTemplate>
                <ug:UniformGrid Columns="2" />
            </ItemsPanelTemplate>
        </ListView.ItemsPanel>
        <ListViewItem Background="Black"  />
        <ListViewItem Background="Yellow" />
        <ListViewItem Background="Blue"/>
    </ListView>

Result:

Stretch item in two column listview

1 Answers1