Introduction
Responsiveness is a key feature of any app and there are many ways a maker can implement a responsive gallery. One of the sample apps I created for Microsoft Teams is Profile+ (code can be found here). It is an app that shows organization structure for a selected user and also shows the list of team members in a team. We will use the team members view to illustrate how to build a left-aligned gallery.
Responsive left aligned gallery
For a gallery to be responsive, the idea is to have a dynamic wrap count. As the screen goes wider, the wrap count should increase. Following these steps to achieve a left-aligned gallery:
- Set the TemplateSize to a fixed value. We will use 120 in this example. Also, set a label or a button inside the gallery and set its width to 120 (can be any number you want), This is the number that will be referenced below.
- Set the Wrap Count of the gallery to the following code:
If( CountRows(Self.AllItems) * (120 + 20) < (Parent.Width - 500), CountRows(Self.AllItems), RoundDown( (Parent.Width - 20) / (120 + 20), 0 ) )
Parent.Width - 20 is just the gap from the border of the screen that I want to use
- Set the Width of the gallery to the following code:
If( CountRows(Self.AllItems) > RoundDown( (Parent.Width - 20) / (120 + 20), 0 ), RoundDown( (Parent.Width - 20) / (120 + 20), 0 ) * (120 + 20), CountRows(Self.AllItems) * (120 + 20) )
- Set the X property of the gallery to the following code:
10
Here is a demo of a responsive left aligned gallery:
Here is a demo of the Profile+ app:
3 thoughts on “How to create a left aligned responsive gallery”