Custom Render

[Alan Burkhart]

I would like to create a custom renderer for the ScrollersFrame so I can change the colors to match the overall color scheme of an application. I saw that there is a CustomRender property in the Property Grid. But I have not been able to find any examples of how to do this. I assume that I need to access the color table but have not been able to figure out how. I would greatly appreciate a VB.net sample demonstrating how to customize the color scheme.
Thanks
AB

[Saravanan T]

Hi Alan,

Thank you for using Syncfusion products.

We would like to let you know that the scroll bar can be customized by using the property named “CustomRender” in ScrollersFrame. Please refer the below code snippet to assign the custom renderer to ScrollersFrame.

Code Snippet [VB]:

'To set the custom renderer to customize the appearance of Scrollbar

Me.scrollersFrame1.CustomRender = New BasicRenderer(True)

Additionally, we suggest you to use the Visual style as “Metro” to customize the appearance of scroll bar by using the property named “ScrollMetroColorTable” in ScrollersFrame. Please make use of the following code snippet for your reference.

Code Snippet [VB]:

Private colorTable As New MetroColorTable()

colorTable.ArrowChecked = Color.Red

colorTable.ArrowNormal = Color.Blue

colorTable.ArrowInActive = Color.Yellow

colorTable.ArrowNormalBackGround = Color.Orange

colorTable.ArrowPushed = Color.White

colorTable.ArrowPushedBackGround = Color.Green

colorTable.ScrollerBackground = Color.LightSkyBlue

colorTable.ThumbChecked = Color.Blue

colorTable.ThumbInActive = Color.Orange

colorTable.ThumbNormal = Color.Olive

colorTable.ThumbPushed = Color.HotPink

colorTable.ThumbPushedBorder = Color.Indigo

'To apply the MetroColorTable to ScrollersFrame

Me.scrollersFrame2.ScrollMetroColorTable = colorTable

'To set the Visual style as Metro

Me.scrollersFrame2.VisualStyle = ScrollBarCustomDrawStyles.Metro

We have also prepared a sample for your reference and it can be downloaded from the following location.

Sample Location: https://www.syncfusion.com/downloads/support/forum/119733/ze/ScrollersFrame_CustomRender_VB360545952

Screenshot:

Could please let us know whether the above solution meets your requirement? If not, could please share us the some additional details regarding the requirement and it will be helpful for us to analyze and provide prompt solution as earlier as possible.

Please let us know if you need any further assistance on this,

Regards,
Saravanan T

[Alan Burkhart]

With the MetroColorTable...
The ArrowNormalBackGround, ArrowPushedBackGround and ThumbPushedBorder properties have no effect that I can see. I am assuming the ArrowNormalBackGround and ArrowPushedBackGround are the scroll button colors. I can work with the Metro theme, but I would prefer to have the scroll buttons color behavior match the thumb's behavior instead of always being the same color as the track. I am unsure if this is possible with Metro.

I added your code for the Metro color table to my application, and also tried setting the colors like below:
            ScrollersFrame2.ScrollMetroColorTable.ArrowNormalBackGround = Color.Gainsboro
            ScrollersFrame2.ScrollMetroColorTable.ArrowPushedBackGround = Color.Orange
            ScrollersFrame2.ScrollMetroColorTable.ThumbPushedBorder = Color.Gray

Neither way has any visible effect on the scroll buttons or thumb border. Otherwise it all works fine. I have not yet been too deep into the Basic Renderer class you provided. But perhaps it's possible to override color properties there or with an Office theme? Please do not overly trouble yourselves with this. If the button color properties cannot be overridden then I'll work with it as it is. I just need to know.
Thanks
- -AB

[Saravanan T]

Hi Alan,

Thank you for your update.

We are able to reproduce the reported issue and we have logged defect report. A support incident #142037 has been created under your account to track the status of this defect. Our support engineer will assist you through incident under your Direct Trac account. Please log on to our support website to check for further updates.

https://www.syncfusion.com/account/login?ReturnUrl=%2fsupport%2fdirecttrac%2fincidents

Please let us know if you need any further assistance on this.

Regards,
Saravanan T