0

I would like to recraete the behaviour of a folder with icon view in Windows. When we resize it horizontally, until a new icon fits in the current row, the margin is increased so that all the icons currently in the row fill the whole width proportionally.

My whole XAML code is below. Currently my application behaves like you can see in these two pictures:

Before resizing, you can see free space on the right enter image description here

How can I stretch the margin between elements so that the whole row is always filled?

<Window x:Class="drag_out_test.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:drag_out_test"
        mc:Ignorable="d"
        Title="MainWindow" Height="350" Width="525">

    <UniformGrid>
        <ListBox Name="FileListBox" 
                 MouseMove="FileView_MouseMove" 
                 MouseDown="FileListBox_MouseDown"
                 ScrollViewer.HorizontalScrollBarVisibility="Disabled"                 
                 Padding="10">

            <ListBox.ItemsPanel>
                <ItemsPanelTemplate>
                    <WrapPanel
                        MaxWidth="{Binding ActualWidth,ElementName=FileListBox}">

                    </WrapPanel>
                </ItemsPanelTemplate>
            </ListBox.ItemsPanel>

            <ListBox.ItemContainerStyle>

                <Style TargetType="ListBoxItem">
                    <Setter Property="Margin"
                        Value="5,0,5,0" />
                    <Setter Property="Padding"
                            Value="5,0,5,0"/>
                </Style>
            </ListBox.ItemContainerStyle>

            <ListBox.ItemTemplate>
                <DataTemplate>
                    <Rectangle Width="50" Height="50" Fill="Black">

                    </Rectangle>
                </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox>
    </UniformGrid>
</Window>
2
  • I don't think you can with a WrapPanel, but it's fairly simple to write a custom layout panel to do it. (MeasureOverride works out how many items will fit in a row, ArrangeOverride scales up space allocated to each item to occupy the space available.) Aug 13, 2016 at 11:43
  • You may want to refer to this article WrapPanel with Fill
    – codeDom
    Aug 14, 2016 at 15:08

2 Answers 2

0

This is the simplest example of custom control. With only horizontal orientation and like explorer view.

public class StretchyWrapPanel : Panel
    {
        // Default vertical offset
        const int ElementVerticalOffset = 5;

        protected override Size MeasureOverride(Size constraint)
        {
            Size currentLineSize = new Size();
            Size panelSize = new Size();

            foreach (UIElement element in InternalChildren)
            {
                // Compute element size
                element.Measure(constraint);
                Size desiredSize = element.DesiredSize;

                // Go to new line
                if (currentLineSize.Width + desiredSize.Width > constraint.Width)
                {
                    panelSize.Width = Math.Max(currentLineSize.Width, panelSize.Width);
                    panelSize.Height += currentLineSize.Height + ElementVerticalOffset;
                    currentLineSize = desiredSize;

                    // If width of element is more than our constrait -> go to new line
                    if (desiredSize.Width > constraint.Width)
                    {
                        panelSize.Width = Math.Max(currentLineSize.Width, panelSize.Width);
                        panelSize.Height += currentLineSize.Height + ElementVerticalOffset;
                        currentLineSize = new Size();
                    }
                }
                // If element can be placed in line
                else
                {
                    currentLineSize.Width += desiredSize.Width;
                    currentLineSize.Height = Math.Max(desiredSize.Height, currentLineSize.Height);
                }
            }
            panelSize.Width = Math.Max(currentLineSize.Width, panelSize.Width);
            panelSize.Height += currentLineSize.Height;
            return panelSize;
        }

        protected override Size ArrangeOverride(Size finalSize)
        {
            var currentLineSize = new Size();
            Size panelSize = new Size();

            double offsetLeft = 0;
            double offsetTop = 0;

            foreach (UIElement element in InternalChildren)
            {
                Size desiredSize = element.DesiredSize;

                var elementCountInLine = (int)(finalSize.Width / desiredSize.Width);
                int elementHorizontalOffset = (int)((finalSize.Width - elementCountInLine * desiredSize.Width) / (elementCountInLine));

                if (currentLineSize.Width + desiredSize.Width + elementHorizontalOffset > finalSize.Width)
                {
                    panelSize.Width = Math.Max(currentLineSize.Width, panelSize.Width);
                    panelSize.Height += currentLineSize.Height;
                    currentLineSize = desiredSize;

                    if (desiredSize.Width > finalSize.Width)
                    {
                        panelSize.Width = Math.Max(currentLineSize.Width, panelSize.Width);
                        panelSize.Height += currentLineSize.Height;
                        currentLineSize = new Size();
                    }
                    offsetLeft = 0;
                    offsetTop += desiredSize.Height + ElementVerticalOffset;
                }
                else
                {
                    currentLineSize.Width += desiredSize.Width + elementHorizontalOffset;
                    currentLineSize.Height = Math.Max(desiredSize.Height, currentLineSize.Height);
                }
                element.Arrange(new Rect(new Point(offsetLeft, offsetTop), element.DesiredSize));
                offsetLeft += desiredSize.Width + elementHorizontalOffset;
            }

            return finalSize;
        }
    }
