CODEWITHSUNDEEP
xamlgridviewuwpuwp-xaml
valqin
valqin

Reputation: 43

How to achieve this type of item layout in UWP XAML

Here is an example image of the layout I'm wanting:

Pic here.

The items will all have the same width, but the height is variable. I want it to wrap horizontally but scroll vertically. I am fine with it either wrapping when it hits the edge of the panel, or constrained to like 3-4 columns.

I've been googling this a ton and tried various types of item panels (VariableSizedWrapGrid, WrapPanel, VariableSizedGrid, etc) but can't get anything to actually match that sort of layout. The closest I've gotten is the UWP Community toolkit's WrapGrid, but that still sets the row's height based on the tallest item, so the smaller ones have a bunch of empty space below them.

I feel like I'm missing something obvious, because I've seen this layout in other UWP apps, and its a fairly common pattern in html, but I just can't figure it out.

Upvotes: 1

Views: 318

Answers (2)

Simon Munro
Simon Munro

Reputation: 5419

The UWP Community Toolkit now has a StaggeredPanel

Upvotes: 2

Bart
Bart

Reputation: 10015

That exact layout is not possible in a clean way currently (May 2017), however the team is working on it for the future.

Twitter

You can get there in a dirty way with a VariableSizedWrapGrid. The dirtiest option is to set the height of 1px and then let your control take x (e.g. 200) rows depending on the height it needs. A somewhat better solution is to set the row height to e.g. 20 or 50px and multiply from there on. This will give you a quite flexible layout (but you'll have to do some calculation to know which height you need). Keep in mind these dirty ways have a negative impact on performance, but it works if really needed.

I suggest either waiting for the new control (at earliest in the Fall Creators Update, later this year and maybe later), or try to fit your items in a limited amount of variable sizes, so you can fall back to a good implementation of the VariableSizedWrapGrid (instead of using the dirty way).

Upvotes: 2

Related Questions