WPF GridView: "Newspaper" Column?

Question

I'm not sure how else to describe this, outside of calling it a "newspaper" column.

Essentially I have a potentially long list of codes that I want to display in a grid, and I have limited vertical real estate. I would like to show these codes (which are all from the same database column) in multiple columns, maybe 3-5 columns across.

I can absolutely break the data up into separate sources and bind to them separately if that is the best solution, but I thought there might be an easy, built-in way to accomplish this with WPF.

Answer 1

I suspect what you're looking at here is a custom layout panel which has a well defined height and then wraps into the next column. You could then use the ItemsPanelTemplate of the list control to use your new custom panel.

With respect to the development of the panel itself, I would suspect that either wrapping or inheriting from the Grid would be an excellent first choice. The panel could then manage the column definitions itself based on the number of items it contains.

To determine the layout of the individual items, I suspect using the ActualHeight to determine when another item would cause a column to overflow and using that to move to the next column would be the optimal solution. I would imagine using a single vertical stack panel with no border or padding inside each column may make it easier for your to offload the layout to those controls, but I believe you would still wind up having to determine which panel to lay the items out in based on the item heights.

Answer 2

This is actually trivial using a WrapPanel.

For a hard-coded list:

<WrapPanel Orientation="Vertical">
  <ItemOne />
  <ItemTwo />
  ...
</WrapPanel>

For a data-bound list:

<ItemsControl ItemsSource="...">
  <ItemsControl.ItemsPanel>
    <ItemsPanelTemplate>
      <WrapPanel Orientation="Vertical" />
    </ItemsPanelTemplate>
  </ItemsControl.ItemsPanel>
  <ItemsControl.ItemTemplate>
    <DataTemplate DataType="...">
      ...
    </DataTemplate>
  </ItemsControl.ItemTemplate>
</ItemsControl>

If desired you can replace the ItemsControl with a ListBox or make it a ComboBox or whatever. You can use a default template for your data or use a custom template as shown above. You can even use a ListView along with a GridView if you want a multi-column list.