CODEWITHSUNDEEP
c#win-universal-appuwp-xaml
user1011394
user1011394

Reputation: 1666

Stretch item in two column listview

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:

Current result

How it should look like:

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.

Upvotes: 1

Views: 515

Answers (1)

Mikael Koskinen
Mikael Koskinen

Reputation: 12916

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:

UWP UniformGrid

Upvotes: 3

Related Questions