Sunday, April 10, 2011

C# - Container Controls - GroupBox

1. Introduction to GroupBox Control


In this article, we will explore the usage of the "Container Controls". The container controls are treated by the top most container say a dialog as a control. The container controls can hold some other controls. First, we will explore the Group box container control then we will move ahead with other container controls. There will be probably four or five parts and I will provide the links below once all the parts are published.

The Container controls have some special properties. They allow you to place controls on it and all the control inherit the properties from the container in which they sit. Say for example if you set the container disabled all the controls in the container becomes disabled. This is useful when you to form a group of controls that performs some action or collect logically similar information from the user.

Reserved Space for Links to other parts.
Container Controls. Part 1 : Group Box


2. About the GroupBox example




In the above example, we have two group boxes called country and actions. They both have logically grouped controls inside it. In the design time, I can easily move the controls that belong to Country group box easily without worrying about the control alignment and orientation. It holds true for the Actions group box also. As you already know these group boxes are actually containers so they allow you place some other control on it.

So there are totally three containers in this form including the form. The form treats the group boxes as controls. So the groupbox is a container as well as a control.

The enable checkbox, when checked, allows all the controls inside the Actions group box enabled. We are not setting the enable property for each control for doing this. What we do is simply set the property for the container that is set it for the Action group box. All other similar properties are demonstrated in the Actions group box.

Also, note that we have two radio groups. One belongs to the Country and one belongs to the action group box. So these two radio sets act independently.

3. Code for the Events


3.1 GroupBox Enable Property


First, the event handler for the checkbox based on the state change is created and inside the handler, we are checking the checkbox state and enabling or disabling all the controls that belong to the Actions Group box. Note that we are setting the property for the group box and all the controls inside the group box will automatically get the property from their container unless it is overridden by specifying it for a particular control.

private void chkAction_CheckedChanged(object sender, EventArgs e)
{
    //Groupbox 01: Enable or disable the Actions radio group
    if (chkAction.CheckState  == CheckState.Checked)
        grpActions.Enabled = true;
    else
        grpActions.Enabled = false;
}

3.2 GroupBox BackColor Property


Next, the radio button state change event is handled. Note that the radio button in this container acts separately from the one, which is already there in the country container. Here, we are setting the background property for the container and thereby for the control that it holds.

private void rdBack1_CheckedChanged(object sender, EventArgs e)
{
    //Groupbox 02: Set the Background for the Groupbox
    if (rdBack1.Checked == true)
        grpCountry.BackColor = Color.AliceBlue ;
}

private void rdBack2_CheckedChanged(object sender, EventArgs e)
{
    //Groupbox 03: Set the Background for the Groupbox
    if (rdBack2.Checked == true)
        grpCountry.BackColor = Color.Azure;
}

3.3 GroupBox visible Property


Next, comes the click event handler for the hide country button. Here, the button will toggle the operation between hiding and show of country group box. The button label also toggled between Show/Hide.

private void btnHideShowCountry_Click(object sender, EventArgs e)
{
    //Groupbox 04: Hide the Country Container
    if(btnHideShowCountry.Text == "Hide Country" )
    {
        grpCountry.Visible = false;
        btnHideShowCountry.Text = "Show Country";
    }
    else
    {
        grpCountry.Visible = true;
        btnHideShowCountry.Text = "Hide Country";
    }
}

3.4 Setting a Font to GroupBox


The handler for the set font button will bring the font dialog and sets the font for the country group box. All the radio buttons inside the country group box take the font that we set to the group box control.

private void btnFontVerdana_Click(object sender, EventArgs e)
{
    //Groupbox 05: Set a different font to the Country
    FontDialog fnt = new FontDialog();
    if (fnt.ShowDialog() == DialogResult.OK)
    {
        grpCountry.Font = fnt.Font;
    }
}

4. Closing notes


Note that all the control inside the container will inherit the properties from the container. Here I showed you some simple properties like Enable, Visible, Font etc that we set on the container is inherited by the controls in it.

If you want to be set a different, say, for example, different font for a specific control, then setting the property for that specific control overrides the one taken from the container.

In the Above Example:

1) Both the group boxes and the Enable actions check boxes belongs to the top-level container the form. So they inherit the properties from the form. In our example, I have overridden that to the group box control by setting my own properties that are a different color.

2) The group boxes which is a control for the top-level container the form is also a container for the control that it groups.


Now when you do set the properties at runtime always remember the Order:

1) Set the Properties for the Container and then override whatever you want for the control.
2) Let me assume that I need different back color at runtime for the Form, the group boxes and for the control Hide Country. In this case, your workflow should set the property for the form first and then for the Group box and finally for the Hide Country button.

The sample is created in VS2005. If you have advanced IDE say yes to the conversion UI

Download : Source Code

1 comment:

Leave your comment(s) here.

Like this site? Tell it to your Firend :)