Styling Scrollbar

[Enrico]

Hi,
how can I style the Scrollbar, which appears when I zoom into the chart?
I wanna change it to be more touch friendly.

Cheers,
Enrico

[Lancelot]

Hi Enrico,

You can set the Pallete for the particular chart to "Metro", which will present you with a touch friendly view for the user. To set it, all you need to do is add the property Palette="Metro" inside your ChartView instance. Here's an example:

<chart:RadCartesianChart x:Name="VolumeChart" Palette="Metro" Grid.Row="1" ClipToBounds="False" Margin="10,0,0,0"
                                 Zoom="{Binding Zoom, Mode=TwoWay}" PanOffset="{Binding PanOffset, Mode=TwoWay}">
            <chart:RadCartesianChart.Behaviors>
                <chartView:ChartPanAndZoomBehavior ZoomMode="None" />
            </chart:RadCartesianChart.Behaviors>
            <chartView:BarSeries ItemsSource="{Binding ElementName=VolumeDataSource}"
                               CategoryBinding="Date"
                               ValueBinding="Volume"/>
            <chart:RadCartesianChart.HorizontalAxis>
                <chartView:DateTimeCategoricalAxis MajorTickInterval="50"
                                                 LabelFormat="dd-MMM \'yy"
                                                 LabelInterval="2"
                                                 PlotMode="OnTicks"
                                                 DateTimeComponent="Ticks" />
            </chart:RadCartesianChart.HorizontalAxis>
            <chart:RadCartesianChart.VerticalAxis>
                <chartView:LinearAxis LabelFormat="0,,, bln" Minimum="0" Maximum="10000000000" MajorStep="2000000000" />
            </chart:RadCartesianChart.VerticalAxis>
            <chart:RadCartesianChart.Grid>
                <chartView:CartesianChartGrid StripLinesVisibility="None" MajorLinesVisibility="XY">
                    <chartView:CartesianChartGrid.YStripeBrushes>
                        <SolidColorBrush Color="#FFD7D7D7" Opacity="0.3" />
                        <SolidColorBrush Color="Transparent" />
                    </chartView:CartesianChartGrid.YStripeBrushes>
                </chartView:CartesianChartGrid>
            </chart:RadCartesianChart.Grid>

        </chart:RadCartesianChart>

To try out the code inside your app, swap out the ItemsSource property of the <chartView:BarSeries> line right beneath the Behaviors tag group.

If you really want to drill into this example and see it in action, you have the source code already. Go to your C:\Program Files (x86)\Telerik\RadControls for WPF Q1 2012 SP1\Demos folder and run ExamplesCS_WPF.sln in Visual Studio. This particular code is in the  Examples > ChartView.WPF > SmoothScrolling folder, locate it in your Solution Explorer and open the Example.xaml file in that folder.

I hope this helps you on your journey for a more Touch Friendly UI, let me know if you need anymore help. If possible provide the code you want to apply the style to.

Good Luck!
Lancelot

[Enrico]

Hi Lancelot,
thank you for your answer.
Unfortunately this is not really helping me. I've already been using the Metro Palette. It is still not very touch friendly, so it is hard to touch the scrollbar. The touch area around the scrollbar needs to be larger. For that reason I was thinking to swap the default scrollbar with the SurfaceScrollbar.
For that reason I need the controltemplate for the chartview and the location of the scrollbar inside.
Hope you can help me.

Cheers,
Enrico

[Lancelot]

Hi Enrico,

Ok lets take it to the next level. I've pasted the code from the ScrollBarStyle.xaml file below. You could create the exact style that would suit you best from it.

