#401 – DockPanel Element

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:

Advertisements

About Sean
Software developer in the Twin Cities area, passionate about software development and sailing.

2 Responses to #401 – DockPanel Element

  1. Pingback: Dew Drop – October 5, 2011 | Alvin Ashcraft's Morning Dew

  2. Pingback: #577 – You Can Change DockPanel.Dock Property at Runtime « 2,000 Things You Should Know About WPF

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

w

Connecting to %s

%d bloggers like this: