Different ColumCount based on the device orientation

How-to Discussions
1

Hi!

I have the following code, triying to have different ColumCount based on the device orientation. want to do this because y want two columns on landscape (horizontal) because it’s better for Tablets, but it only shows one column on any orientation.

<Panel>
  <ColumnLayout Orientation="Horizontal" ColumnCount="2" />
  <ColumnLayout Orientation="Vertical" ColumnCount="1" />
  <Each Items="{dataSource.responseData}">
    <itemDisplay />
  </Each>
</Panel>

Any idea about how can make it work?

Regards

John

2

Use <WhileWindowLandscape> and <WhileWindowPortrait> to change the ColumnCount using an Observable, or if the UI changes are broader, just make two UX blocks, one for each case.

Ref: https://www.fusetools.com/docs/fuse/triggers/whilewindowlandscape

3

Works like a charm!

Thanks!

John