Borders and Layout boxes are special UI widgets that modify how other widgets appear. They appear in your UI hierarchy attached to other widgets, as described in User Interface Basics.

Under the hood, Borders and Layout Boxes are parents to the widgets they’re attached to. (They are not displayed in the hierarchy as such both to keep the list tidy, and so that they can be added to or removed from specific widgets more easily.) This has a variety of implications for how they behave that we’ll touch on below.

Let’s dive a little deeper into how each of these work:

Borders

A Border has two options: Color and Image. 

If you select a Color, that color field will appear behind the widget, growing or shrinking to match the widget’s contents.

If you add an image, you’ll see size controls appear, set to 0,0. If you leave it set to that, the image will behave the same way as color would, expanding to match the contents of the Canvas. Here’s our example canvas from the Canvas article with an image backer at 0,0.

However, if you put a specific number in either size field, the image will display proportionally based on its native dimensions. (You can also fill in both numbers if you want to stretch or compress it to a specific size)

Specifying the size of an Image Border will dictate the size of the Widget it’s attached to. So in this example, the Canvas will no longer grow or shrink to match its contents, but rather will be a fixed size determined by the Border. (This is because the Canvas is a child of the border, and hence can’t exceed its boundaries.) So if you want a fixed canvas on which to position things, this is one way to go about it.

Layout Boxes

Layout Boxes give you a variety of ways to control the size and behavior of your Widgets.

The Override Height and Override Width controls give you another way of specifying the size of the child widget. (Note that this is not necessary if you’re already using a Border image of a fixed size – so in the example image below, we’ve shifted our canvas back to a simple blue color border.)

Once you’ve fixed your widget’s size (usually with the overrides or with an Image Border) you can use the Alignment controls to position content.

Above we set both Alignments to “Center,” and we see the contents of our Canvas move accordingly. (Note that they retain the same position relative to one another as they had without the layout box – the Layout Box is controlling the position of the canvas, and the Canvas is defining the position of the elements within it.)

The Padding controls define margins that keep content a specified distance from the specified edges.

Note that one downside of defining your canvas or panel size rigidly is that if content exceeds its boundaries, it may be cut off. For Panels, scroll bars will appear when this happens, but for Canvases, the content will simply not be displayed.