Custom ListView control with WrapPanel

Question

I am looking for a custom ListView control which arranges the items horizontally and if the max width is reached, add the item to the next row.

The WrapGrid as ListView.ItemsPanel doesn't work because it uses equal width for each item (grid structure).

The WrapPanel from the WinRT XAML Toolkit has no ItemTemplate and I cannot use binding due to missing ItemSource property.

Could I write my own ListView implementation with wrapping? Which methods do I need to override?

The items have a different width and should be displayed in a row and then wraped in the next row. — zrkl
try use VariableSizedWrapGrid blog.jerrynixon.com/2012/08/windows-8-beauty-tip-using.html — fex
This requires to include custom ColSpan and RowSpan properties in my model and I need to calculate the column and rows manually — zrkl

zrkl zrkl · Accepted Answer · 2015-04-25T08:43:15

The solution is to use the WrapPanel from WinRT XAML Toolkit inside the ListViews ItemsPanel:

            <ListView x:Name="Keywords" SelectionMode="Multiple" ItemContainerStyle="{ThemeResource ListViewItemStyle}">
                <ListView.ItemTemplate>
                    <DataTemplate>
                        <StackPanel>
                            <TextBlock Text="{Binding}" Style="{ThemeResource ListViewItemSubheaderTextBlockStyle}" />
                        </StackPanel>
                    </DataTemplate>
                </ListView.ItemTemplate>

                <ListView.ItemsPanel>
                    <ItemsPanelTemplate>
                        <toolkit:WrapPanel />
                    </ItemsPanelTemplate>
                </ListView.ItemsPanel>
            </ListView>

Custom ListView control with WrapPanel

1 Answers