locked
Gaps in VariableWrapSizeGrid

    Question

  • I desperatly try to mimick the behaviour of the well known Masonry or Isotope layout from the web.

    There are promising Solutions out there, like this from U2U or that one from Mark Rideout 

    I tried the latter one. It works fine for some and few Items. But if you have a ton of (especially) squared Items it fails, since it produces random(?) gaps.

    Here's what it Looks like:

    Of course sometimes you would have a Piece left over at the end. That's ok.. but inside/in the midst of the gridview should not happen.

    and here what it should look like (and does if I start deleting randomly some items until I matched the desired layout):

    Are there some Options I'm missing in VirtualizingStackPanel or VariableSizedWrapGrid?

    To reproduce, here's also the code... I simplified Mark's example a bit (which had no Impact on the odd behaviour):

    http://www.visuellgestalten.de/upload/wrapSizeBug.zip
    Sorry if the solution has no Project associated - somehow the Connection to the Project is lost after zipping. But the codefiles are all inside there.

    As a last Resort I'm seriously thinking of including a webview with the whole thing setup in JavaScript with isotope and the "perfect masonry" Extension.

    Wednesday, August 06, 2014 1:08 PM

Answers

  • The isn't an issue with the underlying grids, it is an effect of the placement algorithm and simple geometry. The sample keeps the blocks in their original order. You get a gap when the next block to place doesn't fit.

    You will need to modify the sorting so this doesn't happen. The easiest way may be to add placeholder tiles to fill the gaps.

    --Rob

    • Marked as answer by SW_Andy Wednesday, August 06, 2014 4:17 PM
    Wednesday, August 06, 2014 2:32 PM
    Owner

All replies

  • The isn't an issue with the underlying grids, it is an effect of the placement algorithm and simple geometry. The sample keeps the blocks in their original order. You get a gap when the next block to place doesn't fit.

    You will need to modify the sorting so this doesn't happen. The easiest way may be to add placeholder tiles to fill the gaps.

    --Rob

    • Marked as answer by SW_Andy Wednesday, August 06, 2014 4:17 PM
    Wednesday, August 06, 2014 2:32 PM
    Owner
  • Hmm... but the trick with adding placeholders would only work if I have a fixed or known number of tiles? In my case I have a growing number until a Maximum and with random amounts of double sized tiles.

    The only other method of resorting I can think of, is to make a linq query for the tilesizes... but then all big tiles would sit next to each other I guess and the intended look&feel would be gone.

    Could a hardcoded order (which would be fine) of the tiles be fine (the rows are fixed)?
    Like this from that example?

    _sequence = new List<Size>
                {
                    LayoutSizes.PrimaryItem,
                    LayoutSizes.SecondarySmallItem,
                    LayoutSizes.SecondarySmallItem,
                    LayoutSizes.OtherSmallItem,
                    LayoutSizes.OtherSmallItem, // 5 
                    LayoutSizes.OtherSmallItem,
                    LayoutSizes.SecondaryTallItem, // 7
                    LayoutSizes.OtherSmallItem,
                    LayoutSizes.SecondarySmallItem, // 9
                    LayoutSizes.OtherSmallItem,
                    LayoutSizes.SecondarySmallItem, // 11
                    LayoutSizes.SecondarySmallItem,
                    LayoutSizes.OtherSmallItem,
                    LayoutSizes.OtherSmallItem
                };
    

    Wednesday, August 06, 2014 3:41 PM
  • Yes... I just tried it. I guess that's the way to go for me. I just tried it with a block of 40 tiles and also defined the order for that 40 tiles in a list like that above. It's really a matter of Trial&error.

    Next Step would be either layout the list for my Maximum amount of tiles (which would be hundreds) or ust define a small block, put that into a Group and repeat that process to fake a large gridview (which consists of several Groups with hardcoded defined tile size order).

    Wednesday, August 06, 2014 4:16 PM