Share via

Using Dock Layouts

  • Article

DockLayout positions children in a docking manner along the parent borders. By default, DockLayout uses the entire size of the parent and arranges children within that space. This layout needs more information from the DockLayoutInput element to specify the borders to place the children. This process is subtractive: after a child has been placed, any remaining space is available to the next child, and so forth. In the example below, notice that the center-right position changes when additional child elements are added.

An example of a Dock layout.

<ColorFill Content="MidnightBlue" Layout="Dock" >
  <Children>

    <Text Name="One" Color="White" Content="Far+Top" >
      <LayoutInput>
        <DockLayoutInput Alignment="Far" Position="Top" />
      </LayoutInput>
    </Text>

    <Text Name="Two" Color="Red" Content="Near+Bottom" >
      <LayoutInput>
        <DockLayoutInput Alignment="Near" Position="Bottom"  />
      </LayoutInput>
    </Text>

    <Text Name="Three" Color="Yellow" Content="Center+Right" >
      <LayoutInput>
        <DockLayoutInput Alignment="Center" Position="Right"  />
      </LayoutInput>
    </Text>

    <Text Name="Four" Color="DarkGoldenrod" Content="Another Center+Right" >
      <LayoutInput>
        <DockLayoutInput Alignment="Center" Position="Right"  />
      </LayoutInput>
    </Text>

  </Children>
</ColorFill>

Sample Explorer

  • Layout > Border

See Also