C#：Winform / WPF / UWP 中的砌体布局

Question

I'm trying to develop a masonry layout in a custom-made image grid/gallery control in WinForm. Currently my control displays images in a square grid format with fast GDI rendering. Masonry layouts are usually common for web, and there's a lot of resources available on the internet for CSS and Javascript. But I noted that some Windows10 applications are also displaying masonry layout, such as Photos app. Another thing I noted is that the commonly used masonry layout on the web is developed in vertical orientation (variable heights) whereas the layout used by Win10 Photos app (and also other similar apps) are using a fixed row height horizontal masonry layout.

I'm trying to develop a similar code (as per screenshot of Photos app). The point I'm unable to figure out is how the layout configures that how many items to show in each row. There are rows that have 4 items, 3 items or sometimes 5 items. Its purely flexible depending upon the photo sizes/aspect. Overall the width of the layout control/panel is fixed.

Is this type of layout inherently supported by UWP apps? Does anyone know any links / guides that explain the logic behind this type of layout? Does the Photos app has public source code? Another UWP app I've seen implementing this type of layout is the "Perfect Flickr" app.

Answer 1

Does anyone know any links / guides that explain the logic behind this type of layout?

The UWP Community toolkit has a StaggeredPanel control which is similar to the one you mentioned. It's open source. You could check its source code to learn how to arrange its child elements.