Full Width Panel Inside FlowLayoutPanel

9 posts, 0 answers
  1. Edmund
    Edmund avatar
    9 posts
    Member since:
    Oct 2014

    Posted 04 Nov 2014 Link to this post

    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          |   +
    + ----------------------------  +
    +++++++++++++++++++


  2. Edmund
    Edmund avatar
    9 posts
    Member since:
    Oct 2014

    Posted 05 Nov 2014 in reply to Edmund Link to this post

    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.
  3. Dess | Tech Support Engineer, Sr.
    Admin
    Dess | Tech Support Engineer, Sr.  avatar
    3275 posts

    Posted 07 Nov 2014 Link to this post

    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.

     
  4. Edmund
    Edmund avatar
    9 posts
    Member since:
    Oct 2014

    Posted 07 Nov 2014 Link to this post

    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!
  5. Dess | Tech Support Engineer, Sr.
    Admin
    Dess | Tech Support Engineer, Sr.  avatar
    3275 posts

    Posted 12 Nov 2014 Link to this post

    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.

     
  6. Peter
    Peter avatar
    4 posts
    Member since:
    Aug 2016

    Posted 19 Aug 2016 in reply to Dess | Tech Support Engineer, Sr. Link to this post

    Hi Dess,

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

     

    Best Regards,

    Peter

  7. Dess | Tech Support Engineer, Sr.
    Admin
    Dess | Tech Support Engineer, Sr.  avatar
    3275 posts

    Posted 22 Aug 2016 Link to this post

    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.
  8. Abdul
    Abdul avatar
    27 posts
    Member since:
    Jan 2017

    Posted 07 Feb 2018 Link to this post

    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

  9. Dess | Tech Support Engineer, Sr.
    Admin
    Dess | Tech Support Engineer, Sr.  avatar
    3275 posts

    Posted 07 Feb 2018 Link to this post

    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.
Back to Top