How can a WPF ListBox, with a custom ItemsPanel template, resize itself based on the size of its items

Question

This is a follow up question to this, which was answered.

Using the code

<ListBox ScrollViewer.VerticalScrollBarVisibility="Disabled">
  <ListBox.ItemsPanel>
    <ItemsPanelTemplate>
      <WrapPanel Orientation="Vertical"/>
    </ItemsPanelTemplate>
  </ListBox.ItemsPanel>
</ListBox>

you can create a list where the items populate the list box in columns from left to right and the last item in a particular column is never cutoff (meaning if the item was to tall to fit, it is moved to the top of the next column). How could I now dynamically adjust the width of the ListBox to 'fit' it's items and get that same behavior horizontally. So suppose the following:

If, at a given height, there only needed to be one column to fit all of the items the width of the listbox should be the size of the width of the items.

Or, at a given height there needs to be four columns, it would need to be size to four times the width of the items.

Finally, say at a given height there needs to be more columns than the maximum allowed width of the ListBox, it would need to calculate how wide it should be so that the items in the columns that would not be able to fit were not truncated but just not shown until the user scrolled to the right.

Thanks for your help!!

EDIT:

I think a simpler way to phrase the above is that I'm looking for a way to avoid 'clipping' items in the list. I'd like to create a list that displays items in grid but where you wouldn't have to scroll because some items were partially covered and would require you to scroll to the right or left to see the remainder of that item (though the list could only be so wide or tall and if there were enough items you'd still need to scroll to see all of them, just any items you saw should be fully displayed). Also I only care about the initial drawing of the list. It doesn't have to 'snap' items to always fit but it should be able to be scrolled so that it fills the available space completely with the items it does display.

It seemed to me the key do doing this is to figure out the size of a list item at runtime and the size of the content container in the listbox and then you could adjust it to completely fit so many items at once before the list is initially drawn?

Thanks!

Answer 1

This is a pretty complicated question. I'm not 100% sure what you are trying to accomplish here... does the number of columns you see need to increase or decrease as the height increases? I would hope decrease, but the way you worded your question it seems you want the opposite and I'm trying to understand this.

I think a basic understanding of WPF's layout system is really useful when trying to understand these questions. Another thing that is useful is that the size of something is largely determined by its layout container, rather than the thing itself.

In your question, you ask how to get your ListBox to dynamically size based on the contents. A ListBox is not a layout control, but something like a WrapPanel is. The function of a WrapPanel is to say at the same width, even if the contents of the Panel increases in size. This is not the same for other controls, like a Grid for example.

Here's a couple of good links about the layout system in WPF. Hopefully this helps. Come back with some clarification of your question and see if we can't get you some more help if you need it.

http://www.wpftutorial.net/LayoutProperties.html http://msdn.microsoft.com/en-us/library/ms745058.aspx