0

I adapted your answer Pavel and I got the behavior I need:

public class CustomWrapPanel : Panel
{
    // Default vertical offset
    const int ElementVerticalOffset = 5;

    protected override Size MeasureOverride(Size constraint)
    {
        Size currentLineSize = new Size();
        Size panelSize = new Size();

        foreach (UIElement element in InternalChildren)
        {
            // Compute element size
            element.Measure(constraint);
            Size desiredSize = element.DesiredSize;

            // Go to new line
            if (currentLineSize.Width + desiredSize.Width > constraint.Width)
            {
                panelSize.Width = Math.Max(currentLineSize.Width, panelSize.Width);
                panelSize.Height += currentLineSize.Height + ElementVerticalOffset;
                currentLineSize = desiredSize;

                // If width of element is more than our constrait -> go to new line
                if (desiredSize.Width > constraint.Width)
                {
                    panelSize.Width = Math.Max(currentLineSize.Width, panelSize.Width);
                    panelSize.Height += currentLineSize.Height + ElementVerticalOffset;
                    currentLineSize = new Size();
                }
            }
            // If element can be placed in line
            else
            {
                currentLineSize.Width += desiredSize.Width;
                currentLineSize.Height = Math.Max(desiredSize.Height, currentLineSize.Height);
            }
        }
        panelSize.Width = Math.Max(currentLineSize.Width, panelSize.Width);
        panelSize.Height += currentLineSize.Height;
        return panelSize;
    }

    protected override Size ArrangeOverride(Size finalSize)
    {
        var currentLineSize = new Size();
        Size panelSize = new Size();

        double offsetLeft = 0;
        double offsetTop = 0;

        foreach (UIElement element in InternalChildren)
        {
            Size desiredSize = element.DesiredSize;

            var elementCountInLine = (int)(finalSize.Width / desiredSize.Width);
            int elementHorizontalOffset = (int)((finalSize.Width - elementCountInLine * desiredSize.Width) / (elementCountInLine + 1));

            if (offsetLeft == 0) { offsetLeft = elementHorizontalOffset; }

            if (currentLineSize.Width + desiredSize.Width + elementHorizontalOffset > finalSize.Width)
            {
                panelSize.Width = Math.Max(currentLineSize.Width, panelSize.Width);
                panelSize.Height += currentLineSize.Height;
                currentLineSize = desiredSize;

                if (desiredSize.Width > finalSize.Width)
                {
                    panelSize.Width = Math.Max(currentLineSize.Width, panelSize.Width);
                    panelSize.Height += currentLineSize.Height;
                    currentLineSize = new Size();
                }
                offsetLeft = elementHorizontalOffset;
                offsetTop += desiredSize.Height + ElementVerticalOffset;
            }
            else
            {
                currentLineSize.Width += desiredSize.Width + elementHorizontalOffset;
                currentLineSize.Height = Math.Max(desiredSize.Height, currentLineSize.Height);
            }
            element.Arrange(new Rect(new Point(offsetLeft, offsetTop), element.DesiredSize));
            offsetLeft += desiredSize.Width + elementHorizontalOffset;
        }

        return finalSize;
    }
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.