UX Patterns: Control Positioning

During the development of your app, you might find it useful to define some helper variables that will help you layout your elements or controls within the screen. In this example, we define the following variables in the OnVisible event:

UpdateContext({
    marginLeft : 10,
    marginRight : 10,
    marginTop : 10,
    marginBottom : 10,
    paddingLeft : 15,
    paddingRight : 15,
    paddingTop : 15,
    paddingBottom : 15
})

We can use the above values to adjust the margin and padding of our controls similar to what you see in html elements:

Let’s start by applying the padding to one of the elements in this screen:

 

Now let’s use the margin variable to define the spacing between elements. In this case, we work on the summaryTextBox and define the margins as they relate to the control before it: positionTextBox:

Y =  positionTextbox.Y + positionTextbox.Height + marginTop + marginBottom

 

We repeat this process for all the controls in the page. We position X and Y of each control using the Y and height + margins of the control before it. We can start from top to bottom or from bottom to top.

By doing this, we effectively chain the controls between them in such a way that it becomes easy to move them :

 

 

In a UX review or when we do pixel pushing and final fit and finish, it becomes easy to adjust your margins and padding by simply updating the variable in our OnVisible event. Furthermore, if you are using a Flexible Height Gallery, this control chaining will help you adjust your items height automatically (more on this in a future blog).

Try it out here