FluidWrapPanel Automatic layout problem

[dandanyouxiang]

I want to know why he didn't fill the entire parent window after I had been dragged.

[ratishphilip]

Could you provide more detail about your issue?

[dandanyouxiang]

@ratishphilip When I switch the position of the child controls, they are not filled with the entire container I want to upload a png but "Something went really wrong, and we can’t process that file."

[ratishphilip]

@dandanyouxiang FluidWrapPanel does not automatically change the size of its children. It only manages their position.

You have to write your own logic to resize them. Check my blog for more details.

[dandanyouxiang]

@ratishphilip thanks，I do not automatically change the size of its children.I just want to change their position.But they don't fill the container after the adjustment

[dandanyouxiang]

@ratishphilip Could you give me a Email，I want to send you two pictures to show you the results。I split this FluidWrapPanel three rows and three columns，A large child occupy two rows and two columns，Five small child each occupy one line and one column，When I have exchange of their location, the big will run out of the FluidWrapPanel ，I want to kown why？Look forward to your reply

[ratishphilip]

Can you please share your images on OneDrive or though any image sharing site? I did a quick sample UWP project based on your scenario. It seems to be working fine. I have attached the source code. Kindly have a look. TestFWP2.zip

[dandanyouxiang]

@ratishphilip I want to upload a png but "Something went really wrong, and we can’t process that file." And I can't open your Uri （TestFWP2.zip）

[dandanyouxiang]

@ratishphilip I used a wpf project

[ratishphilip]

@dandanyouxiang I sent you the WPF version to your mail id

You can send me your images to 2233475@guerrillamail.com.

[dandanyouxiang]

@ratishphilip I have sent you a Email please check

[ratishphilip]

@dandanyouxiang I found out the causes of this issue.

1. You are not setting any specific width to the FluidWrapPanel, so it takes the dimensions of its parent which is 600x600. Now the size of the small squares is 100x100. So 3 rows and 3 columns would require the FluidWrapPanel to be of size 300x300. So when you try to rearrange the squares, the larger square goes below because the FluidWrapPanel assumes it has 600x600 area to rearrange the squares and does so. So you have to set the Width and Height of the FluidWrapPanel to 300.
2. In Main.xaml.cs, in the RefreshFluidWrapPanel() method you are doing the following

var brush = _brushes[_random.Next(_brushes.Length)];
//var factor = 1;
var factorWidth = UseRandomChildSize ? _random.Next(1, 3) : 1;
var factorHeight = UseRandomChildSize ? _random.Next(1, 3) : 1;

var factorWidth = 1;
var factorHeight = 1;

if (i ==0)
{
    panel.ItemWidth = commWidth * 2;
    panel.ItemHeight = commHeight * 2;
}
else
{
    panel.ItemWidth = commWidth * 1;
    panel.ItemHeight = commHeight * 1;
}

var ctrl = new FluidItemControl
{
    ClipToBounds=true,
    Width = factorWidth * panel.ItemWidth,
    Height = factorHeight * panel.ItemHeight,
    Fill = brush,
    Data = (i + 1).ToString()
};
ctrl.SetValue(Panel.ZIndexProperty, 2);
items.Add(ctrl);

Here if I==0 then you are modifying the ItemWidth and ItemHeight of the FluidWrapPanel (which you should not because you have already set it in the Main.xaml file) Also you are setting the Width and Height of the FluidItemControl to factorWidth * ItemWidth and factorHeight * ItemHeight which is not the correct logic here.

The correct code should be

private void RefreshFluidWrapPanel()
{
    var items = new ObservableCollection<UIElement>();
    var count = 6;
    for (var i = 0; i < count; i++)
    {
        var brush = _brushes[_random.Next(_brushes.Length)];
        var factorWidth = 1;
        var factorHeight = 1;

        if (i ==0)
        {
            factorWidth = 2;
            factorHeight = 2;
        }

        var ctrl = new FluidItemControl
        {
            ClipToBounds=true,
            Width = factorWidth * panel.ItemWidth,
            Height = factorHeight * panel.ItemHeight,
            Fill = brush,
            Data = (i + 1).ToString()
        };
        ctrl.SetValue(Panel.ZIndexProperty, 2);
        items.Add(ctrl);
    }

    panel.ItemsSource = items;
}

If you do these two changes, your panel shall work as expected.

[ratishphilip]

Here is the corrected code CusPanel.zip

[dandanyouxiang]

@ratishphilip can you give send email ,I can not download this “”CusPanel.zip”

[dandanyouxiang]

@ratishphilip I tried your way ，but do not work；

[ratishphilip]

I sent it via mail to 2896232010@qq.com

[dandanyouxiang]

@ratishphilip I was to divide the window into three rows and three columns.Let them stained with the whole window，not you give me

[ratishphilip]

Ok. I am able to reproduce your issue here. This might require some change in the FluidWrapPanel logic. I am looking into it.

[dandanyouxiang]

thank you,Look forward to your reply

[ratishphilip]

@dandanyouxiang I have updated the Layout logic of FluidWrapPanel with a more robust code. Do try it. It should now work as per your requirement. You can find the latest package (v1.3) available in Nuget.

P.S. : I have updated the Target DotNetFramework to 4.6.2. So you may have to retarget your project to 4.6.2 too.

[dandanyouxiang]

I tested no problem.Thank you

[ratishphilip]

You are welcome!

[dandanyouxiang]

@ratishphilip I want to say that you write well

[ratishphilip]

@dandanyouxiang Thank you very much.