Dynamic item padding in a WPF WrapPanel

Question

Is there any way adjust padding in a WPF control based on the WrapPanel width, something like Windows Explorer does when the window is resized.

Here are a couple of this examples:

enter image description here

I suggest you apply the technique from this answer: http://stackoverflow.com/a/932609/970247. — Laurent Jalbert Simard, Feb 02 '15 at 20:31

score 0 · Answer 1 · answered Feb 02 '15 at 22:01

0

If you are using an ItemsControl you can define an ItemsContainerStyle and set it's MaxHeight and MaxWidth values .

By doing so the items can grow to a limited size and a padding effect would occur.

answered Feb 02 '15 at 22:01

eran otzap

12,293
20
84
139

This will force you to use children of the same type isn't it? Though you can work around that http://blogs.microsoft.co.il/blogs/eladkatz/archive/2011/05/29/what-is-the-easiest-way-to-set-spacing-between-items-in-stackpanel.aspx – Sagiv b.g Feb 03 '15 at 04:28
@Sag1v According to the pictures he presented it seems like what he needed , farther more object oriented programming is about abstraction he can use a different DataTemplate for different items under the same ItemsControl . what i described is a simple soulotion , Rachel's answer above would be the way to go , I just didn't want to burden SteelersMan with such an advanced solution. – eran otzap Feb 03 '15 at 09:48
1

@Sag1v No, this will work with variable sized items. You just need to ensure the ItemTemplate is one that has a specific content size so any extra space is displayed as whitespace. Also, I'd use `Height` and `Width` instead of `MaxHeight`/`MaxWidth` to ensure all items are drawn the same size, and have the same amount of whitespace – Rachel Feb 03 '15 at 14:42

score 0 · Answer 2 · answered Feb 02 '15 at 22:22

I would recommend setting the Width property of the ItemContainerStyle using a Binding and Converter to determine the correct size for each item.

In your example, it looks like your item sizes are static and you only want to distribute the remaining space, so bind the Width property to WrapPanel.Width / NumberOfItems (which is the total number of ItemWidth that can fit into WrapPanel.Width)

Here's a quick example that uses 100 as the item width :

<ItemsControl.ItemContainerStyle>
    <Style>
        <Setter Property="Width" 
                Value="{Binding ElementName=MyWrapPanel, 
                                Path=ActualWidth, 
                                Converter={StaticResource MyCustomWidthConverter}, 
                                ConverterParameter=100" />
    </Style>
</ItemsControl.ItemContainerStyle>

And the converter would look something like this (I may have syntax errors here since I'm not using an IDE to verify the code) :

public object Convert(object value, Type targetType, 
    object parameter, CultureInfo culture)
{
    // TODO: add error handling
    double totalWidth = (double)value;
    double itemWidth = (double)parameter;

    double numItems = Math.Floor(totalWidth / itemWidth);
    double availableExtraSpace = totalWidth - (numItems * itemWidth);
    double paddedItemWidth = itemWidth + (availableExtraSpace / numItems);
    return paddedItemWidth;
}

Dynamic item padding in a WPF WrapPanel

2 Answers2