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

Placing a RadElement on a Form

12 Answers 588 Views
Form
This is a migrated thread and some comments may be shown as answers.
Michael
Top achievements
Rank 2
Michael asked on 31 Mar 2009, 09:30 PM
What is the recommended way to place a RadElement instance on a Form?

12 Answers, 1 is accepted

Sort by
0
Michael
Top achievements
Rank 2
answered on 31 Mar 2009, 09:35 PM
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


0
Mike
Telerik team
answered on 02 Apr 2009, 04:57 PM
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.
0
Michael
Top achievements
Rank 2
answered on 02 Apr 2009, 09:31 PM
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


0
Mike
Telerik team
answered on 03 Apr 2009, 03:35 PM
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.
0
Michael
Top achievements
Rank 2
answered on 07 Apr 2009, 09:42 PM
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
0
Mike
Telerik team
answered on 09 Apr 2009, 06:44 AM
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.
0
Michael
Top achievements
Rank 2
answered on 09 Apr 2009, 04:04 PM
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

0
Michael
Top achievements
Rank 2
answered on 09 Apr 2009, 05:38 PM
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
0
Michael
Top achievements
Rank 2
answered on 09 Apr 2009, 05:45 PM
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
0
Mike
Telerik team
answered on 10 Apr 2009, 05:23 PM
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.
0
Michael
Top achievements
Rank 2
answered on 10 Apr 2009, 08:43 PM
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
0
Accepted
Mike
Telerik team
answered on 13 Apr 2009, 07:00 AM
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.
Tags
Form
Asked by
Michael
Top achievements
Rank 2
Answers by
Michael
Top achievements
Rank 2
Mike
Telerik team
Share this question
or