Explorer Bar

What it is for

Use the bar where an application wants a side pane of related groups – "File and Folder Tasks", "Other Places", "Details" – each of which the user can open and close with a click on its title. The bar stacks the groups one under the other, scrolls when they do not fit, and animates them as they open and close.

Key concepts

• Panels. Each group is a BinaryExplorerBarPanel: a real, scrolling container for your own controls. Add panels through Panels; the bar places them, one under another, in the order of the collection. Controls added directly to the bar rather than to a panel are removed when it next lays itself out.
• Titles. The title bar above each panel is drawn by the bar, not by the panel. Clicking it expands or collapses that panel alone, after BinaryExplorerBarPanelTitleClicked has had the chance to refuse. Each panel opens and closes independently; any number can be open at once.
• Defaults and overrides. The DefaultPanel... properties of the bar give every panel title its font, colours, border and shadow. A panel uses its own value instead wherever it has one set – an empty colour means "use the bar's".
• Resizing. While IsPanelResizable is on, the user can drag the line under an expanded panel to make it taller or shorter.

How to use it

Create the panels, give each a BinaryExplorerBarPanel.PanelTitleText and an expanded height (BinaryExplorerBarPanel.CurrentHeight), put your controls on them, and add them to Panels. Open and close panels from code with BinaryExplorerBarPanel.CurrentExplorerBarPanelState, ResetThisPanelState or ResetAllPanelsState.

Appearance

Colour the bar yourself through GradientBeginColor, GradientEndColor, BackgroundStyle and the DefaultPanel... properties, or let it imitate one of the Windows XP colour schemes: set ThemeOrCustomColors to ThemeOrCustomColors.PreDefinedTheme and choose an XPTheme. ShadowDepth and DefaultPanelShadowDepth add soft shadows under the bar and under each panel. Margins and depths are in logical pixels (1/96 inch) and are scaled with the display.

An Explorer-style task pane with three groups, in the XP blue scheme.

using System.Drawing;
using System.Windows.Forms;
using Binarymission.WinForms.Controls.NavigationControls;

public class DocumentsForm : Form
{
    private readonly BinaryExplorerBarPanel detailsPanel;

    public DocumentsForm()
    {
        Text = "Documents";
        Size = new Size(820, 560);

        var bar = new BinaryExplorerBar
        {
            Dock = DockStyle.Left,
            Width = 230,
            ThemeOrCustomColors = ThemeOrCustomColors.PreDefinedTheme,
            DefaultPanelBorderColor = Color.SteelBlue,
            DefaultPanelShadowDepth = 3,
        };

        var fileTasks = new BinaryExplorerBarPanel { PanelTitleText = "File and Folder Tasks", CurrentHeight = 90 };
        AddLink(fileTasks, "Rename this file", 8);
        AddLink(fileTasks, "Move this file", 32);
        AddLink(fileTasks, "E-mail this file", 56);

        var otherPlaces = new BinaryExplorerBarPanel { PanelTitleText = "Other Places", CurrentHeight = 66 };
        AddLink(otherPlaces, "Shared Documents", 8);
        AddLink(otherPlaces, "Network Places", 32);

        detailsPanel = new BinaryExplorerBarPanel
        {
            PanelTitleText = "Details",
            CurrentHeight = 60,
            CurrentExplorerBarPanelState = BinaryExplorerBarPanelState.Collapsed,   // starts closed
        };
        detailsPanel.Controls.Add(new Label { Text = "Quarterly report.xlsx\r\n48 KB", Location = new Point(8, 8), AutoSize = true });

        bar.Panels.AddRange(new[] { fileTasks, otherPlaces, detailsPanel });
        bar.XPTheme = XPTheme.Blue;   // after ThemeOrCustomColors, and after the panels so they are themed too

        bar.BinaryExplorerBarPanelTitleClicked += (sender, panel) => true;   // return false to refuse a click
        Controls.Add(bar);
    }

    private static void AddLink(BinaryExplorerBarPanel panel, string text, int top)
    {
        panel.Controls.Add(new LinkLabel { Text = text, Location = new Point(8, top), AutoSize = true });
    }
}