Saturday, June 5, 2010

WPF DockingManager :- AvalonDock

Some days ago , I was in need of a docking panel for a WPF project. I needed the collapse and expand functionality , floating windows etc . I was familiar with the DockingManager component from DevExpress for Win forms and wanted same type of functionality for my WPF project. So while searching I came across a open source initiative AvalonDock on CodePlex, it was quite the thing that I wanted.
I implemented the DockingManager of AvalonDock and got my Window working with several floating and dockable windows.

After making my main window have many dockable and floating windows , I needed another functionality , that was to make visibility off for close buttton on Dockablepane , apart from that I also wanted to style the Documentpane and Dockablepane . To make the close button visibility off for Dockablepane and Documentpane, there's the property IsCloseable on DocumentContent and DockableContent.

Using this property we can change the close button's visibility. To disable the floating of windows in DocumentPane , there is another property IsFloatingAllowed on DocumentContent . But there is no property to disable the floating of DockablePane yet. To style the DocumentPane and DockablePane I relied upon the Expression Blend. After opening my project in Expression blend , I navigated to the DockablePane and DocumentPane in Visual Tree and used the option "Edit Copy of Template". This option make's the default style of DocumentPane and DockablePane available to us, Now you are free to edit the style as you like. The default style contains the Control template for both DockablePane and DocumentPane in their respective styles. We can edit them to get our desired look .

But there is one issue , after we save our project in Expression Blend with edited styles, it seems that Expression Blend removes the command binding from the style of DockablePane for Close Button and AutoHide Button. So if we run the application you will notice that close and autohide button on DocakblePane no longer works. The solution is to reintroduce the command binding for close and autohide button by specifying Command="ad:DockablePane.ToggleAutoHideCommand" and Command="ad:DockablePane.CloseCommand" in the respective xaml Button tags.


<ad:DockingManager x:Name="dockManager" RenderTransformOrigin="0,0">
<ad:ResizingPanel Orientation="Vertical" >
<ad:ResizingPanel Orientation="Horizontal" >
<ad:DockablePane
x:Name="story" Style="{DynamicResource DockablePaneStyleMosaic}">
<ad:DockableContent StateChanged="Live_StateChanged"
IsCloseable="False" DockableStyle="DockableToBorders" Title="Live">
</ad:DockableContent>
</ad:DockablePane>

<ad:DocumentPane Style="{DynamicResource DocumentPaneStyleMosaic}" >
<ad:DocumentContent Title="Recorded"
IsFloatingAllowed="False" IsCloseable="False">
</ad:DocumentContent>
</ad:DocumentPane>

<ad:DockablePane Style="{DynamicResource DockablePaneStyleMosaic}">
<ad:DockableContent
StateChanged="Live_StateChanged"
DockableStyle="DockableToBorders" IsCloseable="False" Title="Reports">
</ad:DockableContent>
</ad:DockablePane>

</ad:ResizingPanel>
</ad:ResizingPanel>
</ad:DockingManager>



.
There is another catch , all the edited style that we have applied on DockablePane gets removed once the DockablePane is in floating state . So once the DockablePane is dragged in floating state , all the style is lost. To get around this problem we can use StateChanged event fired by the DockablePane whenever the state is changed from Docked to floating and vice-versa.



private void Live_StateChanged(object sender,
AvalonDock.DockableContentState state)
{
try
{

AvalonDock.DockableContent panel =
sender as AvalonDock.DockableContent;

if(state == AvalonDock.DockableContentState.Docked )
{
(panel.Parent as AvalonDock.DockablePane).Style =
this.FindResource("DockablePaneStyleMosaic") as Style;

}

//Floating
if (state == AvalonDock.DockableContentState.DockableWindow )
{
(panel.Parent as AvalonDock.DockablePane).Style =
this.FindResource("DockablePaneStyleMosaic") as Style;
}
}
catch (Exception ex)
{
LogWriter.WriteLog("", ex);
}
}




As long as Avalon dock fulfills the requirement of my project , I am going to stick with it.
http://avalondock.codeplex.com/