The C# column

Using the Splitter control

In earlier versions of Visual Studio, we used to create splitter windows by calling methods of an MFC class. The main application window actually used to get split in panes. Each pane represented a separate view window. .NET’s concept of splitting windows is different. .NET provides a Splitter control, which is used to resize docked controls at run time. It does not actually split a window. The control to be resized must be just before the splitter control in z-order.

This article shows how to use the Splitter control in a WinForm application. We intend to display a form window as shown in the following snapshot.

The blue horizontal bar is a label control. We have changed its BackColor, ForeColor and Font properties. The control placed at the left hand side is the ListBox control. The control placed on the right hand side is the ListView control. The program is to list the currently running processes in the list box. If a process is selected its information is displayed in the list view control. Here, our aim is to show how to use the Splitter control. Our stress is not on browsing and retrieving information of processes.

When we place the Splitter control on a container, it divides the entire container in two parts—left and right (or top and bottom if placed horizontally). But, we don’t want to show the vertical bar of the Splitter control on the label. We want that the effect of splitter should be felt only on the remaining part of the form. For this, we have placed a Panel on the form so as to cover the remaining part of the form. This is shown in the following snap shot.

Now, place the ListBox and change its Dock property to Left. Name the control as list. Drag the Splitter control on the form. It will get docked to the left side indicating that it has to resize the control placed on the left. Run the program and place the cursor on the splitter bar. When the cursor changes, drag it to left or right. You will see the list box resizing.

We want to place a ListView control as well as button on the right side of the splitter. If the user moves the splitter, both the controls should be relocated properly. For this, we have again placed a Panel covering the right side of the form and placed the ListView and Button controls on it. Name the Panel control as panel, ListView control as listview and Button control as kill. Clicking this button kills the process selected from the list box. Again note that our aim is to show you how to relocate the multiple controls if Splitter control is moved, not to kill the process. Lastly, add the Process component from the ‘Components’ tab on ToolBox and name it process.

The designing part over, let’s move on to the coding part. Firstly, add the Load event handler. The handler is shown below.

private void Form1_Load ( object sender,
System.EventArgs e )
{
    Process[ ] parr = Process.GetProcesses( ) ;
    foreach ( Process p in parr )
    list.Items.Add ( p.ProcessName ) ;
}

Here, we have browsed the processes and listed them in the list box.

Now add the Click event handler for the button. In this handler we have checked whether any process is selected. If it is, then we have closed the process using the kill( ) method.

private void kill_Click ( object sender, System.EventArgs e )
{
    if ( list.SelectedItem == null )
    return ;
    Process[ ] p = Process.GetProcessesByName ( list.SelectedItem.ToString( ) ) ;
    p [ 0 ].Kill( ) ;
    list.Items.Remove ( list.SelectedItem ) ;
    list.SelectedIndex = -1 ;
    listview.Items.Clear( ) ;
}

After the process is closed, we have deleted the process name from the list box, set the selected index to –1 and cleared the list view control. When the user selects a process, its information is displayed in the ListView control. The code to fill the ListView control is written in the SelectedIndexChanged event handler.

private void list_SelectedIndexChanged ( object sender, EventArgs e )
{
    if ( list.SelectedIndex != -1 )
    {
       listview.Items.Clear( ) ;
       Process[ ] p = Process.GetProcessesByName ( list.SelectedItem.ToString( ) ) ;
       listview.Items.Add ( p [ 0 ].BasePriority.ToString( ) ) ;
       listview.Items [ 0 ].SubItems.Add ( p [ 0 ].Id.ToString( ) ) ;
       listview.Items [ 0 ].SubItems.Add ( p [ 0 ].StartTime.ToShortTimeString( ) ) ;
       listview.Items [ 0 ].SubItems.Add ( ( p [ 0 ].WorkingSet / 1024 ).ToString( ) ) ; 
     }
}

Here, firstly we have checked whether the handler has got called because of the change in selected index in the kill_Click( ) event handler. Then we have used various properties of the Process class to obtain information of the process.

Moving the splitter would resize the list control, but it would not change the width of the Panel control hosting the ListView and button. We have to do it ourselves.

Add a handler for the SplitterMoved event for Splitter control and adjust the size and left coordinate of the Panel control as given below.

private void splitter_SplitterMoved ( object sender, SplitterEventArgs e )
{
   panel.Width = Width - e.X ;
   panel.Left = e.X ;
}

Run the program. The form, after moving the splitter to the right, looks as shown below.

Yashavant Kanetkar, one of the first Express Computer columnists, is an established software expert, speaker and author with several best-sellers to his credit, including titles like “Let Us C” and the “Fundas” series. Contact him at kanetkar@dcubesoft.com