Search code examples
wpfitemscontrolwrappanel

WPF ItemsControl with multiple columns

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.

enter image description here

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?

Solution

  • 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>