Suggestion on making a Mosaic layout

How-to Discussions
1

I want to implement a Pinterest like Mosaic layout for a tablet app. What is the best way to implement it?

Using Grid looks more like a table, while using multiple vertical StackPanel requires multiple data sources that is too complicated to manage and is not flexible enough to handle different screen resolution.

Thanks in advance.

2

We have a basic ColumnLayout now that can do this type of layout.

file
PRkUSPlhc17t-legacy-files-mXol2cUh7J9UgGwq-2GzOW3AMNmoT0zFFSil4nA5A.png317×561 

<Panel>
    <ColumnLayout ColumnCount="2"/>

    <Child/>
    <Child/>
    <Child/>

The ColumnLayout is a Layout that can be added to a Panel (other classes like StackPanel are conveniences for a Panel with a StackLayout).

The only options so far are Orientation and ColumnCount. You’ll have to control the control on your own for now (responsive triggers are coming soon to adjust to screen size). You can also give feedback on what type of properties might be helpful on the ColumnLayout (perhaps a Width or Height to base the number of columsn on available size).

3

Thanks again edA-qa mort-ora-y!

Having ColumnCount is good enough to develop something. I suppose I can use Each width a data source within Panel, right?

<Panel>
  <ColumnLayout ColumnCount="2"/>

  <Each Items="{observable_data}">
      <Child />
  </Each>

Don’t notice the presence of this in the documentation. Apart from ColumnLayout, are there any other layouts available?

4

Yes, you can place Each in the panel.

ColumnLayout is the only one without a special panel, the other layouts being StackPanel, Grid, DockPanel, and WrapPanel. In time more specialized ones will appear, though we’re trying to keep them fairly generic.

5

Thumbs up. Thanks.

6

Just as an aside, the design pattern you’re talking about is know as cards - read up: https://blog.intercom.io/why-cards-are-the-future-of-the-web/