Customizing XamDockManager's Floating Panes

John Doe / Tuesday, November 10, 2009

Many have asked the question - "What do I need to customize the Floating pane and specifically how to remove the border?". There are two main things you need to do to achieve that:

1. Set the UseOSNonClientArea property of the ToolWindow to false.

You can do that in the ToolWindowLoaded event of the XamDockManager like this:

 void OnToolWindowLoaded(object sender, Infragistics.Windows.DockManager.Events.PaneToolWindowEventArgs e)

        {

            PaneToolWindow window = e.Window; 

            window.UseOSNonClientArea = false;

        }

2. Create a new Template for the ToolWindow and set it.

Custom borderless control template for the ToolWindow:

                             <ControlTemplate TargetType="{x:Type igDock:PaneToolWindow}">

                                <Border Background="{TemplateBinding Background}"

                                        BorderBrush="{TemplateBinding BorderBrush}"

                                        BorderThickness="{TemplateBinding BorderThickness}">

                                    <Grid>

                                        <Grid.RowDefinitions>

                                            <RowDefinition Height="Auto" />

                                            <RowDefinition/>

                                        </Grid.RowDefinitions>

                                       <DockPanel Grid.Row="0" >

                                            <ContentPresenter Content="{TemplateBinding Title}" />

                                        </DockPanel>

                                        <ContentPresenter Content="{TemplateBinding Content}" Grid.Row="1"/>

                                    </Grid>

                                </Border>

                            </ControlTemplate>

3. Drag-Move & Docking functionalities:

As we have completely retemplated the ToolWindow, these functionalities will be lost. You can write your own implementations for them. In the attachment section of this blog post you can find a sample project with very simple ways of doing so.

CustomizableFloatingPane.zip