Add button control(s) to SplitContainer Splitter

Question

Is there any way to display controls (like buttons) on the adjustable splitter that displays between the two panels in a .NET SplitContainer?

Example:

Diagram

I don't think SplitContainer natively supports this, but overriding the control to get this functionality that seems omni-present in numerous applications seems a bit much to me - I feel like I'm over-thinking this or missing something obvious.

You used the big yellow label and I still have no idea where to put the cursor to start dragging. No visible cue at all. SplitContainer doesn't support this layout, it's splitter can't have a width. You can make something work with the old Splitter control, placed to the right of the left panel. — Hans Passant, Feb 17 '11 at 20:09
@Hans - I agree this might not be the best approach, philosophically speaking. In fact, I went with the `TableLayoutPanel` which works much the same as `SplitContainer`, but without dragging. Still, I would argue that it might be useful to put a grab bar indicator on the splitter, instead of buttons even, and this is impossible too. As to the width, I would guide you to `SplitContainer.SplitterWidth` property. And I know of no "old Splitter control" (VS 2008) — Adam Nofsinger, Feb 17 '11 at 22:54
As a workaround, it's possible to make a design that behaves like a splitter. Three separate panels. The one in the middle is narrow like a splitter. Implement dragging in the MouseMove event for the middle panel. Since it's a panel, it can contain child controls (buttons). — Nick Alexeev, Feb 18 '11 at 01:07

score 4 · Accepted Answer · answered Feb 18 '11 at 21:52

Here's an example that uses a TableLayoutPanel to simulate a SplitContainer.

using System;
using System.Diagnostics;
using System.Drawing;
using System.Windows.Forms;

class Form1 : Form
{
    [STAThread]
    static void Main()
    {
        Application.EnableVisualStyles();
        Application.SetCompatibleTextRenderingDefault(false);
        Application.Run(new Form1());
    }

    TableLayoutPanel rootPanel;
    float originalWidth;
    int splitPointX;

    public Form1()
    {
        Controls.Add(rootPanel = new TableLayoutPanel
        {
            ColumnCount = 3,
            ColumnStyles =
            {
                // Notice the use of Absolute here as this will control the 'splitting'
                new ColumnStyle(SizeType.Absolute, 120F),
                // Size of button panel
                new ColumnStyle(SizeType.AutoSize),
                // Remaining size
                new ColumnStyle(SizeType.Percent, 100F),
            },
            Dock = DockStyle.Fill,
            RowCount = 1,
            RowStyles = { new RowStyle(SizeType.Percent, 100F) },
        });

        Panel buttonPanel;
        rootPanel.Controls.Add(buttonPanel = new Panel
        {
            Anchor = AnchorStyles.Top | AnchorStyles.Bottom,
            BackColor = SystemColors.ControlDark,
            Margin = new Padding(0),
            MinimumSize = new Size(80, 0),
            Size = new Size(80, 0),
            Controls =
            {
                // UseVisualStyleBackColor = true only because we altered the container's BackColor
                new Button { Text = ">>", Location = new Point(19, 112), Size = new Size(40, 23), UseVisualStyleBackColor = true },
                new Button { Text = ">", Location = new Point(19, 83), Size = new Size(40, 23), UseVisualStyleBackColor = true },
                new Button { Text = "<", Location = new Point(19, 54), Size = new Size(40, 23), UseVisualStyleBackColor = true },
                new Button { Text = "<<", Location = new Point(19, 25), Size = new Size(40, 23), UseVisualStyleBackColor = true },
            },
        }, 1, 0);

        buttonPanel.MouseDown += (s, e) =>
            {
                if (e.Button == MouseButtons.Left)
                {
                    // Capture mouse so that all mouse move messages go to this control
                    (s as Control).Capture = true;

                    // Record original column width
                    originalWidth = rootPanel.ColumnStyles[0].Width;

                    // Record first clicked point
                    // Convert to screen coordinates because this window will be a moving target
                    Point windowPoint = (s as Control).PointToScreen(e.Location);
                    splitPointX = windowPoint.X;
                }
            };
        buttonPanel.MouseMove += (s, e) =>
            {
                if ((s as Control).Capture)
                {
                    Point windowPoint = (s as Control).PointToScreen(e.Location);

                    // Calculate distance of mouse from splitPoint
                    int offset = windowPoint.X - splitPointX;

                    // Apply to originalWidth
                    float newWidth = originalWidth + offset;

                    // Clamp it.
                    // The control in the left pane's MinimumSize.Width would be more appropriate than zero
                    newWidth = Math.Max(0, newWidth);

                    // Update column width
                    if (Math.Abs(newWidth - rootPanel.ColumnStyles[0].Width) >= 1)
                        rootPanel.ColumnStyles[0].Width = newWidth;
                }
            };
        buttonPanel.MouseUp += (s, e) =>
            {
                if (e.Button == MouseButtons.Left)
                {
                    // Release mouse capture
                    if ((s as Control).Capture)
                        (s as Control).Capture = false;
                }
            };
    }
}

Could use some polish, but a great start if I ever want to get back to this. I ended up just saying "it's not worth it" and using a standard TableLayoutPanel and a stationary split panel for the middle column. — Adam Nofsinger, Feb 22 '11 at 17:12

Add button control(s) to SplitContainer Splitter

1 Answers1