LIDOR SYSTEMS

Advanced User Interface Controls and Components

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.

Splitter with Expand Buttons
Download Sample - Create Splitter with Expand Buttons

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:

  1. by using an ImageList to create a set of images
  2. 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 an ImageList to ButtonImageList property so images can be accessible for buttons

this.splitContainer1.ButtonImageList = this.imageList1;

 

// Create a new command button

LidorSystems.IntegralUI.Controls.CommandButton cmdButton = 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

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.

private void splitContainer1_TabStripButtonClicked(object sender, LidorSystems.IntegralUI.ObjectClickEventArgs e)

{

if (e.Object is LidorSystems.IntegralUI.Controls.CommandButton)

{

LidorSystems.IntegralUI.Controls.CommandButton cmdButton = (LidorSystems.IntegralUI.Controls.CommandButton)e.Object;

 

switch (cmdButton.Key)

{

case "EXPAND_UP":

this.splitContainer1.Panel1Collapsed = true;

break;

 

case "EXPAND_DOWN":

this.splitContainer1.Panel2Collapsed = true;

break;

}

}

}

Private Sub splitContainer1_TabStripButtonClicked(ByVal sender As Object, ByVal e As LidorSystems.IntegralUI.ObjectClickEventArgs) Handles splitContainer1.TabStripButtonClicked

If TypeOf e.[Object] Is LidorSystems.IntegralUI.Controls.CommandButton Then

Dim cmdButton As LidorSystems.IntegralUI.Controls.CommandButton = DirectCast(e.[Object], LidorSystems.IntegralUI.Controls.CommandButton)

 

Select Case cmdButton.Key

Case "EXPAND_UP"

Me.splitContainer1.Panel1Collapsed = True

Exit Select

 

Case "EXPAND_DOWN"

Me.splitContainer1.Panel2Collapsed = True

Exit Select

End Select

End If

End Sub

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.

private void splitContainer1_OrientationChanged(object sender, EventArgs e)

{

switch (this.splitContainer1.Orientation)

{

case Orientation.Horizontal:

this.splitContainer1.TabStripButtons[3].ImageIndex = 0;

this.splitContainer1.TabStripButtons[4].ImageIndex = 1;

break;

 

case Orientation.Vertical:

this.splitContainer1.TabStripButtons[3].ImageIndex = 2;

this.splitContainer1.TabStripButtons[4].ImageIndex = 3;

break;

}

}

Private Sub splitContainer1_OrientationChanged(ByVal sender As Object, ByVal e As EventArgs) Handles splitContainer1.OrientationChanged

Select Case Me.splitContainer1.Orientation

Case Orientation.Horizontal

Me.splitContainer1.TabStripButtons(3).ImageIndex = 0

Me.splitContainer1.TabStripButtons(4).ImageIndex = 1

Exit Select

 

Case Orientation.Vertical

Me.splitContainer1.TabStripButtons(3).ImageIndex = 2

Me.splitContainer1.TabStripButtons(4).ImageIndex = 3

Exit Select

End Select

End Sub

In above code we are changing the appearance of fourth and fifth button to different images, depending on splitter orientation.

To see all this in action a sample in C# and VB is available for download from here: Splitter with Expand Collapse Buttons

Did you Like this Article?


Enter your e-mail address below and you will receive latest articles as well as news on upcoming events and special offers.