WPF ItemsControl with multiple columns

Question

I have a ScrollViewer with an ItemsControl inside. The ItemSource of the ItemsControl is bind to an ObservableCollection.

The problem is that it defaults all the content to one column. I would like that according to the size of the window the child items would acomodate to fit all the available area.

A WrapPanel would work. Please see the image below. On the left the items are arranged inside an ItemsPanel, on the right they're arranged inside a WrapPanel.

But unfortunately the WrapPanel doesn't have an ItemSource property so I could bind my items. Is there any way to make the ItemsSource have more columns or to bind my ObservableCollection to the WrapPanel?

score 6 · Accepted Answer · answered Aug 07 '15 at 14:24

Simply do it the other way round: Keep the ItemsControl and change its panel template to use a WrapPanel for item layouting:

<ItemsControl ItemsSource="{Binding YourObservableCollection}">
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <WrapPanel />
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            ...
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>

is better if for `WrapPanel` set `ItemWidth` – Sadeq Shajary Mar 29 '20 at 11:19 — Sadeq Shajary, Mar 29 '20 at 11:19

score 0 · Answer 2 · answered Apr 12 '18 at 06:50

0

give the wrap panel a width without orientation, automatically you will have 2 items per row or 3.. etc (play with width per item)

answered Apr 12 '18 at 06:50

xrhstos

101
1
3

WPF ItemsControl with multiple columns

2 Answers2