1. Introduction to C# FlowLayoutPanel Container

The C# FlowLayoutPanel Container keeps the controls in a specific flow. When user resizes the container, it works out the controls so that the flow is kept intact. In this example, we will place some controls inside the FlowLayoutPanel Container and learn some vital properties and methods that control the container’s content.

Youtube: The Basics

2. About The Example

The screenshot of the example is shown below:

In the form’s topside, we can see four text boxes and two radio buttons placed inside the “C# FlowLayoutPanel Container”. In the bottom, there are two radio groups. “Flow Break” radio group is nested inside the Control Layout radio group. In the very bottom of the form, there are two check boxes.

‘Flow Direction’ tells in what direction the container must place the controls. Say for example Top to Bottom radio button option arranges the control to fill the height the container and moves to the next column. Here, the container places the controls in the top-bottom fashion.

‘Flow Break’ is useful for overriding the default control breaks. Let us say the direction is Left to Right and we are placing the controls in the Flow Container. The controls we place is allowed only in the current row but anywhere in it. When there is no room in the current row, the control sits on the next row. This is called a break. In our example, this happens when the ‘Wrap Controls’ check box is in the checked state. The example also provides the option to override this default breaks. When the ‘Break Flow By green text box’ is selected, the next controls in the flow will move to the next row or next column depending on the flow direction.

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

YouTube: About C# FlowLayoutPanel Container Example

OK. Now let us go to the implementation details of the example.

3. Placing Control On FlowLayoutPanel

First, we place the FlowLayoutPanel control on the form. This Control is available under the Container group of the toolbox. After placing the C# FlowLayoutPanel, we add four text boxes and two radio buttons in it. When placing the control inside this container, we can notice how Dot Net restricts to place the controls in the current row of the container. And it will produce one more row when the there is no room in the current row for the new Control.

This is shown in the video: 01_FlowLayoutAddingControls.avi

4. Dock FlowLayoutPanel 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.

Docking the container to the top edge of the form is shown in the video: 02_Dockittotop.avi

Youtube: Form Design of this Example

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 container will form the controls in a single row and a scroll bar comes out so that we can see all the controls by scrolling the content of the C# FlowLayoutPanel. When one set WrapContents property to true the controls wrapped into the next line when there is no room in the current flow order. Also, we can check this by resizing the window.

Note, these two properties in the mix may make some confusion. So remember, when we already set AutoScroll to true, WrapContents property has no effect even we set it to true. The same way, when the WrapContents Property is set to true earlier, setting the AutoScroll Property to true has no effect. Hence, before setting one property to true, make sure we set another one to false. In the sample, we willfully do not keep this validation, so we can see how these check boxes in combination behave.

The event CheckedChanged event handler for both the check-boxes are below:

Youtube: AutoScroll and WrapContents Properties of C# FlowLayoutPanel

6. FlowLayoutPanel’s Flow Direction

The control flow direction inside the FlowLayoutPanel is dealt by the “FlowDirection Property”. At run-time, we use the FlowDirection enumeration constant to assign the correct flow directions to this property. In this example we tried only two flow directions. Below is the code for it:

YouTube: Flow Direction of the C# FlowLayoutPanel

7. Flow Break

When the WrapContents property is set to true, the control placement flow is broke to the next line or next column when there is no space in current flow route. It works like a word processor and how it breaks the word to the next line. With the “SetFlowBreak()” method of the C# FlowLayoutPanel, we can force the container to do a flow break even there is space for the new control. We can do this by pointing out the control name and then passing a Boolean value that says a break is needed or not.

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

Youtube: Setting Flow break at the Specific Control

Source Code & Video Demos: Download from Google Drive

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.

• Table Join Explored With Examples
• SQL Insert Data Techniques

Categories: C#

Tags: C# FlowLayoutPanel FlowDirection, C# FlowLayoutPanel SetFlowBreak, C# FlowLayoutPanel WrapContents

This site uses Akismet to reduce spam. Learn how your comment data is processed.