Using DockPanel in WP7

by WindowsPhoneGeek

In this article am going to talk about how to use the DockPanel from the Silverlight Toolkit  in Windows Phone 7.  Recently we received a lot of questions related to DockPanel so in this tutorial I am going to answer some of them.

At first let me mention that DockPanel is not something new for all Silverlight developers because it is a part from the Silverlight Toolkit (NOTE: Silverlight for WP7 Toolkit is something different). Having in mind that Windows Phone 7 is based on Silverlight 3+  it is easy to reuse some pieces of the toolkit code or even the whole code.

Using DockPanel  in Windows Phone 7

We have copied the code from the Silverlight Toolkit  DockPanel and modified it little to work in Windows Phone 7. So you can use the attached WP7DockPanel.dll assembly at the end of this post.

DockPanel is a layout panel, that provides an easy docking of elements to the left, right, top and  bottom of the panel. Basically it arranges child elements around the edges of the panel.  Optionally, last added child element can occupy the remaining space. The panel exposes the following properties:

• LastChildFill - This is a dependency property that gets or sets a value indicating whether the last child element added to the DockPanel  resizes to fill the remaining space.
• Dock - This is an attached property  that determines the dock side of the element. It can be set to one of the following values:Dock.Top, Dock.Bottom, Dock.Left and Dock.Right.

You can use the newly created WP7 DockPanel in this way:

1. Create a sample Windows Phone 7 application project and add reference to WP7DockPanel.dll  (NOTE: You can find the assembly attached at the end of this article and the full source code of the DockPanel as well!)

2. Include the following namespane in MainPage.xaml:

xmlns:panel="clr-namespace:WP7DockPanel;assembly=WP7DockPanel"
3.Add the following code into your page to start using the DockPanel:

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
    <panel:DockPanel>
        <Button  Content="Bottom" panel:DockPanel.Dock="Bottom"/>
        <Button  Content="Top" panel:DockPanel.Dock="Top"/>
        <Button  Content="Middle" />
        <Button  Content="Right"  panel:DockPanel.Dock="Right"/>
        <Button  Content="Left"  panel:DockPanel.Dock="Left"/>
    </panel:DockPanel>
</Grid>

Here is how the final result should looks like:

How to define DockPanel programmatically

You can define the DockPanel in code behind as well:

DockPanel panel = new DockPanel();

Button btn1 = new Button() { Content = "Bottom" };
btn1.SetValue(DockPanel.DockProperty, Dock.Bottom);

Button btn2 = new Button() { Content = "Top"};
btn2.SetValue(DockPanel.DockProperty, Dock.Top);

Button btn3 = new Button() { Content = "Right" };
btn3.SetValue(DockPanel.DockProperty, Dock.Right);

Button btn4 = new Button() { Content = "Left" };
btn4.SetValue(DockPanel.DockProperty, Dock.Left);

panel.Children.Add(btn1);
panel.Children.Add(btn2);
panel.Children.Add(btn3);
panel.Children.Add(btn4);
this.ContentPanel.Children.Add(panel);

NOTE: However if you decide to port the code on your own you can do this in the following way:

• 1. Download the Silverlight Toolkit source code .
• 2. Go to Controls.Toolkit project
• 3. There you will find a class called DockPanel.cs
• 4. Do not forget to copy the Dock enum

That was all about how to use DockPanel  in Windows Phone 7 application. You can find the full source code (WP7DockPanel class library project and the sample test project) as well as the WP7DockPanel.dll  here:

I hope that the article was helpful.

You can also follow us on Twitter @winphonegeek

Comments

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<panel:DockPanel>
	<Button  Content="Bottom" panel:DockPanel.Dock="Bottom"/>
	<Button  Content="Top" panel:DockPanel.Dock="Top"/>
	<Button  Content="Right"  panel:DockPanel.Dock="Right"/>
	<Button  Content="Left"  panel:DockPanel.Dock="Left"/>
	<Button  Content="Middle" />
</panel:DockPanel>