Placing a RadElement on a Form

13 posts, 1 answers
  1. Michael
    Michael avatar
    33 posts
    Member since:
    Mar 2009

    Posted 31 Mar 2009 Link to this post

    What is the recommended way to place a RadElement instance on a Form?
  2. Michael
    Michael avatar
    33 posts
    Member since:
    Mar 2009

    Posted 31 Mar 2009 Link to this post

    I realized that I should be more specific here.  Below is code from my form constructor.  My goal is that the form would show a scrollbar if sized small enough.  The code under #else involves standard Winforms controls and works fine.  The code under #if Telerik is equivalent, but does not function because I cannot add a StackLayoutPanel to the Controls collection of a form.  What would be perfect is if someone could reply with a modified version of the #if Telerik code below which places the StackLayoutPanel on the form such that the form's scrollbars appear when the form is sized smaller than the panel.

                AutoScroll = true;
    #if Telerik
                StackLayoutPanel panel = new StackLayoutPanel();
                panel.Orientation = Orientation.Vertical;
                panel.AutoSize = true;
                panel.Children.Add(new RadButtonElement());
                panel.Children.Add(new RadButtonElement());
                panel.Children.Add(new RadButtonElement());
                panel.Children.Add(new RadButtonElement());
                panel.Children.Add(new RadButtonElement());
                panel.Children.Add(new RadButtonElement());
                panel.Children.Add(new RadButtonElement());
                panel.Children.Add(new RadButtonElement());
                panel.Children.Add(new RadButtonElement());
                panel.Children.Add(new RadButtonElement());
                Controls.Add(panel);
    #else
                FlowLayoutPanel panel = new FlowLayoutPanel();
                panel.FlowDirection = FlowDirection.TopDown;
                panel.AutoSize = true;
                panel.Controls.Add(new Button());
                panel.Controls.Add(new Button());
                panel.Controls.Add(new Button());
                panel.Controls.Add(new Button());
                panel.Controls.Add(new Button());
                panel.Controls.Add(new Button());
                panel.Controls.Add(new Button());
                panel.Controls.Add(new Button());
                panel.Controls.Add(new Button());
                panel.Controls.Add(new Button());
                Controls.Add(panel);
    #endif


  3. UI for WinForms is Visual Studio 2017 Ready
  4. Mike
    Admin
    Mike avatar
    640 posts

    Posted 02 Apr 2009 Link to this post

    Hello Michael,

    You can add ButtonElements  to almost any RadControl,  but in the case it would be best if you use RadPanel control:

    StackLayoutPanel panel = new StackLayoutPanel(); 
    panel.Orientation = Orientation.Vertical; 
    panel.AutoSize = true
    panel.Children.Add(new RadButtonElement()); 
    ... 
    RadPanel elementsContainer = new RadPanel(); 
                 
    elementsContainer.Bounds = new Rectangle(10, 40, 100, 350); 
    elementsContainer.ThemeName = "Desert"
     
    elementsContainer.PanelElement.Children.Add(panel); 
    Controls.Add(elementsContainer); 

    I have attached a sample that demonstrates the approach. (It is the same sample that demonstrates large auto-sized grid inside a panel and ButtonElement inside RadPanel)

    One thing you should have in mind is that RadControl's internal layout system resembles much more the WPF layout system, than the WinForms one. For example - in the sample you will notice that all ButtonElements are auto-sized. They are expanded to fill all the available horizontal space and have height corresponding to their text size.

    Finally I would recommend you to use WinForms Controls instead of RadElements whenever possible. It will be easier and you have design time support for creating complicated UIs. TPF on the other hand is good to use to create custom controls that require more complicated rendering logic and interactivity, not available by default in WinForms, like the controls we have demonstrated here:
    http://www.telerik.com/community/code-library/winforms/general/telerik-custom-controls.aspx

    Let me know if I can help with anything else.

    Kind regards,
    Mike
    the Telerik team

    Check out Telerik Trainer , the state of the art learning tool for Telerik products.
  5. Michael
    Michael avatar
    33 posts
    Member since:
    Mar 2009

    Posted 02 Apr 2009 Link to this post

    Mike -

    Thank you for the excellent response!  Due to the flexible rendering of our UI, we will be entirely using RadElements.  We are essentially using TPF as a replacement for WPF due to the perf and memory problems we experienced with WPF and also due to the immaturity of the WPF grid controls (Telerik, Xceed, Microsoft, etc).  Our UI is entirely generated programmatically, so we do not use designers.

    The one problem I have left on this issue is getting the scrollbars to work without providing absolute bounds.  Your example contains the following line:

    elementsContainer.Bounds = new Rectangle(10, 40, 100, 350);  
     
     

    Rather than setting the bounds to absolute numbers, I would like to do one or the other of the following (either will work fine):

    1)  Fill the form with the RadPanel element container and let the RadPanel scroll.  I tried the following code, but the RadPanel failed to display a scrollbar when sized smaller than the buttons it contains:

                AutoScroll = false// turn off form scrolling 
                elementsContainer.Dock = DockStyle.Fill; // fill form 
                elementsContainer.AutoScroll = true// turn on panel scrolling 
     

    -- OR --

    2) Auto size the RadPanel to its contents and let the form do the scrolling.  I tried the following code, but the RadPanel fails to size to its contents -- it cuts off the stack of buttons prematurely:

                elementsContainer.AutoSize = true// size container to its contents 
                AutoScroll = true// turn on form scrolling 
     


    For reference, here is the current state of my code (containing both of the above snippets under separate compiler directives):

                StackLayoutPanel panel = new StackLayoutPanel();  
                panel.Orientation = Orientation.Vertical;  
                panel.AutoSize = true
                panel.Children.Add(new RadButtonElement() { Text = "Hello" }); 
                panel.Children.Add(new RadButtonElement() { Text = "Hello" }); 
                panel.Children.Add(new RadButtonElement() { Text = "Hello" }); 
                panel.Children.Add(new RadButtonElement() { Text = "Hello" }); 
                panel.Children.Add(new RadButtonElement() { Text = "Hello" }); 
                panel.Children.Add(new RadButtonElement() { Text = "Hello" }); 
                panel.Children.Add(new RadButtonElement() { Text = "Hello" }); 
                panel.Children.Add(new RadButtonElement() { Text = "Hello" }); 
                RadPanel elementsContainer = new RadPanel(); 
                //elementsContainer.Bounds = new Rectangle(10, 40, 100, 350);  
    #if PANEL_SCROLL 
                AutoScroll = false// turn off form scrolling 
                elementsContainer.Dock = DockStyle.Fill; // fill form 
                elementsContainer.AutoScroll = true// turn on panel scrolling 
    #endif 
    #if FORM_SCROLL 
                elementsContainer.AutoSize = true// size container to its contents 
                AutoScroll = true// turn on form scrolling 
    #endif 
     
                elementsContainer.ThemeName = "Desert"
                elementsContainer.PanelElement.Children.Add(panel); 
                Controls.Add(elementsContainer); 
     
     

    - Michael


  6. Mike
    Admin
    Mike avatar
    640 posts

    Posted 03 Apr 2009 Link to this post

    Hello Michael,

    I hope I understood your question right. The best approach to scroll RadElements within RadPanel would be to place all elements that should be scrolled inside RadScrollViewer element, which then you ca add to the hierarchy of elements of the panel.

    The other approach would be to use RadVirtualizedStackViewport. It is used by RadListBox and ComboBox controls and it offers visualized scrolling which is more convenient for greater element hierarchies. For reference you can take the code of RadListBoxElement.

    Let me know if this answers the question.

    All the best,
    Mike
    the Telerik team

    Check out Telerik Trainer , the state of the art learning tool for Telerik products.
  7. Michael
    Michael avatar
    33 posts
    Member since:
    Mar 2009

    Posted 07 Apr 2009 Link to this post

    Mike-
     
    As per your previous post, I'm using a RadPanel for the elements container.  As per your most recent post, I'm using a RadScrollViewer to enable scrolling.  Here is the code from my Form constructor:
     
                // Create element container to fill form 
                RadPanel elementsContainer = new RadPanel(); 
                this.Controls.Add(elementsContainer); 
                elementsContainer.Dock = DockStyle.Fill; 
     
                // Create scroll viewer for scrollbar support 
                RadScrollViewer scrollViewer = new RadScrollViewer(); 
                elementsContainer.PanelElement.Children.Add(scrollViewer); 
     
                // Create panel to stack buttons 
                StackLayoutPanel panel = new StackLayoutPanel(); 
                scrollViewer.Children.Add(panel); 
                panel.Orientation = Orientation.Vertical;  
                panel.Children.Add(new RadButtonElement() { Text = "Hello" }); 
                panel.Children.Add(new RadButtonElement() { Text = "Hello" }); 
                panel.Children.Add(new RadButtonElement() { Text = "Hello" }); 
                panel.Children.Add(new RadButtonElement() { Text = "Hello" }); 
                panel.Children.Add(new RadButtonElement() { Text = "Hello" }); 
                panel.Children.Add(new RadButtonElement() { Text = "Hello" }); 
                panel.Children.Add(new RadButtonElement() { Text = "Hello" }); 
                panel.Children.Add(new RadButtonElement() { Text = "Hello" }); 
     
     
     
     
    The problem is that a scrollbar does not appear when the form is sized smaller than the button stack.  I see two issues:
     
    1.  The inner panel is sizing itself to its parent instead of to its child buttons.  Unless it sizes to its children, it won't force the parent scroll viewer to show a scrollbar. How do I make it size to its children?  I messed with AutoSize, AutoSizeMode, and FitToSizeMode, but nothing seemed to help.  Note that I do not want to give it a fixed size -- I need it to size to its children.
    2.  The scrollViewer won't let itself be sized smaller than its children.  Unless it gets smaller than its children, no scrollbar will appear.  How do I force it to size to its parent irrespective of the size of the children?  Again, I messed with AutoSize, AutoSizeMode, and FitToSizeMode,but nothing seemed to help.
     
    Thanks,
    -Michael
  8. Mike
    Admin
    Mike avatar
    640 posts

    Posted 09 Apr 2009 Link to this post

    Hi Michael,

    Actually  the solution of this problem is very straightforward. You just have to assign the stack panel as a Viewport  for the ScrollLayoutPanel. IN other words, instead of
    scrollViewer.Children.Add(panel);
    you should write
    scrollViewer.Viewport = panel;

    The I've attached a demo - an app that displays a scrollable button list. I have also noticed that the documentation on the topic can be enhanced and we can add some examples, and I will add this in our to-do list.

    Let me know if this works for you.

    Greetings,
    Mike
    the Telerik team

    Check out Telerik Trainer , the state of the art learning tool for Telerik products.
  9. Michael
    Michael avatar
    33 posts
    Member since:
    Mar 2009

    Posted 09 Apr 2009 Link to this post

    Mike -

    Excellent!  I had suspected I was not using the RadScrollViewer class propertly because using the Spy I noticed a "RadScrollLayoutPanel" child that my element was parallel to rather than under, but I could not figure out how to get my element under that element.

    Two more questions and then this issue is resolved:

    1)  I'm finding that RadTextBoxElements are not scrolled.  What I find is that the buttons get scrolled, but the RadTextBoxElement does not.  I tried setting UsePhysicalScrolling to both true & false, but found no change in the behavior.  To demonstrate, modify the loop in your sample code as follows:

                for(int i = 0 ; i < 100; i++) 
                { 
                    if (i == 5) 
                        stackLayout.Children.Add(new RadTextBoxElement() { Text = "Not scrolled" }); 
                    stackLayout.Children.Add(new RadButtonElement() {Text = "Test" + i, Padding = new Padding(5), Margin = new Padding(2)}); 
                } 
     
     


    2)  I would like the panel containing the buttons to size itself to the child buttons rather than to the parent scroll viewer.  That is, I want the buttons to stretch based on their contained strings (e.g. "Hello") rather than being as wide as the form.  Can you tell me how this is done?

    Thanks,
    Michael

  10. Michael
    Michael avatar
    33 posts
    Member since:
    Mar 2009

    Posted 09 Apr 2009 Link to this post

    Michael -

    I figured out the answer to my second question -- I just set StretchHorizontally to false.  Thus, the only question left is the first one above, namely why the RadTextBoxElements don't scroll along with the RadButtonElements.

    Thanks!
    - Mike
  11. Michael
    Michael avatar
    33 posts
    Member since:
    Mar 2009

    Posted 09 Apr 2009 Link to this post

    Michael -

    I discovered another hint relating to this problem.  If I resize the form after scrolling, the RadTextBoxElements snap into position.  Thus, it seems to be an invalidation issue.

    - Mike
  12. Mike
    Admin
    Mike avatar
    640 posts

    Posted 10 Apr 2009 Link to this post

    Hi Michael,

    I am glad you've manged solved the first problem.
    Apparently there is an issue with RadTextBoxElement in RadScrollViewer (as well as other "hosted" contorls). We have to perform some additional research and tests but I think we would manage to squeeze in a fix for issue in the upcoming SP release (due next week).
    I hope this comforts you.

    Regards,
    Mike
    the Telerik team

    Check out Telerik Trainer , the state of the art learning tool for Telerik products.
  13. Michael
    Michael avatar
    33 posts
    Member since:
    Mar 2009

    Posted 10 Apr 2009 Link to this post

    Mike -

    So, if I'm understanding correctly, it will be fixed in an upcoming SP release due next week.  That would be acceptable.  For reference, here are a couple of screenshots that demonstrate the problem.  The second screen shot is the same as the first except scrolled down slightly.


    - Mike
  14. Answer
    Mike
    Admin
    Mike avatar
    640 posts

    Posted 13 Apr 2009 Link to this post

    Hi Michael,

    Yes, that is right. I have been able to reproduce the problem and I have scheduled it with a high priority. I also updated your account with telerik points for reporting this issue.

    Greetings,
    Mike
    the Telerik team

    Check out Telerik Trainer , the state of the art learning tool for Telerik products.
Back to Top
UI for WinForms is Visual Studio 2017 Ready