Create Blend like UIs using DOCKY

Docky is a new control for AvalonControlsLibrary. Docky is the codename for this control, the actual name for this control is DockableContainer. Basically Docky is a control that lets you add panels that can be dockable. By Dockable I mean that you can specify where the child panel (control) needs to be docked. If you un dock one of the panels then the panel can be dragged any where on screen (within the working area)


Using Docky is very similar as using a dockpanel. Like a DockPanel, Docky has an attached property called Dock which you can use to specifiy where you want your panel to be docked. If you do not specify this property Docky will dock your control in the middle ( this is a behavior like Fill). An example for using the Dock property is

< Grid local:DockableContianer.Dock=”Left” ……

Another important thing to know about Docky is how you can make your control be able to Dock and UnDock. Basically there is a command called ToggleDockChild that you can use to Dock and undock your control. This command needs a Parameter which is a reference to the control that is docked. So for example if the panel that is docked is a grid and inside it I have a button that dock and undocks the grid, I would have to pass the instance of the grid as parameter. Let me give an example

<Button Command=”{local:DockableContainer.ToggleDockChild}” CommandParameter=”{Binding RealtiveSource={RelativeSource AncestorType={x;Type Grid}} }”/>

The last thing that one has to do in order to use this control is set the ElementForDragging attached property. This property is used to let the DockableContainer know which control will be used to drag the panel when it is UnDocked. The value of this property should be set as the Panel to drag. You can put this property in any child element of the element being docked because the Docky will analyze the ViusalTree of children of the docked element and check which child has this property set. This is a useful feature for when you need to be able to drag the panel from the Middle part or bottom etc… Again I will give an example

<Button Command=”{local:DockableContainer.ToggleDockChild}” CommandParameter=”{Binding RealtiveSource={RelativeSource AncestorType={x;Type Grid}} }”/>

<Border local:DockableContainer.ElementForDragging=”{Binding RealtiveSource={RelativeSource AncestorType={x;Type Grid}} }“/>

So here what we are saying is that the surface where the user can grab to drag the panel is the Border.

Ok so there is some work to do in order to use this control, so I decided to create a control that handles all this stuff for you. The control is called DockableControl and it inherites from HeaderedContentControl. This control handles all attached properties and commands for the DockableContainer so all you have to do, is to feed the Header and the Content and all the other stuff is catered for.

I created a Demo Project for this control so that you do not need to download AvalonControlsLibrary (well in actual fact I didn’t commit the changes to codeplex yet since I am still doing some refactoring πŸ™‚ ). Download the code for this control and see how it works to get a better idea of how one can use this control…..

If you have any problems, questions or bugs feel free to send me an email at or post a comment to this post πŸ™‚

Hope you like it …



8 thoughts on “Create Blend like UIs using DOCKY

  1. Hello, i’m trying to use your example, but get folowing errors:
    Error 13 ‘XSoftArt.WPFengine.FrameworkElement’ does not contain a definition for ‘IsLoaded’ and no extension method ‘IsLoaded’ accepting a first argument of type ‘XSoftArt.WPFengine.FrameworkElement’ could be found (are you missing a using directive or an assembly reference?) D:\!_Projects\Teleric_EmptyProject WPF\XSoftArt.WPFengine\XSoftArt.WPFengine\DockableContainer.cs 411 31 XSoftArt.WPFengine

    What should i do, to correct this.

  2. I am running this control in VS 2010, its running fine but it is giving a ActionNotSupported Exception and not letting designer window to open. Can you please look into it and suggest what to do. Its important.. Also can i use any other UIElement including custom UIElement to dock using it?


Leave a Reply

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

You are commenting using your 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 )

Connecting to %s