Anchors allow you to position items relative to one another. Anchors work by defining relationships between the edges of one item and the edges of another.

For example, the following anchors to top edge of rect2 to the bottom edge of rect1. Regardless of where rect1 is positioned, rect2 will be 20 points below it.

Rectangle as rect1 {
    color: #red
}

Rectangle as rect2 {
    anchor top = rect1.bottom + 20
    color: #orange
}

Anchors are convenient, but are just a shorthand for the equivalent property expressions, like that shown below.

Rectangle as rect2 {
    y: rect1.y + rect1.height + 20
    color: #orange
}

This is the general form of an anchor:

anchor Target Attribute = Source Attribute + Constant

Parent anchors

As it is so common, a shorthand exists for anchoring directly to an item's container.

If you are anchoring directly to the same attribute in the parent, you can omit the right hand side of the anchor entirely. For example, the following pairs of anchors are equivalent.

// Anchor to the right side of my container
anchor right
anchor right = parent.right

// Fill my container
anchor bounds
anchor bounds = parent.bounds

Edge attributes

The six primary edges, three horizontal edges and three vertical edges, are shown below. Anchored edges must be on the same axis, so you can't anchor a horizontal edge to a vertical edge or vice versa.

You can anchor an item to any of its siblings, or to its container item. For example, you can achieve the example shown in the previous section using anchors like this:

Rectangle {
    width: 100
    height: 100
    color: #orange
    
    Rectangle {
        anchor centerX = parent.centerX
        anchor bottom = parent.bottom
        width: 50
        height: 50
        color: #lightblue
    }
}

Anchors and property expressions can be mixed where they don't conflict. In the example above, we used the width and height properties to specify the size and used anchors to set the position.

Anchors can be chained together to create more complex layouts.

Rectangle as icon {
    anchor left = 10
    color: #lightblue
}

Text as name {
    anchor left = icon.right + 8
    anchor right = more.left - 8
    text: "Samantha Louise Applebee"
}

Ellipse as more {
    anchor right = parent.right - 10
    color: #lightblue
}

Size attributes

The two size attributes, width and height, are shown below.

Like with edge attributes, you can anchor an item's size to any of its siblings, or to its container item.

You can also include a scale factor when anchoring a size attribute. For example, the following anchor sets an item's width to half its container width plus 20.

anchor width = 0.5 * parent.width + 20

Compound attributes

In addition to the primary anchor attributes, there are five compound attributes that allow you to anchor to the bounds, size or center of an item more concisely. Compound attributes are just a convenience and are equivalent to anchoring multiple primary attributes at once.

Bounds anchor constants

A positive constant in a bounds anchor expands the bound about each edge, and a negative constant shrinks it. Think "plus makes it bigger" and "negative makes it smaller".

Rectangle {
    color: #orange

    Rectangle {
        anchor bounds = parent.bounds - 20
        color: #lightblue
    }
}

Design view