Full Width Panel Inside FlowLayoutPanel

[Edmund]

Hello,

I have a DocumentWindow (part of a RadDock) which has a FlowLayoutPanel inside of it set to Dock Fill.  The FlowLayoutPanel has the FlowDirection set to "TopDown".

Inside the FlowLayoutPanel I want to have full width Panels.  The Panels themselves are meant to act as containers for "comment boxes" which will are to be stacked vertically in the DocumentWindow (see poor ascii art below).  I've set the Panel "Anchor" property to "Left-Right" but the Panels will not expand to fit the entire FlowLayoutPanel.

My questions are:

1.  Should this work?
2.   If not, what is a good way to do this type of layout?

Thank you!

Best Regards,

Ed


Here is what I'm trying to acheive (the box made of '+' signs is the FlowLayoutPanel which is inside of a DocumentWindow)

+++++++++++++++++++
+ ---------------------------   +
+ |                               |   +
+ |         Panel 1          |   +
+ ----------------------------  +
+                                     +
+ ---------------------------   +
+ |                               |   +
+ |         Panel 2          |   +
+ ----------------------------  +
+++++++++++++++++++

[Edmund]

Just to answer my own question and close the loop this should not work because FlowLayoutPanels have an implied column that is the width of the largest element in the flow even if you set anchor left and right.  I was making things too complicated and you can just set the anchor properties on a normal panel.

What threw me off is that unlike the "Dock" property, when you set "Anchor Left Right" the control doesn't grow automatically in the Designer.  You still have to manually set the size (which makes sense in hindsight).

Taken from the Microsoft website:

This is the general rule for anchoring and docking in the FlowLayoutPanel control: for vertical flow directions, the FlowLayoutPanel control calculates the width of an implied column from the widest child control in the column. All other controls in this column with Anchor or Dock properties are aligned or stretched to fit this implied column. The behavior works in a similar way for horizontal flow directions. The FlowLayoutPanel control calculates the height of an implied row from the tallest child control in the row, and all docked or anchored child controls in this row are aligned or sized to fit the implied row.

[Dess | Tech Support Engineer, Principal]

Hello Edmund,

Thank you for writing.

I am glad that you have found the suitable information about the FlowLayoutPanel. However, I would suggest you to use our RadSplitContainer in Horizontal orientation. Please refer to the attached pictures illustrating better that similar layout can be achieved as the one you provided in your sample drawing. If you need additional space between the two panels, you can always add one empty split panel which can be hidden or filled with some controls. Our Demo application >> SplitContainer >> Layouts example demonstrates a more complex layout that can be achieved.

I hope this information helps. Should you have further questions, I would be glad to help.

Regards,
Desislava
Telerik

 

 

[Edmund]

Thank you for the additional information.  In this case I didn't want the panels to be re-sizable.  I took a quick look at the splitpanel properties but it didn't seem like there was a way to prevent resizing of the panels.  

Would it still be appropriate to use a RadSplitPanel if our intention was for the panels to size themselves such that they automatically fit their content but do not allow a user to expand or contract them?

Thank you!

[Dess | Tech Support Engineer, Principal]

Hello Edmund,

Thank you for writing back.

RadSplitContainer is composed of split panels which fill the entire RadSplitContainer's width. When resizing the main container, the inner panels are also resized. This is desired behavior. It is possible to resize the split panels via dragging the splitter. However, you can stop this functionality by setting the SplitterWidth property to 0. Thus, the inner panels will size themselves such that they automatically fit their content but do not allow a user to expand/contract them.

I hope this information helps. If you have any additional questions, please let me know.

Regards,
Desislava
Telerik

 

 

[Peter]

Hi Dess,

Is there a Telerik control like System.Windows.Forms.FlowLayoutPanel?

 

Best Regards,

Peter

[Dess | Tech Support Engineer, Principal]

Hello Peter,

Thank you for writing. 

The Telerik UI for WinForms suite doesn't offer an alternative of the FlowLayoutPanel. However, it offers several controls that allow you to build an advanced layout, e.g. RadSplitContainer: http://docs.telerik.com/devtools/winforms/splitcontainer/building-advanced-layouts

Could you please give us some more details about the exact layout that you are trying to achieve? A sample screenshot would be greatly appreciated. Thus, we would be able to think about a suitable solution and assist you further. Thank you.

Should you have further questions I would be glad to help.

Regards,
Dess
Telerik by Progress

[Abdul]

Hello Dess,

I have  a set of controls in a RadGroupBox (say 10,it includes RadLabel,RadTextBox,RadDropDownList).When RadDropDownList SelectedIndexChanged, some of above control's IsVisible set to false.So the arranged controls in RadGroupBox are in Scattered form.So I want to rearrange these controls according to their Visibility to a proper alignment when SelectedIndexChanged.Is there any possible solutions to handle this?may i have to use some other control instead of RadGroupBox(Like FlowLayoutPanel in normal WinForm Application)?

Regards

ABDUL HAFEEL

[Dess | Tech Support Engineer, Principal]

Hello, Abdul,  

Thank you for writing back. 

The provided detailed explanation is greatly appreciated. FlowLayoutPanel doesn't have an equivalent in the Telerik UI for WinForms suite. Feel free to use the FlowLayoutPanel in your WinForms application. As it was already suggested in my previous reply, a vertical RadSplitContainer would give you a similar layout. Each control may be placed in a separate SplitPanel and when you need to hide the control inside this panel, you can simply collapse the respective splitter. Additional information about RadSplitContainer, how to build advanced layout with it and manage the splitter is available in the following help article:

https://docs.telerik.com/devtools/winforms/splitcontainer/overview
https://docs.telerik.com/devtools/winforms/splitcontainer/building-a-layout-of-radsplitcontainers-programmatically
https://docs.telerik.com/devtools/winforms/splitcontainer/splitter-buttons

I hope this information helps. If you have any additional questions, please let me know. 

 Regards,
Dess
Progress Telerik

[Brendan]

Hi Dess, I have a dynamically populated flowlayout panel which must resize at runtime and adjust the other items on the form. In the attached gif I am using a tablelayout with 4 rows (label, flowlayout,label,radpanel) and it does what I need.  However it is very unfriendly to work with at design time.

I tried replicating this with the splitcontainer (2 panels) but could not get the top splitpanel to resize based on the flowlayout resizing, no matter what I did - I set the splitpanel size based on the flowlayout size on resize but this did not work.  Is it possible to achieve the illustrated layout with any Rad controls?

Thanks, Brendan

[Dess | Tech Support Engineer, Principal]

Hello, Brendan,

I would like to note that the MS FlowLayoutPanel is a very specific panel control. It is designed to arrange its contents in a horizontal or vertical flow direction. You can wrap the control's contents from one row to the next, or from one column to the next.

RadSplitContainer is not purposed to arrange the hosted controls in such a way. It is composed of split panels which fill the entire RadSplitContainer's width. When resizing the main container, the inner panels are also resized (enlarged or shrunk) but they are not flowed to the next row. This is desired behavior. It is possible to resize the split panels via dragging the splitter as well.

As it was already explained in the previous reply, FlowLayoutPanel doesn't have an equivalent in the Telerik UI for WinForms suite. That is why in order to achieve the same flow layout at run time feel free to use the FlowLayoutPanel in your WinForms application.

If you are not intending to host many and complex controls in this panel, you may consider using the IconsView in RadListView with custom IconListViewVisualItems: https://docs.telerik.com/devtools/winforms/controls/listview/custom-items The IconsView offers vertical and horizontal orientation which arranges the icon items in the respective direction when resizing the control.

Should you have further questions please let me know.

Regards,
Dess | Tech Support Engineer, Sr.
Progress Telerik

[Brendan]

Thanks Dess. I'll take a look at the RadListView with icons.