Category / Section
How to customize WPF DockingManager as flatlayout control by disabling docking functionalities?
4 mins read
This article describes about how to customize the WPF DockingManager control as Flat Layout control by disabling the docking functionalities such as Drag and Drop, Resizing the child elements, Hiding the dock panel options and floating the dock windows etc.
Controlling DockingManager Functionalities:
- AutoHide functionality of the DockingManager can be disabled by setting “AutoHideVisibility” property of DockingManager as false.
- Creation of New Tabbed group can be restricted by setting “TabGroupEnabled” property of DockingManager as false.
- Creation of Float window has been disabled by setting the “SetCanFloat” attached property of DockingManager as false. To restrict this behavior for all docking child, this property has been set for each child of DockingManager.
- Closing functionality of Dock window can be controlled by CanClose property of DockingManager. When CanClose property is set to False, it will not display the close button in the header of the window.
- Resizing behavior of the windows are restricted by setting CanResizeWidthInDockedState and CanResizeHeightInDockedState properties.
Arrangement of child of the DockingManager control:
WPF DockingManager children can be docked at any side of the DockingManager using the “SideInDockedMode” property of DockingManager. Since its default value is left, by default all the children docked at left side of the DockingManager. Also docking windows can be docked at any side of the Target Dock Window using “TargetNameInDockedMode” property. Please find more details about the property TargetNameInDockedMode from below link,
UG link: https://help.syncfusion.com/wpf/docking/docking-window#docking-window-in-various-targets
Layout of DockingManager will be changed depending on the order, in which we are adding the children. If we add the new window at Top of DockingManager when we already have window on Left side, newly added window will occupy the whole space at the Top.
Size of the DockWindow:
Desired height and width of the Dock windows can be set through the Attached property “DesiredWidthInDockedMode” and “DesiredHeightInDockedMode” of DockingManager with the desired values.
EnableFlatLayout:
Instead of disabling whole DockingManager functionalities by changing the properties of each child of DockingManager, it can be easily disabled or enabled using a single AttachedProperty(“EnableFlatLayout”) of DockingLayout class as like code examples provided below.
XAML:
<Grid> <syncfusion:DockingManager UseDocumentContainer="True" local:DockingLayout.EnableFlatLayout="True" > <ContentControl syncfusion:DockingManager.Header="Essential WPF" syncfusion:DockingManager.SideInDockedMode="Top" syncfusion:DockingManager.DesiredHeightInDockedMode="150"> <TextBlock FontSize="15" FontFamily="Calibri" TextWrapping="Wrap"> Essential WPF is a comprehensive collection of over 100+ enterprise-grade WPF components for building modern Desktop applications. It includes all the UI controls that are typically required for building line-of-business (LOB) applications including Tools, Charts, Grids, Gantt, Scheduler, Diagram and much more </TextBlock> </ContentControl> <ContentControl syncfusion:DockingManager.Header="WPF DockingManager" syncfusion:DockingManager.SideInDockedMode="Bottom" syncfusion:DockingManager.DesiredHeightInDockedMode="200"> <TextBlock FontSize="15" FontFamily="Calibri" TextWrapping="Wrap"> The Docking Manager follows an architecture that allows controls to be docked to any part of the window. It has been broadly designed based on docking features present in Visual Studio 2005. The Docking Manager works on top of all the controls placed inside its tree. It handles the window layout for the user automatically and places controls. Like the DockPanel control , It also uses attached properties to set the controls as docked controls or docked windows. The docked windows can be placed as a group of logically related docked controls. The templates AwlButtonTemplate, MenuButtonTemplate and CloseButtonTemplate are the custom templates applied to the buttons. The HeaderTemplate is applied to the header of the dockingmanager. </TextBlock> </ContentControl> <ContentControl syncfusion:DockingManager.Header="Details" syncfusion:DockingManager.SideInDockedMode="Left" syncfusion:DockingManager.DesiredWidthInDockedMode="300"> <TextBlock FontSize="15" FontFamily="Calibri" TextWrapping="Wrap"> FlatLayout control can be desinged using the DockingManager control. To achieve this, we have to disable the docking manager functionalities such as drag & drop and AutoHidden. </TextBlock> </ContentControl> <ContentControl syncfusion:DockingManager.Header="Docking Manager Features" syncfusion:DockingManager.State="Document"> <Grid> <FlowDocumentScrollViewer HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto"> <FlowDocument FontFamily="Calibri" FontSize="14.5" > <Paragraph FontSize="24" FontFamily="Cambria" FontWeight="Bold"> Features of DockingManager. </Paragraph> <Paragraph> By default, DockingManager's child can be dockable at any side also the child element can be draggable. In this sample these functiolaities are disabled to provide flatlayout control. </Paragraph> </FlowDocument> </FlowDocumentScrollViewer> </Grid> </ContentControl> <ContentControl syncfusion:DockingManager.Header="Document Container Features" syncfusion:DockingManager.State="Document"> <Grid> <FlowDocumentScrollViewer HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto"> <FlowDocument FontFamily="Calibri" FontSize="14.5" > <Paragraph FontSize="24" FontFamily="Cambria" FontWeight="Bold"> Features of DocumentContainer in DockingManager. </Paragraph> <Paragraph> Using the TabItemContextMenu user can easily create the Horizontal and Vertical Gropping of TabItems which gives a layout similar to the VS2008 IDE experience but in this sample this functionality has been disabled to provide the FlatLayout control. </Paragraph> </FlowDocument> </FlowDocumentScrollViewer> </Grid> </ContentControl> </syncfusion:DockingManager> </Grid>
DockingLayout.cs:
public class DockingLayout : DependencyObject
{
public static bool GetEnableFlatLayout(DependencyObject obj)
{
return (bool)obj.GetValue(EnableFlatLayoutProperty);
}
public static void SetEnableFlatLayout(DependencyObject obj, bool value)
{
obj.SetValue(EnableFlatLayoutProperty, value);
}
// Using a DependencyProperty as the backing store for EnableFlatLayout. This enables animation, styling, binding, etc...
public static readonly DependencyProperty EnableFlatLayoutProperty = DependencyProperty.RegisterAttached("EnableFlatLayout", typeof(bool), typeof(DockingLayout), new PropertyMetadata(false,OnEnableLayoutChanged));
private static void OnEnableLayoutChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
{
var docking = d as DockingManager;
if (docking != null)
{
if ((bool)e.NewValue)
{
docking.AutoHideVisibility = false;
docking.IsContextMenuButtonVisible = false;
docking.CollapseDefaultContextMenuItems = true;
docking.IsContextMenuVisible = false;
docking.TabGroupEnabled = false;
docking.ShowTabItemContextMenu = false;
docking.ShowTabListContextMenu = false;
docking.DocumentCloseButtonType = CloseButtonType.Hide;
docking.Loaded += (args, s) =>
{
if (GetEnableFlatLayout(docking))
{
foreach (var child in docking.Children)
{
var depChild = child as DependencyObject;
if (depChild != null)
{
DockingManager.SetCanClose(depChild, false);
DockingManager.SetCanFloat(depChild, false);
if (DockingManager.GetSideInDockedMode(depChild) == DockSide.Bottom ||
DockingManager.GetSideInDockedMode(depChild) == DockSide.Top)
{
DockingManager.SetCanResizeHeightInDockedState(depChild, false);
}
else if (DockingManager.GetSideInDockedMode(depChild) == DockSide.Right ||
DockingManager.GetSideInDockedMode(depChild) == DockSide.Left)
{
DockingManager.SetCanResizeWidthInDockedState(depChild, false);
}
}
}
}
};
}
else
{
docking.AutoHideVisibility = true;
docking.IsContextMenuButtonVisible = true;
docking.CollapseDefaultContextMenuItems = false;
docking.IsContextMenuVisible = true;
docking.TabGroupEnabled = true;
docking.ShowTabItemContextMenu = true;
docking.ShowTabListContextMenu = true;
docking.DocumentCloseButtonType = CloseButtonType.Common;
foreach (var child in docking.Children)
{
var depChild = child as DependencyObject;
if (depChild != null)
{
DockingManager.SetCanClose(depChild, true);
DockingManager.SetCanFloat(depChild, true);
if (DockingManager.GetSideInDockedMode(depChild) == DockSide.Bottom ||
DockingManager.GetSideInDockedMode(depChild) == DockSide.Top)
{
DockingManager.SetCanResizeHeightInDockedState(depChild, true);
}
else if (DockingManager.GetSideInDockedMode(depChild) == DockSide.Right ||
DockingManager.GetSideInDockedMode(depChild) == DockSide.Left)
{
DockingManager.SetCanResizeWidthInDockedState(depChild, true);
}
}
}
}
}
}
}
