#401 – DockPanel Element

October 5, 2011 2 Comments

The DockPanel element serves as a container for a collection of child elements, positioning its children by docking them to one of the sides of the container.  For each of the child elements, you specify a value for the DockPanel.Dock property, which can have one of the following values: Left, Top, Right or Bottom.

The location of each child is calculated one at a time, based on their order.  Each child is docked to one of the sides and stretched to fill the available space.  At each step, the docking/sizing happens within the remaining open space in the DockPanel.

    <DockPanel>
        <Label Content="1st label (Top)" DockPanel.Dock="Top" Background="Bisque"/>
        <Label Content="2nd (Left)" DockPanel.Dock="Left" Background="BurlyWood"/>
        <Label Content="3rd (Top)" DockPanel.Dock="Top" Background="Cornsilk"/>
        <Label Content="4th (Right)" DockPanel.Dock="Right" Background="DarkKhaki"/>
        <Label Content="5th (Bottom)" DockPanel.Dock="Bottom" Background="DarkSeaGreen"/>
        <Label Content="6th (Left)" DockPanel.Dock="Left" Background="Gainsboro"/>
        <Label Content="7th, fills remaining space" Background="Khaki"/>
    </DockPanel>

Resizing:

Filed under Layout Tagged with , ,