How can I change color of scroll bars vertical and horizontal (for nested panels also)?

[Raymond]

Hi!

                How can I change color of scroll bars vertical and horizontal (for nested panels also)?

                I do this:

              this.TableElement.VScrollBar.BackColor = Color.Red;

              this.TableElement.HScrollBar.BackColor = Color.Red;

       but nothing changes.

 Regards

[Raymond]

Does anybody know how to change color of scroll bars?

[Richard Slade]

Hi Raymond,

This should get you started.

' horizontal back color
CType(Me.RadGridView1.TableElement.Children(1).Children(1), FillPrimitive).BackColor = Color.Red
CType(Me.RadGridView1.TableElement.Children(1).Children(1), FillPrimitive).GradientStyle = GradientStyles.Solid
' horizontal scroll bar
CType(Me.RadGridView1.TableElement.Children(1).Children(4).Children(0), FillPrimitive).BackColor = Color.Blue
CType(Me.RadGridView1.TableElement.Children(1).Children(4).Children(0), FillPrimitive).GradientStyle = GradientStyles.Solid
' left arrow
CType(Me.RadGridView1.TableElement.Children(1).Children(2).Children(0), FillPrimitive).BackColor = Color.Green
CType(Me.RadGridView1.TableElement.Children(1).Children(2).Children(0), FillPrimitive).GradientStyle = GradientStyles.Solid
' right arrow
CType(Me.RadGridView1.TableElement.Children(1).Children(3).Children(0), FillPrimitive).BackColor = Color.Green
CType(Me.RadGridView1.TableElement.Children(1).Children(3).Children(0), FillPrimitive).GradientStyle = GradientStyles.Solid
' vertical scroll back color
CType(Me.RadGridView1.TableElement.Children(2).Children(1), FillPrimitive).BackColor = Color.Red
CType(Me.RadGridView1.TableElement.Children(2).Children(1), FillPrimitive).GradientStyle = GradientStyles.Solid
' vertical scroll bar
CType(Me.RadGridView1.TableElement.Children(2).Children(4).Children(0), FillPrimitive).BackColor = Color.Blue
CType(Me.RadGridView1.TableElement.Children(2).Children(4).Children(0), FillPrimitive).GradientStyle = GradientStyles.Solid
' up arrow
CType(Me.RadGridView1.TableElement.Children(2).Children(2).Children(0), FillPrimitive).BackColor = Color.Yellow
CType(Me.RadGridView1.TableElement.Children(2).Children(2).Children(0), FillPrimitive).GradientStyle = GradientStyles.Solid
' down arrow
CType(Me.RadGridView1.TableElement.Children(2).Children(3).Children(0), FillPrimitive).BackColor = Color.Yellow
CType(Me.RadGridView1.TableElement.Children(2).Children(3).Children(0), FillPrimitive).GradientStyle = GradientStyles.Solid

May I suggest too having a look at using RadControlSpy to find these elements. If you haven't used it, it can save a lot of time with these sort of questions.
You can find the information on RadControlSpy here

Hope that helps, but let me know if you have any questions
Richard

[Raymond]

Thanks, this is great tool – for sure I will use it.

Happy New Year!

[Richard Slade]

And to you Raymond,

Please remember to mark as answer if this has helped you.
All the best
Richard

[Stefan]

Hi guys,

The easiest way to introduce such settings like customizing the appearance of RadScrollBar is to use our theming mechanism through the Visual Style Builder. Otherwise you have to navigate through the Element hierarchy tree of the scroll bars in order to find the element responsible for the desired customization. Here is an example for changing the colors of the scroll bars:

((FillPrimitive)radGridView1.TableElement.VScrollBar.Children[1]).BackColor = Color.Yellow;
            ((FillPrimitive)radGridView1.TableElement.HScrollBar.Children[1]).BackColor = Color.Yellow;

            radGridView1.TableElement.VScrollBar.ThumbElement.ThumbFill.BackColor = Color.Blue;
            radGridView1.TableElement.VScrollBar.ThumbElement.ThumbFill.NumberOfColors = 1;
            radGridView1.TableElement.HScrollBar.ThumbElement.ThumbFill.BackColor = Color.Blue;
            radGridView1.TableElement.HScrollBar.ThumbElement.ThumbFill.NumberOfColors = 1;

            radGridView1.TableElement.VScrollBar.FirstButton.ButtonFill.BackColor = Color.Green;
            radGridView1.TableElement.VScrollBar.FirstButton.ButtonFill.NumberOfColors = 1;
            radGridView1.TableElement.HScrollBar.FirstButton.ButtonFill.BackColor = Color.Green;
            radGridView1.TableElement.HScrollBar.FirstButton.ButtonFill.NumberOfColors = 1;


            radGridView1.TableElement.VScrollBar.SecondButton.ButtonFill.BackColor = Color.Red;
            radGridView1.TableElement.VScrollBar.SecondButton.ButtonFill.NumberOfColors = 1;
            radGridView1.TableElement.HScrollBar.SecondButton.ButtonFill.BackColor = Color.Red;
            radGridView1.TableElement.HScrollBar.SecondButton.ButtonFill.NumberOfColors = 1;

I hope this helps. Let me know if you need anything else.

Greetings,
Stefan
the Telerik team

[Raymond]

Works very good

I have only one small issue:

I cannot change border of ThumbFill and color of these three lines that are inside in ThumbFill element.

I tried this:

 

radGridView1.TableElement.VScrollBar.ThumbElement.ThumbBorder.BackColor = Color.Red;
radGridView1.TableElement.VScrollBar.ThumbElement.ThumbFill.BorderThickness = new System.Windows.Forms.Padding(2);

but it doesn`t work.

I don`t know how to access these three lines.

Best Regards

[Richard Slade]

Hi Raymond,

To change the border, I beleive that in this case, you'd need to change the forecolor, not the backcolor.

radGridView1.TableElement.VScrollBar.ThumbElement.ThumbBorder.ForeColor = Color.Red;
radGridView1.TableElement.VScrollBar.ThumbElement.ThumbFill.BorderThickness = new System.Windows.Forms.Padding(2);

In order to change the 3 bars inside the thumb element, this is actually an image, and you would need to provide your own. You can get rid of it altogether though in this way.

((ImagePrimitive)radGridView1.TableElement.VScrollBar.ThumbElement.Children[2]).Image = null;

Hope that helps
Richard

[Raymond]

works perfect
thanks