Customize the scrollbar?

[Tom]

Hi, is it possible to change the size and style of the axis scrollbars that are used to scroll a zoomed chart? The reason is, in my application there is a lot of information to be displayed, including many charts. Therefore, screen real estate is at a premium. The default scrollbar is too big and takes up too much space. Also, the style of the scrollbar doesn't match that of my application which is more like Windows 10 square/tile look. 

Is it possible to reduce the height of the scrollbar to about 5 pixels?

Even better, is there a way to define my own control template so that I can modify every visual aspect of the scrollbar, the same way you can with common WPF controls?

Attached is an example the type of scrollbar I'm looking for.

Thank you.

Attachment: thin_scrollbars_14156e53.rar

[Muneesh Kumar G]

Hi Tom, 

Thanks for using Syncfusion products.  

We have analyzed your query, we would like to inform you that we don’t have direct for resizing scrollbar size. But we can achieve your requirement by setting EnableTouchMode as true as per the below code snippet. 

Code snippet[XAML]: 

 

<syncfusion:SfChart.PrimaryAxis> 

 

<syncfusion:CategoryAxis EnableScrollBar="True" EnableTouchMode="True"/> 

 

</syncfusion:SfChart.PrimaryAxis> 

 

 

Please refer the below user documentation for more details.  

 

Link : https://help.syncfusion.com/wpf/sfchart/interactive-features?cs-save-lang=1&cs-lang=xaml#scrollbar-for-touch-mode 

 

Please let us know if you have any queries.  

 

Thanks, 

Muneesh Kumar G. 

 

 

 

[Tom]

Hi Muneesh, the scrollbar in touchmode looks very nice and slim. However, I'm using a black background for the chartarea as well as the surrounding area which makes it impossible to see the black scrollbar. Is there a way to change the color of the scrollbar?

Thanks.

[Muneesh Kumar G]

Hi Tom,  

 

Thanks for your update. 

 

We can achieve your requirement by overriding Template in NumericalAxis then change fill in SfChartResizableBar thump as follows.  

 

Code snippet [XAML]: 

 

 

<!-- Change the fill color as per your requirement --> 

<ControlTemplate x:Key="HorizontalThumbTemplate" TargetType="Thumb"> 

  <Grid x:Name="Root" Height="10" Background="Transparent"> 

    <Rectangle Height="3" x:Name="Background" Fill="Yellow"> 

    </Rectangle> 

  </Grid> 

</ControlTemplate> 

... 

 

<chart:SfChart.PrimaryAxis> 

  <chart:NumericalAxis  EnableScrollBar="True" EnableTouchMode="True" 

    Template="{StaticResource customAxisTemplate}"> 

</chart:NumericalAxis> 

</chart:SfChart.PrimaryAxis> 

 

 

We have prepared  a sample based on this, please find the sample from the below location.  

 

Sample : http://www.syncfusion.com/downloads/support/forum/136551/ze/Sample-532984503 

 

Please let us know if you have any queries.  

 

Thanks, 

Muneesh Kumar G. 

[Tom]

This is fantastic, thank you!

[Muneesh Kumar G]

Hi Tom, 

Thanks for the update. We are glad to know that the given solution works. Please let us know if you need any further assistance. 

Thanks, 

Muneesh Kumar G.