July 30, 2011

C# - Container Controls 5 - FlowLayoutPanel Control Container

1. Introduction to FlowLayout

"Flow Layout Panel container" arranges the controls in specific pre-defined orders. When the Container holding the control is resized the controls are automatically arranged inside the container to maintain the flow specified.

In this example, we will place some controls inside the flow layout container and see some important properties and methods that control the container content.

2. About the sample

The screen shot of the example is shown below:

In the topside of the form, you can see four text boxes and two radio buttons placed inside the "Flow Container". In the bottom, there are two radio groups. "Flow Break" radio group is nested inside the Control radio group. In the bottom of the form, there are two check boxes.

"Flow Direction," tells in what direction the controls should be arranged. Say for example Top to Bottom radio button option arranges the control to fill the height the container and move to the next column to layout the controls from top to bottom.

Flow Break is useful for overriding the default control flow break. Let us say the direction is Left to Right and you are started placing the control the Flow container. The controls you place is allowed only in the current row. But, you can place anywhere in the current row. When there is no room in the current row based on the size of the flow container, the control goes and sits on the next row. This is what called a break. And this happens when the Wrap Controls check box is in the checked state. So in the sample, an option to break the flow of the control is provided by selecting the control. When the Break Flow By green textbox is selected the next controls in the flow will move to the next row.

Enable Auto Scroll check box provides a scroll bar and allows the existence of only one row or one column of controls by adding a scroll bar. The Wrap control allows control to be arranged in the next row or next column based on the flow direction set to the container.

OK Now let us go to the Sample implementation details.

3. Flow Layout and Placing the Controls

The "FlowLayoutPanel" control is placed in the form and the control is available in the container group of the toolbox. After placing the FlowLayoutPanel four text boxes and two radio buttons are dropped inside it. When placing the control inside this container dot net restricts you place it in the first row of the container. And it will produce one more row when the there is no room in the first row for the control coming new.

This is shown in the video: 01_FlowLayoutAddingControls.avi

4. Dock the Flow Layout to Top

The controls are already placed inside the FlowLayoutPanel container. Now select the Panel and then from the dock property choose the top button. This will dock the Container in the top edge of the form. Now, when you resize the form, the container also gets resized. Since the framework takes care of the layout of the controls inside the container, the resize will automatically arrange the controls.

Setting the top Docking for the flow layout is shown in the video: 02_Dockittotop.avi

5. AutoScroll and WrapContents Properties

The "AutoScroll" and "WrapContents" properties are used to change the way controls are laid out inside the FlowLayoutPanel. When we set AutoScroll property to true, the controls will be arranged in a single row and a scroll bar appears so that you can see all the controls by scrolling the content of the FlowLayoutPanel. When you set WrapContents property to true the controls wrapped into the next line when there is no room in the first line. Also, you can check this by resizing the window.

Note that these two properties in combination may make some confusion. So remember that when AutoScroll is already set to true, WrapContents property has no effect whether it is set to true or not. Similarly, when the WrapContents property is already set to true, setting the autoscroll property to true has no effect. Hence, before setting one property to true, make sure the another one is set to false. In the sample, I intentionally do not keep this validation, so that you can see how these check boxes in combination behave.

The event CheckedChanged for both the checkboxes are handled and the code is shown below:

private void checkBox1_CheckedChanged(object sender, EventArgs e)
    //Flow 01: Wrap Controls. The default is True
    if (checkBox1.CheckState == CheckState.Checked)
        FlowLayoutCC.WrapContents  = true;
        FlowLayoutCC.WrapContents = false;

private void checkBox2_CheckedChanged(object sender, EventArgs e)
    //Flow 02: Enable or Disable the AutoScroll
    if (checkBox2.CheckState == CheckState.Checked )
        FlowLayoutCC.AutoScroll = true;
        FlowLayoutCC.AutoScroll = false;

The above code in effect is shown in the video: 03_WrapAutoScroll.avi

6. Flow Direction

The control flow direction inside the FlowLayoutPanel is controlled by the "FlowDirection Property" of it. At runtime, the FlowDirection enumeration is used to assign the correct flow directions to this property. In this example I shown you only two flow directions. Below is the code for it:

//Flow 03: Set the Flow Direction       
private void radLR_CheckedChanged(object sender, EventArgs e)
    if ( radLR.Checked == true)
        FlowLayoutCC.FlowDirection = FlowDirection.LeftToRight;

private void radTB_CheckedChanged(object sender, EventArgs e)
    if (radTB.Checked == true)
        FlowLayoutCC.FlowDirection = FlowDirection.TopDown;

The above code in effect is shown in the video: 04_FlowDirection.avi

7. Flow Break

When the wrapcontents property is set to true the control placement flow is automatically braked to the next line or next column when there is no space. It actually works like a word processor and how it breaks the word to the next line. With the "SetFlowBreak()" method of the FlowLayoutPanel, you can force the container to do a flow break by specifying the control name and then specifying a Boolean value that says a break is required or not.

Below is the code to explain the flow break. The code is a handler for the Checked Changed event of the radio button that corresponds to the Flow break.

//Flow 04: Set Flow Break (Like Page break)
private void radGreenText_CheckedChanged(object sender, EventArgs e)
    if (radGreenText.Checked == true)
        FlowLayoutCC.SetFlowBreak(GreenText, true);
        FlowLayoutCC.SetFlowBreak(GreenText, false);

private void radBreakRad_CheckedChanged(object sender, EventArgs e)
    if (radBreakRad.Checked == true)
        FlowLayoutCC.SetFlowBreak(radWrap, true);
        FlowLayoutCC.SetFlowBreak(radWrap, false);

The above code in effect is shown in the video: 05_FlowBreak.avi

Source Code & Video Demos: Download

Note: The Attached Sample is in VS2005 format. Use 7zip to extract all the videos. 7zip is free and you can download it taking help from google.

No comments:

Post a Comment

Leave your comment(s) here.

Like this site? Tell it to your Friend :)