Knowledgebase: Scrolling and Viewport
Creating a Custom SciChartOverview with many series using the ScrollBar API
Posted by Andrew BT on 19 November 2014 12:42 PM

A frequently asked question is How do I add more than one series behind a SciChartOverview Control?

We present a way you can do this below, using the new SciChart ScrollBar API - part of SciChart v3.2.

The Custom SciChart Overview Example

The Custom SciChartOverview example can be found in the SciChart v3.2 Examples Suite -> Custom Overview.

Custom SciChartOverview with many series

How do we do this?

We actually declare a WPF Grid, and have a SciChartSurface, then a SciChartScrollbar directly over it. So we haven't customized the overview at all, just displayed a SciChartSurface with many series behind a styled SciChartScrollbar. 

<!-- Style in your resource dictionary -->
<UserControl.Resources>
	<Style TargetType="s:SciChartScrollbar">
		<Setter Property="GripsThickness" Value="9" />
		<Setter Property="GripsLength" Value="30"/>
		<Setter Property="ViewportStyle">
			<Setter.Value>
				<Style TargetType="Control">
					<Setter Property="Background" Value="#33000000"/>
					<Setter Property="BorderBrush" Value="#99000000"/>
				</Style>
			</Setter.Value>
		</Setter>
		<Setter Property="GripsStyle">
			<Setter.Value>
				<Style TargetType="Control">
					<Setter Property="Background" Value="#535353"/>
					<Setter Property="BorderThickness" Value="2"/>
				</Style>
			</Setter.Value>
		</Setter>
	</Style>

	<common:DoubleToGridLengthConverter x:Key="DoubleToGridLengthConverter" />
</UserControl.Resources>

<!--  This grid is used to space Overview Control so its width matches parent chart XAxis  -->
<Grid Grid.Row="1">
	<!--  The grid is used to set paddings around the Overview, so that the size of the Overview matches the size of the XAxis on the parent chart  -->
	<Grid.ColumnDefinitions>
		<ColumnDefinition Width="*" />
		<!--  Hosts overview control  -->
		<ColumnDefinition Width="{Binding ActualWidthValue, ElementName=proxy, Mode=OneWay, Converter={StaticResource DoubleToGridLengthConverter}}" />
		<!--  Used to bind to parent surface YAxis  -->
	</Grid.ColumnDefinitions>

	<!-- This class is in the Examples Source Code, under your install directory -->
	<helpers:ActualSizePropertyProxy x:Name="proxy" Element="{Binding ElementName=MainChartSurface, Path=YAxis}" />

	<!--  Define the SciChartSurface behind the scrollbar -->
	<s:SciChartSurface x:Name="OverviewSurface"
					   Grid.Column="0"
					   Loaded="OnOverviewSurfaceLoaded"
					   SeriesSource="{Binding ChartSeries}">

		<s:SciChartSurface.XAxis>
			<s:NumericAxis DrawMajorGridLines="False"
						   DrawMinorGridLines="False"
						   Visibility="Collapsed" />
		</s:SciChartSurface.XAxis>

		<s:SciChartSurface.YAxis>

			<s:NumericAxis DrawMajorGridLines="False"
						   DrawMinorGridLines="False"
						   Visibility="Collapsed" />
		</s:SciChartSurface.YAxis>

	</s:SciChartSurface>

	<!-- Define a SciChartScrollbar -->
	<s:SciChartScrollbar Grid.Column="0" Margin="{Binding ElementName=MainChartSurface,
										 Path=Padding,
										 Mode=OneWay}" 
										 Axis="{Binding ElementName=XAxis}" />

</Grid>

It's as simple as that! Using this technique you could display literally anything behind a scrollbar. You could display an image, or bind to series provided by an external source etc... 

You might also want to see

 

 

 

 

(0 vote(s))
Helpful
Not helpful

Comments (0)

CONTACT US

Not sure where to start? Contact us, we are happy to help!


CONTACT US

SciChart Ltd, 16 Beaufort Court, Admirals Way, Docklands, London, E14 9XL. Email: Legal Company Number: 07430048, VAT Number: 101957725