WPF ItemsControl with multiple columns

itemscontrolwpfwrappanel

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?

Best Answer

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>

Related Solutions

Wpf – Bind the height of a grid row to it’s contents in WPF

Did you try setting height to Auto to achieve what you want:

<RowDefinition Height="Auto"/>

(or am i thinking too simple here.. ?)

Wpf – WrapPanel as ItemPanel for ItemsControl

You might want to take a look at the ItemsPanel property:

Gets or sets the template that defines the panel that controls the layout of items.

Example:

<ItemsControl>
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <WrapPanel />
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
</ItemsControl>

And you can set it in a Style as follows:

<Style TargetType="ItemsControl">
    <Setter Property="ItemsPanel">
      <Setter.Value>
            <ItemsPanelTemplate>
                <WrapPanel />
            </ItemsPanelTemplate>
        </Setter.Value>
    </Setter>
</Style>

Best Answer

Related Solutions

Wpf – Bind the height of a grid row to it’s contents in WPF

Wpf – WrapPanel as ItemPanel for ItemsControl

Related Topic