Splitter with Expand/Collapse Buttons

Created: 16 August 2013

SplitContainer is a useful control when you need to split content in two panels and resize them using a splitter. By default the splitter doesn’t contain any buttons and only functionality available is to change its position which will resize divided panels. IntegralUI SplitContainer extends that functionality by presenting each panel with a tab header and command buttons inside splitter with custom functionality.

By default splitter contains three buttons: two for changing the orientation of divided panels from horizontal to vertical and also a button to expand or collapse the first panel. However, there may be cases when you want to create and add your own custom button with custom functionality. In following text we will present you how to do that.

How to Create Expand/Collapse Buttons in Splitter

The IntegralUI SplitContainer has a TabStripButtons property which holds a collection of all buttons that are added to the container control and which are visible inside splitter space. When creating a new button we will also need a visual representation of it by assigning an image. This can be done in two ways either from control designer or programmatically through code:

by using an ImageList to create a set of images

by using a single image

In first way, each button has an ImageIndex property which points to designated image inside ImageList collection of images. In order this to work; the control ButtonImageList property must points to the selected ImageList.
In second way we are using the Image property of button and assign an already created image from a file or from other resource.

// Assign a value which points to an image in ImageList already added to the ButtoImageList property

cmdButton.ImageIndex = 2;

// Assign an image from a file

cmdButton.Image = Image.FromFile("custom-image.jpg");

// Add the command button to the SplitContainer

this.splitContainer1.TabStripButtons.Add(cmdButton);

' Assign an ImageList to ButtonImageList property so images can be accessible for buttons

Me.splitContainer1.ButtonImageList = Me.imageList1

' Create a new command button

Dim cmdButton As New LidorSystems.IntegralUI.Controls.CommandButton()

' Assign a value which points to an image in ImageList already added to the ButtoImageList property

cmdButton.ImageIndex = 2

' Assign an image from a file

cmdButton.Image = Image.FromFile("custom-image.jpg")

' Add the command button to the SplitContainer

Me.splitContainer1.TabStripButtons.Add(cmdButton)

Now we have a command button which is display inside splitter space. There is no limit on how many buttons can be created and added as long there is enough visible space inside the splitter to show all buttons. If there is no space, some buttons will become hidden.

By default no operation will be executed when a button is clicked. In order to create one, we need to handle the TabStripButtonClicked event. This event is fired whenever a command buttons is clicked. For purpose of this writing we will create two buttons, one will expand the first panel and collapse the other, and the second button will collapse the first panel and expand the other.

To distinct the buttons from each other, we are using their Key property to store a unique value which will help us to identify on which button a click was made.

How to Change Splitter Orientation from Clicks on Command Buttons

Initially, the splitter is positioned horizontally and divides panels on top and bottom one. There is already a built-in button added to the splitter which when clicked will change the splitter orientation from horizontal to vertical or vice versa. However, during this change, any custom button added to the splitter will remain with the same visual representation. In some cases this may not look good, because it will give different meaning to button functionality.

To solve this we can handle the OrientationChanged event and use different images for some buttons if needed depending on current splitter orientaton.

Newsletter

Sign-up to our newsletter and you will receive news on upcoming events, latest articles, samples and special offers.

Name:

Email: *

*By checking this box, I agree to receive a newsletter from Lidor Systems in accordance with the Privacy Policy. I understand that I can unsubscribe from these communications at any time by clicking on the unsubscribe link in all emails.