S – Size Break Points – Learn how to use them!

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:

1. Less than 600
2. Between 600 and 900
3. Between 900 and 1200
4. 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!

Recent articles

• R – Rich Text Editor – Why is it useful?
• Q – Qwerty keyboard – How to create one!
• P – Pen Input – How to check if blank!