Minimize 'button' to control container layout

I am using Microsoft splitcontainer control in a working WinForms application (.net 4 / C # / vs 2010).

I want to have a small button (or any nice user interface element) between spliiter controller panels to collapse one of the panels. For instance. a 'button' with two parts, if I click on one part, the right sidebar will crash, if I click on the other part, the left sidebar will crash.

How can i solve this?

thanks in advance!

+6
source share
3 answers

You will need to write your own event for this. You have to decide the design. Hope you need something like below.

private void radButton1_Click(object sender, EventArgs e) { splitPanel1.Collapsed = !splitPanel1.Collapsed; } 

EDIT 1

There is no easy way you think. Take a look here and here to get an idea.

EDIT 2

You can add two toolStrips to both panels, which are Dock: Top, and add two buttons, as shown in the figure below, which looks good. Just a thought ...

enter image description here

Edit3

Separator is another option for you. Take a look here .

+8
source

I used this solution in my implementation, maybe too late for you, but it can help other people.

In my implementation, I also moved controls from one panel to another, so I only change the reset state of the panel as the last action.

Since I can’t post any images, try to figure them out as follows (the [<] and [>] buttons are buttons):

  ╔════════════╀═════════════╗ β•‘ [<]β”‚[>] β•‘ β•‘ β”‚ β•‘ β•‘ β”‚ β•‘ β•‘ β”‚ β•‘ β•‘ β”‚ β•‘ β•‘ β”‚ β•‘ β•šβ•β•β•β•β•β•β•β•β•β•β•β•β•§β•β•β•β•β•β•β•β•β•β•β•β•β•β• 

Below is the implementation for the left panel (panel1), a similar function is also used for the right panel.

  private void setSplitterLeftPanelCollapsedState(bool collapse) { splitContainer1.SuspendLayout(); // Collapse the left panel if (collapse) { if (!splitContainer1.Panel1Collapsed) { // restoring the panel in the end to apply layout changes buttonOpenPanel1.Text = ">"; splitContainer1.Panel1Collapsed = true; } } // Open the left panel else { if (splitContainer1.Panel1Collapsed) { // collapsing the panel in the end to apply layout changes buttonOpenPanel1.Text = "<"; splitContainer1.Panel1Collapsed = false; } } splitContainer1.ResumeLayout(); comboBoxSearchText.Focus(); } 
+3
source

Inspired by the layout of Lotus Notes, I developed something that, in my opinion, would be useful in this situation. It contains only one button between the panels, which switch the rotation / smoothing state of one panel, but can be easily changed to use two buttons to control the right and left panels. It uses two separated containers, one docked inside the other, and the mouseMove event on the "middle" panel to simulate the drag and drop of a splitter ( Moving a control by dragging it with the mouse in C # / a>). In addition, I use the ClientSizedChanged event for containers to handle the logic of switching image buttons instead of the method that minimizes / expands the panel ( Detect when SplitContainer crashed changes ).

Design:

 splitContainer1 ╔════════════╀═════════════════════════════════╗ β•‘ β”‚ splitContainer2 (docked fill) β•‘ β•‘ β”‚ ╔════════════╀════════════════╗ β•‘ β•‘ β”‚ β•‘ β”‚ β•‘ β•‘ β•‘ β”‚ β•‘ Button(s) β”‚ β•‘ β•‘ β•‘ β”‚ β•‘ [<>] β”‚ β•‘ β•‘ β•‘ β”‚ β•‘ β”‚ β•‘ β•‘ β•‘ β”‚ β•šβ•β•β•β•β•β•β•β•β•β•β•β•β•§β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β• β•‘ β•šβ•β•β•β•β•β•β•β•β•β•β•β•β•§β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β• splitContainer2.Dock = DockStyle.Fill; splitContainer1 = splitContainer2.IsSplitterFixed = true; splitContainer2.Panel1.Cursor = Cursors.VSplit; 

Anchor button left or right (or set several buttons inside the tableLayout control). Just make sure there is still some part of the panel available for click / drag.
Set the maximum value of the middle panel to low. The size depends on how much you need your buttons.

The code:

The panel will switch to the opposite state.
If you really need one button with two parts instead of two buttons or a toggle button, you will need to click the coordinates of the mouse and have different logic depending on where the click occurred.

 private void btnExpand_Click(object sender, EventArgs e) { splitContainer1.Panel1Collapsed = !splitContainer1.Panel1Collapsed; } 

Gender logic related to expansion / failure. I decided to use this event, because in my program there are several ways: the user can minimize / expand panels.

  private void splitContainer1_Panel2_ClientSizeChanged(object sender, EventArgs e) { if (splitContainer1.Panel1Collapsed) { splitContainer2.Panel1.Cursor = Cursors.Default; this.btnExpand.Image = imageExpand; } Else { splitContainer2.Panel1.Cursor = Cursors.VSplit; this.btnExpand.Image = imageCollapse; } } 

Cancel panel resizing due to fake splitter movement

  private void splitContainer2_Panel1_MouseMove(object sender, MouseEventArgs e) { if (e.Button == System.Windows.Forms.MouseButtons.Left) { /* All you really need is this: splitContainer1.SplitterDistance += eX; Note: Splitter distance must be a positive integer and eX will be negitive when dragging to the left of the splitContainer. You could handel this check here or on the splitterMoving event. The code I have below shows how to "snap" a panel closed if the splitter is moved close enough to the edge Or prevent a panel from being hidden from view (which could also be accomplished by setting the minimum size of a panel). */ if (eX + splitContainer1.SplitterDistance < 40) { while (splitContainer1.SplitterDistance > 1) splitContainer1.SplitterDistance--; splitContainer1.Panel1Collapsed = true; } else if ((eX + splitContainer1.SplitterDistance) * 1.00 / this.Width * 1.00 < .75) splitContainer1.SplitterDistance += eX; else Cursor.Current = Cursors.No; } } 
+2
source

Source: https://habr.com/ru/post/890718/


All Articles