kb-chartview-change-panzoombar-colors.md

title	description	type	page_title	slug	position	tags	ticketid	res_type
Change ChartView PanZoomBar Colors	Modify the Style of RadCartesianChart PanZoomBar Brush and Border.	how-to	Customize the Colors of the Chart Scroller	kb-chartview-change-panzoombar-colors	0	solidcolorbrush, scroll, zoom	1409342	kb

Environment

Product Version	2019.2.510
Product	RadChartView for WPF

Description

How to change the colors of the RadCartesianChart PanZoomBar (scroll) control.

Solution

important The Styles shown in this solution are based on the ExpressionDark [theme]({%slug common-styling-appearance-available-themes%}). The same approach can be used accross the different Telerik themes, but the styles may vary between them.

This example shows how to change the colors of the scroll to match the ExpressionDark theme colors.

1. Go to the Telerik UI for WPF installation folder and open the Telerik.Windows.Controls.ChartView.xaml file.

2. Find and extract the Style elements with x:Key properties set to ThumbStyle, AlternateThumbStyle and SelectionMiddleThumbStyle. The styles target the native Thumb control.

3. Change the Background and BorderBrush property values of the ThumbStyle.

4. Change the Background property of the SelectionMiddleThumbStyle.

5. Define a Style that targets PanZoomBarStyle and set its ThumbStyle, AlternateThumbStyle and SelectionMiddleThumbStyle properties to the previously extracted and modified Style objects.

   [XAML]

   {{region kb-chartview-change-panzoombar-colors-0}} <Window.Resources> <Style x:Key="CustomThumbStyle" TargetType="Thumb"> <Setter.Value> <Grid.InputBindings> </Grid.InputBindings> </Setter.Value> </Style> <Style x:Key="CustomAlternateThumbStyle" TargetType="Thumb" BasedOn="{StaticResource CustomThumbStyle}"> <Setter.Value> <Grid.InputBindings> </Grid.InputBindings> </Setter.Value> </Style> <Style x:Key="CustomSelectionMiddleThumbStyle" TargetType="Thumb"> <Setter.Value> <Grid.InputBindings> </Grid.InputBindings> </Setter.Value> </Style>

    	<Style x:Key="CustomPanZoomBarStyle" TargetType="telerik:PanZoomBar">
    		<Setter Property="ThumbStyle" Value="{StaticResource CustomThumbStyle}"/>
    		<Setter Property="SelectionMiddleThumbStyle" Value="{StaticResource CustomSelectionMiddleThumbStyle}"/>
    		<Setter Property="AlternateThumbStyle" Value="{StaticResource CustomAlternateThumbStyle}"/>
    	</Style>
    </Window.Resources>   
   

   {{endregion}}

6. Set the PanZoomBarStyle of the chart's axis.

   [XAML]

   {{region kb-chartview-change-panzoombar-colors-1}} telerik:RadCartesianChart.HorizontalAxis <telerik:CategoricalAxis PanZoomBarStyle="{StaticResource CustomPanZoomBarStyle}"/> </telerik:RadCartesianChart.HorizontalAxis>
   {{endregion}}