|
In earlier version 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 splits 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 snap shot.
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 would see the list box resizing. We want to place a ListView control as well as button on the right side of the splitter. If 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 would kill 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 is over, lets 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 would look as given below.
|
