User Interface for .NET / User's Guide / Docking Panels / Tutorials / Docking Framework

Docking Framework

The following tutorial will teach you how to create a simple docking framework from code:

  1. Open Visual Studio, select File->New->Project... command and create a new Windows Application Project.
  2. Add references to "Nevron.System.dll", "Nevron.Presentation.dll" and "Nevron.UI.WinForm.Docking.dll" assemblies.
  3. Open the Form1.cs in the code editor.
  4. Add the following "using" statements:
    C#
    Copy Code
    using Nevron.UI.WinForm.Controls;
    using Nevron.UI.WinForm.Docking;
    
    Visual Basic
    Copy Code
    Imports Nevron.UI.WinForm.Controls
    Imports Nevron.UI.WinForm.Docking
    
  5. Add a private field of type NDockManager:
    C#
    Copy Code
    private NDockManager dockManager;
    
    Visual Basic
    Copy Code
    Private dockManager As NDockManager 
    
  6. Create the dock manager and customize its properties:
    C#
    Copy Code
    protected virtual void CreateDockManager()
    {
        dockManager = new NDockManager();
        dockManager.Form = this;
        dockManager.Palette.Scheme = ColorScheme.LunaBlue;
    }
    
    Visual Basic
    Copy Code
    Protected Overridable Sub CreateDockManager()
        dockManager = New NDockManager()
        dockManager.Form = Me
        dockManager.Palette.Scheme = ColorScheme.LunaBlue
    End Sub
    
  7. Create a simple layout:
    C#
    Copy Code
    protected virtual void CreateSimpleLayout()
    {
        NDockingPanel panel;
        INDockZone root = dockManager.RootContainer.RootZone;
        INDockZone target;
    
        //add panel on the left side of the root
        panel = new NDockingPanel();
        panel.SizeInfo.PreferredSize = new Size(100, 200);
        panel.PerformDock(root, DockStyle.Left);
    
        //add panel on the right side of the root
        panel = new NDockingPanel();
        panel.SizeInfo.PreferredSize = new Size(100, 200);
        panel.PerformDock(root, DockStyle.Right);
    
        //get the parent zone of the panel and add one at the bottom of it
        target = panel.ParentZone;
        panel = new NDockingPanel();
        panel.PerformDock(target, DockStyle.Bottom);
    
        //add panel at the bottom of the root
        panel = new NDockingPanel();
        panel.SizeInfo.PreferredSize = new Size(150, 100);
        panel.PerformDock(root, DockStyle.Bottom);
    
        //add panel at the top of the root
        panel = new NDockingPanel();
        panel.SizeInfo.PreferredSize = new Size(150, 100);
        panel.PerformDock(root, DockStyle.Top);
    
        //add child panel to the last one
        target = panel.ParentZone;
        panel = new NDockingPanel();
        panel.PerformDock(target, DockStyle.Fill);
    }
    
    Visual Basic
    Copy Code
    Protected Overridable Sub CreateSimpleLayout()
        Dim panel As NDockingPanel
        Dim root As INDockZone = dockManager.RootContainer.RootZone
        Dim target As INDockZone 
    
        'add panel on the left side of the root
        panel = New NDockingPanel()
        panel.SizeInfo.PreferredSize = New Size(100, 200)
        panel.PerformDock(root, DockStyle.Left)
    
        'add panel on the right side of the root
        panel = New NDockingPanel()
        panel.SizeInfo.PreferredSize = New Size(100, 200)
        panel.PerformDock(root, DockStyle.Right)
    
        'get the parent zone of the panel and add one at the bottom of it
        target = panel.ParentZone
        panel = new NDockingPanel()
        panel.PerformDock(target, DockStyle.Bottom)
    
        'add panel at the bottom of the root
        panel = New NDockingPanel()
        panel.SizeInfo.PreferredSize = New Size(150, 100)
        panel.PerformDock(root, DockStyle.Bottom)
    
        'add panel at the top of the root
        panel = New NDockingPanel()
        panel.SizeInfo.PreferredSize = New Size(150, 100)
        panel.PerformDock(root, DockStyle.Top)
    
        'add child panel to the last one
        target = panel.ParentZone
        panel = New NDockingPanel()
        panel.PerformDock(target, DockStyle.Fill)
    End Sub
    
  8. Put the above methods in the Form's constructor:
    C#
    Copy Code
    public Form1()
    {
            //
            // Required for Windows Form Designer support
            //
            InitializeComponent();
            
            CreateDockManager();
            CreateSimpleLayout();
    }
    

    Visual Basic
    Copy Code
    Public Sub New()
            '
            ' Required for Windows Form Designer support
            '
            InitializeComponent()
            
            CreateDockManager()
            CreateSimpleLayout()
    End Sub
    
  9. Compile and run the application. You should see the following: