This is a migrated thread and some comments may be shown as answers.

Full Width Panel Inside FlowLayoutPanel

11 Answers 3627 Views
Panel
This is a migrated thread and some comments may be shown as answers.
Edmund
Top achievements
Rank 1
Edmund asked on 05 Nov 2014, 12:59 AM
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          |   +
+ ----------------------------  +
+++++++++++++++++++


11 Answers, 1 is accepted

Sort by
0
Edmund
Top achievements
Rank 1
answered on 05 Nov 2014, 08:30 PM
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.
0
Dess | Tech Support Engineer, Principal
Telerik team
answered on 07 Nov 2014, 02:11 PM
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
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
0
Edmund
Top achievements
Rank 1
answered on 07 Nov 2014, 02:26 PM
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!
0
Dess | Tech Support Engineer, Principal
Telerik team
answered on 12 Nov 2014, 11:26 AM
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
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
0
Peter
Top achievements
Rank 1
answered on 19 Aug 2016, 02:00 PM

Hi Dess,

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

 

Best Regards,

Peter

0
Dess | Tech Support Engineer, Principal
Telerik team
answered on 22 Aug 2016, 11:07 AM
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
Check out the Windows Forms project converter, which aids the conversion process from standard Windows Forms applications written in C# or VB to Telerik UI for WinForms.For more information check out this blog post and share your thoughts.
0
Abdul
Top achievements
Rank 1
answered on 07 Feb 2018, 07:25 AM

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

0
Dess | Tech Support Engineer, Principal
Telerik team
answered on 07 Feb 2018, 02:22 PM
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
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Brendan
Top achievements
Rank 1
answered on 25 Mar 2020, 03:29 PM

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

0
Dess | Tech Support Engineer, Principal
Telerik team
answered on 26 Mar 2020, 12:09 PM

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 IconListViewVisualItemshttps://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

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.
0
Brendan
Top achievements
Rank 1
answered on 26 Mar 2020, 12:13 PM
Thanks Dess. I'll take a look at the RadListView with icons.
Tags
Panel
Asked by
Edmund
Top achievements
Rank 1
Answers by
Edmund
Top achievements
Rank 1
Dess | Tech Support Engineer, Principal
Telerik team
Peter
Top achievements
Rank 1
Abdul
Top achievements
Rank 1
Brendan
Top achievements
Rank 1
Share this question
or