Share via

Using Form and Anchor Layouts

  • Article

FormLayout and AnchorLayout allow you to position children in a parent container without a lot of nesting to achieve the results you want. Using the corresponding layout input (FormLayoutInput or AnchorLayoutInput) to provide more information, the edges of each child can be positioned relative to the other children or to the parent element. An edge of the child (top, bottom, left, and right) is anchored to another target child or parent based on percentages of the target's size, which creates an AnchorEdge. For example, you can anchor a child to a parent's top border, at 25% of the width (see the example below). The starting point (0 or 0%) is at the top left of the target item. You can also specify pixel offsets. For example, you can anchor a child to another child's edge plus 25 pixels.

To indicate which target to use as an anchor edge, specify the target's name as the AnchorEdge ID. To refer to the parent, you can use the Parent keyword. You can also use the Focus keyword to refer to the item that has focus.

FormLayout is identical to AnchorLayout, except in the way they size:

  • FormLayout sizes the layout to the parent. The layout uses the entire size of the parent and arranges children within that space. The Form layout is useful as a top-level layout. Use FormLayoutInput to provide edge anchor information.

  • AnchorLayout sizes the layout to children. The layout uses only the space that is needed to position the children within that space. Use AnchorLayoutInput to provide edge anchor information. You can also specify whether the size of child elements should affect the size of the parent's height and width.

    Like all layout types, certain anchor layout constraints can lead to unpredictable results. By default, the anchor layout provides equal area around the starting reference for other sibling elements. If siblings run out of room—for instance if they are all anchored to one side of the starting reference—undesired clipping could occur. Also, be aware that the size of the parent is always relative to the full size of the layout container. When creating a layout, consider changing the parent to use Form layout; you can then see the area you are working with, make adjustments, and then switch back to Anchor layout.

The following example shows how to position one item with respect to another using a Form layout. The top and left edges of the first item (the orange colorfill) are positioned at 25% (.25) of the parent's height and width. The other items are placed with respect to the first child.

An example of the Form layout.

<!-- A Form layout. -->
<ColorFill Content="White" Layout="Form">
  <Children>

    <!-- The top edge of this child element is anchored to 25% of -->
    <!-- the parent's height. The left edge of the child is anchored -->
    <!-- at 25% of the parent's width. -->
    <ColorFill Name="Orange" Content="Orange" MinimumSize="50,50" >
      <LayoutInput>
        <FormLayoutInput Left="Parent,.25" Top="Parent,.25"/>
      </LayoutInput>
    </ColorFill>

    <!-- This item is anchored to the Orange element. The left edge -->
    <!-- is the same. The top is aligned with the Orange element's -->
    <!-- bottom edge plus 10 pixels. -->
    <ColorFill Name="Green" Content="Green" MinimumSize="50,50" >
      <LayoutInput>
        <FormLayoutInput Left="Orange,0"  Top="Orange,1,10"/>
      </LayoutInput>
    </ColorFill>

    <!-- This item is anchored to the Orange element. The top edge -->
    <!-- is the same. The left is aligned with the Orange element's -->
    <!-- right edge plus 10 pixels. -->
    <ColorFill Name="Blue" Content="Blue" MinimumSize="50,50" >
      <LayoutInput>
        <FormLayoutInput Left="Orange,1, 10" Top="Orange,0"/>
      </LayoutInput>
    </ColorFill>

    <!-- This item is anchored to the Orange element. The top edge -->
    <!-- is the same. The right is aligned with the Orange element's -->
    <!-- left edge minus 10 pixels. -->
    <ColorFill Name="Red" Content="Red" MinimumSize="50,50" >
      <LayoutInput>
        <FormLayoutInput Right="Orange,0,-10" Top="Orange,0"/>
      </LayoutInput>
    </ColorFill>

    <!-- This item is anchored to the Orange element. The left edge -->
    <!-- is the same. The bottom is aligned with the Orange element's -->
    <!-- top edge minus 10 pixels. -->
    <ColorFill Name="Violet" Content="Violet" MinimumSize="50,50" >
      <LayoutInput>
        <FormLayoutInput Bottom="Orange,0,-10" Left="Orange,0"/>
      </LayoutInput>
    </ColorFill>

  </Children>
</ColorFill>

Sample Explorer

  • Layout > Form
  • Layout > Anchor

See Also