WPF: Dockable Panel


Update: Please have a look at AvalonDock, it’s fantastic! If you are still interested in my miserably failed attempt, continue reading 🙂

I’ve always liked the Visual Studio IDE user interface, with the panels that you can dock to the left, right or bottom. I’ve been trying to create something similar in WPF, and it turns out to be a VERY non-trivial task, perhaps it also has something to do with the limited knowledge I have with WPF.

Infragistics has always been creating very awesome controls in the .NET platform, and they have created something like the Visual Studio docking effect called xamDockManager. I’ve been trying for some days now to create a one, got frustrated many times, but in the end I managed to create a semi-working control, a DockablePanel I call it.

DockablePanel

To use this control, here’s the xaml.

<dp:DockablePanel Margin="3">
  <dp:DockablePanel.DockPanelCollection>
    <dp:ChildPanel StripTitle="Left Dock" Dock="Left">
      <dp:ChildPanel.ChildPanelContent>
        <TextBlock Text="Left Content" Background="Red" Height="900" Width="900" />
      </dp:ChildPanel.ChildPanelContent>
    </dp:ChildPanel>
    <dp:ChildPanel StripTitle="Right Dock" Dock="Right">
      <dp:ChildPanel.ChildPanelContent>
        <TextBlock Text="Right Content" Background="LightBlue" Height="900" Width="200" />
      </dp:ChildPanel.ChildPanelContent>
    </dp:ChildPanel>
    <dp:ChildPanel StripTitle="Bottom Dock" Dock="Bottom">
      <dp:ChildPanel.ChildPanelContent>
        <TextBlock Text="Bottom Content" Background="LightGreen" Height="200" Width="900" />
      </dp:ChildPanel.ChildPanelContent>
    </dp:ChildPanel>
    <dp:ChildPanel StripTitle="Top Dock" Dock="Top">
      <dp:ChildPanel.ChildPanelContent>
        <TextBlock Text="Top Content" Background="Orange" Height="200" Width="900" />
      </dp:ChildPanel.ChildPanelContent>
    </dp:ChildPanel>
  </dp:DockablePanel.DockPanelCollection>
  <dp:DockablePanel.CenterContent>
    <TextBlock Text="Center Content" Background="Yellow"  />
  </dp:DockablePanel.CenterContent>
</dp:DockablePanel>

Things on my list to make this control better:

  • Resizable columns/rows
  • Ability to drag and drop into different region
  • Ability to display more than 1 item in each region

This implementation is quite limited and not very usable, but I thought I just share it. Hopefully I will get some more time and energy to come up with a better version of this.

Download source code here.

Share this post:
Advertisements
Posted in WPF. 2 Comments »

2 Responses to “WPF: Dockable Panel”


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 )

Twitter picture

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

Facebook photo

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

Google+ photo

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

Connecting to %s

%d bloggers like this: