Introduction
Size break points are a key element of making your apps responsive. It is a property of the app control.
How to use size break points
Size break points help you define when to change the behavior of a control (e.g. its X position, or Y position, or width etc.) based on screen width. The default values are [600, 900, 1200]. This gives me 4 ranges to play with:
- Less than 600
- Between 600 and 900
- Between 900 and 1200
- Greater than 1200
This translates into the size property of a screen. The above 4 ranges translate into sizes 1, 2, 3, and 4. You can then have expressions like the following for, lets say, the wrap count of a gallery:
Switch(
'Screen1'.Size,
1,
1,
2,
2,
3,
3,
4,
4,
4
)
Or simply
Screen1.Size
The advantage of translating break points into sizes is if you ever want to change your break points, all you will need to do is update the app's SizeBreakPoints property. Otherwise you would have to go to every control that has any dependency on these break points. Here is a demo:
To learn more about creating responsive apps, click here.
Stay tuned for the remaining 7 tips!