Use scroll panels, group boxes and floating windows

This guide covers three containers. MxScrollPanel and MxFloatingWindow are in the Mordex.Windows.UI.Docking namespace. MxGroupBox is in the Mordex.Windows.UI.Controls namespace.

Scroll content with buttons

MxScrollPanel holds one child control that can be larger than the panel. It shows scroll buttons. Each click moves the child by a fixed step.

Set the child with ChildControl. The panel adds the control to itself.

using System.Drawing;
using System.Windows.Forms;
using Mordex.Windows.UI.Docking;

MxScrollPanel scroll = new MxScrollPanel { Dock = DockStyle.Fill };

Panel tall = new Panel { Size = new Size(380, 900) };
for (int i = 0; i < 24; i++)
{
    tall.Controls.Add(new Label
    {
        Text = "Line " + (i + 1),
        Size = new Size(360, 24),
        Location = new Point(10, 10 + i * 36)
    });
}

scroll.ChildControl = tall;
Controls.Add(scroll);

The panel sets Dock of the child to DockStyle.None. Give the child a fixed size instead.

Set the scroll direction

ScrollMode sets the direction. It is Vertical by default.

scroll.ScrollMode = ScrollMode.Both;

Change the step and the buttons

• ScrollStep. The number of pixels that one click moves the child.
• ScrollButtonSize. The size of the scroll buttons.

The Scroll event fires when the content moves.

Frame related fields with a group box

MxGroupBox draws a frame and a caption around a set of controls. Set the caption with Text. Add controls to it as to any container.

using System.Windows.Forms;
using Mordex.Windows.UI.Controls;

MxGroupBox account = new MxGroupBox { Text = "Account", Dock = DockStyle.Fill };
account.Controls.Add(new MxCheckBox { Text = "Send e-mail notifications", Dock = DockStyle.Top });
Controls.Add(account);

FrameStyle sets the frame.

These properties change the caption and the background:

• Image, Icon, ImageList, ImageIndex and ImageKey. Show a picture next to the caption. ImageSize sets its size.
• TextOffset. Sets the distance from the edge to the start of the caption.
• BackgroundStyle. Sets the background style, for example Panel or TabPage.

Float a dock panel in its own window

An MxFloatingWindow is the window that holds a floating dock panel. You do not create it yourself. The dock manager creates it when a panel floats.

A panel floats when the user drags it away from the edge, or when you call UndockPanel().

using System.Drawing;
using Mordex.Windows.UI.Docking;

notes.FloatingSize = new Size(260, 320);
notes.FloatingLocation = new Point(200, 150);

if (notes.DockState == PanelDockState.Docked)
{
    notes.UndockPanel();
}

FloatingSize and FloatingLocation set the size and the place of the window. When the panel already floats, the window moves or resizes at once. Call DockPanel() to dock the panel again.

Find the window of a panel

The FloatingWindow property of a panel returns its MxFloatingWindow. It is null while the panel is docked. The Panel property of the window goes the other way.

dockManager.PanelDockStateChanged += (s, e) =>
{
    MxFloatingWindow window = e.Panel.FloatingWindow;
    stateLabel.Text = window == null
        ? e.Panel.Text + " is docked"
        : e.Panel.Text + " floats at " + window.Location.X + ", " + window.Location.Y;
};

FloatingPanels on the dock manager returns all panels that float now. DockedPanels returns the docked ones.

Choose what a double click does

By default, a double click on the caption of a panel switches it between docked and floating. Set CaptionDoubleClickAction on a panel to change this.

• ToggleDockState. A double click docks or floats the panel.
• None. A double click does nothing.
• Default. The panel uses DefaultPanelSettings.CaptionDoubleClickAction of the dock manager.

The setup of the dock manager is in Build a docking layout with dock panels.