<ControlTemplate x:Key="ScrollBarControlTemplate" TargetType="ScrollBar">
        <Border BorderThickness="{TemplateBinding BorderThickness}" BorderBrush="{TemplateBinding BorderBrush}" Background="{TemplateBinding Background}">
            <Grid x:Name="Root">
                <Grid x:Name="HorizontalRoot">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="Auto"/>
                        <ColumnDefinition Width="Auto"/>
                        <ColumnDefinition Width="Auto"/>
                        <ColumnDefinition Width="*"/>
                        <ColumnDefinition Width="Auto"/>
                    </Grid.ColumnDefinitions>
                    <RepeatButton x:Name="HorizontalSmallDecrease" Grid.Column="0" Interval="50" Style="{StaticResource RepeatButtonLineLeftStyle}" />
                    <RepeatButton x:Name="HorizontalLargeDecrease" Grid.Column="1" Interval="50" Style="{StaticResource RepeatButtonBlankStyle}" />
                    <Thumb x:Name="HorizontalThumb" Grid.Column="2" MinWidth="16" Style="{StaticResource ThumbHorizontalStyle}" />
                    <RepeatButton x:Name="HorizontalLargeIncrease" Grid.Column="3" Interval="50" Style="{StaticResource RepeatButtonBlankStyle}" />
                    <RepeatButton x:Name="HorizontalSmallIncrease" Grid.Column="4" Interval="50" Style="{StaticResource RepeatButtonLineRightStyle}" />
                </Grid>
                <Grid x:Name="VerticalRoot" Visibility="Collapsed">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto"/>
                        <RowDefinition Height="Auto"/>
                        <RowDefinition Height="Auto"/>
                        <RowDefinition Height="*"/>
                        <RowDefinition Height="Auto"/>
                    </Grid.RowDefinitions>
                    <RepeatButton x:Name="VerticalSmallDecrease" Grid.Row="0" Interval="50" Style="{StaticResource RepeatButtonLineUpStyle}" />
                    <RepeatButton x:Name="VerticalLargeDecrease" Grid.Row="1" Interval="50" Style="{StaticResource RepeatButtonBlankStyle}" />
                    <Thumb x:Name="VerticalThumb" Grid.Row="2" MinHeight="16" Style="{StaticResource ThumbVerticalStyle}" />
                    <RepeatButton x:Name="VerticalLargeIncrease" Grid.Row="3" Interval="50" Style="{StaticResource RepeatButtonBlankStyle}" />
                    <RepeatButton x:Name="VerticalSmallIncrease" Grid.Row="4" Interval="50" Style="{StaticResource RepeatButtonLineDownStyle}" />
                </Grid>
            </Grid>
        </Border>
    </ControlTemplate>
    <Style x:Key="ScrollBarStyle" TargetType="ScrollBar">
        <Setter Property="MinWidth" Value="12" />
        <Setter Property="MinHeight" Value="12" />
        <Setter Property="IsTabStop" Value="False"/>
        <Setter Property="Template" Value="{StaticResource ScrollBarControlTemplate}" />
    </Style>

    <Style BasedOn="{StaticResource ScrollBarStyle}" TargetType="ScrollBar" />

This on eis based on the Silverlight version, so you may need to tweak it to work in your project. If this doesnt help, provide me with the entire xaml code for the page/window/usercontrol you are trying to change.

Good Luck!
Lancelot

[Enrico]

Thank you for your quick answer,
I will check it out and try to solve my issue on Monday.
Have a great weekend,
Enrico

[Enrico]

Hi,
what I really need is the entire ControlTemplate for the RadCartesianChart. With it I could remove the Scrollbar and exchange it with a SurfaceScrollbar and additionally do some other modifications.

Cheers,
Enrico

[Evgenia]

Hi Enrico,

 There is no need to retemplate the whole RadCartesianChart. You can get use of the PanZoomBarStyle property of the axes and provide your own style for the slider there. You may find the default style of the PanZoomBar in Telerik.Windows.Controls.Chart.xaml  under your local controls installation folder. For example:
C:\RadControls binaries\Q1 2012\Themes\OfficeBlack\Themes.

Let us know if you need further assistance with this.

Greetings,

Evgenia
the Telerik team