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

Placing a RadElement on a Form

12 Answers 522 Views

Form

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

12 Answers, 1 is accepted

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());

Controls.Add(panel);

#else

FlowLayoutPanel panel = new FlowLayoutPanel();

panel.FlowDirection = FlowDirection.TopDown;

panel.AutoSize = true;

panel.Controls.Add(new Button());

Controls.Add(panel);

#endif

answered on 02 Apr 2009, 04:57 PM

largegrid.zip

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.

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

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.

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

answered on 09 Apr 2009, 06:44 AM

scrollablebuttonlist.zip

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.

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

Accepted

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting & Mocking

Automated Testing

CMS

UI/UX Tools

Debugging

Free Tools

Support and Learning

Productivity and Design Tools

Placing a RadElement on a Form

12 Answers, 1 is accepted