New to Telerik UI for WinForms? Download free 30-day trial

Getting Started with WinForms ScrollBar

Using Telerik scroll bars is a bit more intricate compared to using the standard scroll bars because you have to handle scroll event manually. The rest of this article demonstrates how you can use two panels to implement scrolling for the content of the second panel.

1. Add a RadPanel to your form (TelerikMetro theme was used for both panels. This theme is contained in the Miscellaneous theme component):

WinForms RadScrollBar Add RadPanel

2. Add a RadVScrollbar in the panel and dock it to the Right:

WinForms RadScrollBar Add RadVScrollbar

3. Add another RadPanel in the already added one and set its height to the total height you want to be available upon scrolling. This value can be statics e.g. 1000 pixels or dynamic determined by the scrollable content. For the purpose, of this example it is set to 1000 pixels. 

WinForms RadScrollBar Add Second RadPanel

4. The next step is to add controls to the second RadPanel (the controls which are to be scrolled):

Adding controls to the panel

for (int i = 1; i < 15; i++)
    RadButton button = new RadButton();
    button.Location = new Point(30, i * 30 + 5 * i);
    button.Size = new Size(70, 30);
    button.Text = "RadButton" + i.ToString();

For i As Integer = 1 To 14
    Dim button As New RadButton()
    button.Location = New Point(30, i * 30 + 5 * i)
    button.Size = New Size(70, 30)
    button.Text = "RadButton" & i.ToString()
Next i

You can add controls by drag and drop at design time as well.

WinForms RadScrollBar Panel with Buttons

5. Then, subscribe to the Scroll event of the vertical scroll bar and assign its negated value to the Top property of the second RadPanel:

Handling the Scroll event

void radVScrollBar1_Scroll(object sender, ScrollEventArgs e)
    this.radPanel2.Top = -this.radVScrollBar1.Value;

Private Sub radVScrollBar1_Scroll(ByVal sender As Object, ByVal e As ScrollEventArgs)
    Me.RadPanel2.Top = -Me.RadVScrollBar1.Value
End Sub

6. The last required step is to set the Maximum property of the scroll bar to reflect the size of the scrollable height which is the total height of the scrollable content minus the visible height. For the example of this section in particular, that is the height of the second panel minus the height of the first panel.

Specify RadVScrollBar's maximum

this.radVScrollBar1.Maximum = this.radPanel2.Size.Height - this.radPanel1.Size.Height;

Me.RadVScrollBar1.Maximum = Me.RadPanel2.Size.Height - Me.RadPanel1.Size.Height

WinForms RadScrollBar Scroll Controls

See Also

Telerik UI for WinForms Learning Resources

In this article