Converting Grid Layout

Question

I'm somewhat new to WPF, so forgive me if this is trivial.

I have a panel set up like the following image suggest:

It's simply a representation of the panel that composes the left side of my dockPanel. It has one column and three rows - one for the title, one for an image (the car is simply a placeholder, not the actual image), and one for corresponding stats for that specific item. There actually is a little bit of space in between each block, but my Paint skills are not pro.

Anyways, I'd like to transition this panel to be on the bottom of my dockpanel and become horizontal. However, I want the max # of items in each row to be 5, as the following image poorly attempts to suggest:

What is a good approach for this?

Should I do this in code behind (i.e. as I loop through each item type, if the count of types thus far is divisible by 5, create a new row and make sure each new block lines up with the one above it) or is there a way to do this in XAML?

Any advice would be awesome. Thanks!

Answer 1

I would recommend that you use a UniformGrid control. From the linked page:

Provides a way to arrange content in a grid where all the cells in the grid have the same size.

Furthermore, it has a Columns property which enables you to set the number of columns that are in the grid.

<ListBox ItemsSource="{Binding Items}">
    <ListBox.ItemsPanel>
        <ItemsPanelTemplate>
            <UniformGrid Columns="5" />
        </ItemsPanelTemplate>
    </ListBox.ItemsPanel>
</ListBox>

You can find out more about the various Panels used in WPF from the Panels Overview page on MSDN.