How to set a wrap point for a wrappanel?

Question

I have an ItemControl and I want the data to be entered in two columns. When the user resizes to less than the second column, the elements of the second column must be inserted into the first column. Something like UniformGrid, but with packaging.

I managed to use the WrapPanel for this. But I have to manipulate and hard code the ItemWidth and MaxWidth WrapPanel to achieve two column elements and a wrapping. This is not a good practice.

Is there a way to set the maximum number of columns or, in other words, let us decide at what point the WrapPanel should start wrapping?

Some Internet browsing has shown that WrapGrid in Windows 8 Metro has a property. Does anyone have this implementation in WPF?

Answer 1

There is a UniformWrapPanel article on codeproject.com that I modified to ensure that the elements in the wrapper panel have a uniform width and match the width of the window. You should easily modify this code to have the maximum number of columns. Try changing the code next to

var itemsPerRow = (int) (totalWidth/ItemWidth);

to indicate maximum columns.

Here is the code:

public enum ItemSize
{
    None,
    Uniform,
    UniformStretchToFit
}

public class UniformWrapPanel : WrapPanel
{
    public static readonly DependencyProperty ItemSizeProperty =
        DependencyProperty.Register(
            "ItemSize", 
            typeof (ItemSize), 
            typeof (UniformWrapPanel), 
            new FrameworkPropertyMetadata(
                default(ItemSize),
                FrameworkPropertyMetadataOptions.AffectsMeasure,
                ItemSizeChanged));

    private static void ItemSizeChanged(
        DependencyObject sender, DependencyPropertyChangedEventArgs e)
    {
        var uniformWrapPanel = sender as UniformWrapPanel;
        if (uniformWrapPanel != null)
        {
            if (uniformWrapPanel.Orientation == Orientation.Horizontal)
            {
                uniformWrapPanel.ItemWidth = double.NaN;
            }
            else
            {
                uniformWrapPanel.ItemHeight = double.NaN;
            }
        }
    }

    public ItemSize ItemSize
    {
        get { return (ItemSize) GetValue(ItemSizeProperty); }
        set { SetValue(ItemSizeProperty, value); }
    }

    protected override Size MeasureOverride(Size availableSize)
    {
        var mode = ItemSize;

        if (Children.Count > 0 && mode != ItemSize.None)
        {
            bool stretchToFit = mode == ItemSize.UniformStretchToFit;

            if (Orientation == Orientation.Horizontal)
            {
                double totalWidth = availableSize.Width;

                ItemWidth = 0.0;
                foreach (UIElement el in Children)
                {
                    el.Measure(availableSize);
                    Size next = el.DesiredSize;
                    if (!(Double.IsInfinity(next.Width) || Double.IsNaN(next.Width)))
                    {
                        ItemWidth = Math.Max(next.Width, ItemWidth);
                    }
                }

                if (stretchToFit)
                {
                    if (!double.IsNaN(ItemWidth) && !double.IsInfinity(ItemWidth) && ItemWidth > 0)
                    {
                        var itemsPerRow = (int) (totalWidth/ItemWidth);
                        if (itemsPerRow > 0)
                        {
                            ItemWidth = totalWidth/itemsPerRow;
                        }
                    }
                }
            }
            else
            {
                double totalHeight = availableSize.Height;

                ItemHeight = 0.0;
                foreach (UIElement el in Children)
                {
                    el.Measure(availableSize);
                    Size next = el.DesiredSize;
                    if (!(Double.IsInfinity(next.Height) || Double.IsNaN(next.Height)))
                    {
                        ItemHeight = Math.Max(next.Height, ItemHeight);
                    }
                }

                if (stretchToFit)
                {
                    if (!double.IsNaN(ItemHeight) && !double.IsInfinity(ItemHeight) && ItemHeight > 0)
                    {
                        var itemsPerColumn = (int) (totalHeight/ItemHeight);
                        if (itemsPerColumn > 0)
                        {
                            ItemHeight = totalHeight/itemsPerColumn;
                        }
                    }
                }
            }
        }

        return base.MeasureOverride(availableSize);
    }
}