Dockpanel in Silverlight

What is Dockpanel ?

Dockpanel is a layout control same like Grid, Canvas and Stackpanel, but more powerful then them. The idea behind the DockPanel is that – one can “dock” its child controls in all of the four directions – top,bottom,left and right ( compared to stackpanel, which allows only two directions – top->bottom and left->right ).

You get the dockpanel when you load and install the Silverlight Toolkit.

Some basic Guidlines -

• You can align child controls to top, bottom, left or right. Default is to left.
• The child control takes place that is left after placing the previous child controls.
• You can fill the rest of the space with the last child control. Dockpanel does this by default.

How to Implement DockPanel ?

As stated above, to make us of DockPanel, you must download the silverlight Toolkit and add the reference

Microsoft.Windows.Controls.dll

Or, simply drag and drop the dockpanel from the toolbox on the design surface in Expression Blend or Xaml code in Visual Studio.

Adding Controls in DockPanel

To add the control to dockpanel, we must put the elements inside the tag of dockpanel.

By default it would be aligned left, as stated above.

<controlsToolkit:DockPanel Background="LightGray" LastChildFill="False">
 <Rectangle Height="300" Width="100" VerticalAlignment="Stretch" 
     Fill="BlueViolet" RadiusX="15" RadiusY="15"/>
 </controlsToolkit:DockPanel>

Output -

same way if you want to align the rectangle control to the other three directions like – top , right and bottom. You can do it in this way -

<controlsToolkit:DockPanel Background="LightGray" LastChildFill="False">
 <Rectangle controlsToolkit:DockPanel.Dock="Top" Height="50" 
   VerticalAlignment="Stretch" Fill="BlueViolet" 
    RadiusX="15" RadiusY="15"/>
 </controlsToolkit:DockPanel>

Filling rest of the place ( empty place)

The DockPanel allows you to fill the place that’s left with the last child control. This is done by the  “LastChildFill” property.

<controlsToolkit:DockPanel Background="LightGray" LastChildFill="True">
 <Rectangle controlsToolkit:DockPanel.Dock="Top" Height="50" 
            Fill="BlueViolet" RadiusX="15" RadiusY="15"/>
 <Rectangle controlsToolkit:DockPanel.Dock="Top" 
            Fill="Black" RadiusX="15" RadiusY="15" Height="40"/>
 <Rectangle controlsToolkit:DockPanel.Dock="Top" Fill="Green" />
 </controlsToolkit:DockPanel>


<toolkit:DockPanel Background="Gray" LastChildFill="False">
    <Rectangle toolkit:DockPanel.Dock="Top"
               Fill="Red" Height="50"
               HorizontalAlignment="Stretch" />
    <Rectangle toolkit:DockPanel.Dock="Left" 
               Fill="Red" VerticalAlignment="Stretch"
               Width="50" />
    <Rectangle toolkit:DockPanel.Dock="Bottom" 
               Fill="Red" Height="50" 
               HorizontalAlignment="Stretch"/>
    <Rectangle toolkit:DockPanel.Dock="Right" 
               Fill="Red" VerticalAlignment="Stretch" 
               Width="50"/>
    <Rectangle toolkit:DockPanel.Dock="Top" 
               Fill="Red" Height="50" 
               HorizontalAlignment="Stretch"/>
    <Rectangle toolkit:DockPanel.Dock="Left" 
               Fill="Red" VerticalAlignment="Stretch" 
               Width="50" />
    <Rectangle toolkit:DockPanel.Dock="Bottom" 
               Fill="Red" Height="50" 
               HorizontalAlignment="Stretch" />
    <Rectangle toolkit:DockPanel.Dock="Right" 
               Fill="Red" VerticalAlignment="Stretch" 
               Width="50" />
    <Rectangle toolkit:DockPanel.Dock="Top" 
               Fill="Red" Height="50" 
               HorizontalAlignment="Stretch"/>
</toolkit:DockPanel>
OUTPUT :
This thing you cant develop using Grid or stackpanel.