{"id":1778,"date":"2014-11-01T13:41:19","date_gmt":"2014-11-01T13:41:19","guid":{"rendered":"https:\/\/www.scichart.com\/2014\/11\/01\/how-to-add-a-scichartoverview-or-scrollbar-with-an-itemscontrol-of-charts-or-scichartgroup\/"},"modified":"2022-12-09T13:09:12","modified_gmt":"2022-12-09T13:09:12","slug":"how-to-add-a-scichartoverview-or-scrollbar-with-an-itemscontrol-of-charts-or-scichartgroup","status":"publish","type":"post","link":"https:\/\/www.scichart.com\/how-to-add-a-scichartoverview-or-scrollbar-with-an-itemscontrol-of-charts-or-scichartgroup\/","title":{"rendered":"How to add a SciChartOverview or Scrollbar with an ItemsControl of charts, or SciChartGroup"},"content":{"rendered":"

A frequently asked question at SciChart is how can I add a SciChartOverview to a Multi-paned Stock Chart hosted by SciChartGroup<\/em><\/strong>.<\/p>\n

We already have a documented workaround for v2.x or later to add a\u00a0SciChartOverview to appear under the\u00a0last chart in an ItemsControl<\/a>. This works fine for ItemsControls, but it won’t work with SciChartGroup.<\/p>\n

Below, we\u00a0present a way to add a\u00a0Scrollbar to the SciChartGroup (multi-paned stock charts)\u00a0using the new v3.2 ScrollBar\u00a0API:<\/p>\n

The Problem – Binding to SciChartGroup\u00a0Templated Items<\/h2>\n

Why is this so hard? Well the SciChartGroup inherits the\u00a0WPF ItemsControl. The actual charts are generated by the SciChartGroup.ItemTemplate. There is no reference to these charts at runtime, yet a SciChartOverview needs to bind to a parent surface.<\/p>\n

So this code below, isn’t going to work:<\/p>\n

[xml]
\n<!– This won’t work … –>
\n<Grid>
\n <Grid.RowDefinitions>
\n <RowDefinition Height="*"\/>
\n <RowDefintion Height="Auto"\/>
\n <\/Grid.RowDefinitions><\/p>\n

<!– ItemsControl bound to N Viewmodels, with ItemTemplate showing one chart per view model –>
\n <!– Note: SciChartGroup is an ItemsControl so the same problem applies to multi-paned stock charts –>
\n <ItemsControl Grid.Row="0" ItemsSource="{Binding ChartPaneViewModels}">
\n <ItemsControl.ItemTemplate>
\n <s:SciChartSurface x:Name="sciChart">
\n <!– Omitted for brevity –>
\n <\/s:SciChartSurface>
\n <\/ItemsControl.ItemTemplate>
\n <\/ItemsControl><\/p>\n

<!– Requires binding to SciChartSurface, but we can’t get this if its inside an ItemTemplate! –>
\n <sciChart:SciChartOverview Grid.Row="1" ParentSurface="{Binding ElementName=sciChart}"
\n DataSeries="{Binding ElementName=sciChart, Path=RenderableSeries[1].DataSeries}"
\n SelectedRange="{Binding ElementName=sciChart, Path=XAxis.VisibleRange, Mode=TwoWay}"\/>
\n[\/xml]<\/p>\n

This isn’t going to work. We must have a reference to first the SciChartSurface created by the ItemsControl. This is what our documented workaround on Adding a SciChartOverview to an ItemsControl <\/a>does – it digs into the Visual Tree to find the first item generated by the ItemsControl. That’s fine for ItemsControls, but it also won’t work for SciChartGroup.<\/p>\n

The Solution – using SciChartScrollBar (v3.2 or later)<\/h2>\n

The solution is to use SciChart’s new ScrollBar API, part of v3.2 or later.<\/p>\n

What we’re going to do is include a ScrollBar inside the ItemTemplate for every chart pane, but only show it (Visibility.Visible) for the last chart pane. This gives us full control over the positioning of a scrollbar and ability to customise its background.<\/p>\n

Note<\/strong>: this solution will now work with both SciChartGroup (multi-paned stock charts), or, ItemsControls in WPF or Silverlight, in v3.2 of SciChart or later.<\/p>\n

The Code<\/h4>\n

[xml]
\n<!– Databinds a SciChartGroup to a list of ChartPaneViewModels –>
\n<!– Child chart panes are generated using the ItemTemplate below –>
\n<s:SciChartGroup Grid.Row="1"
\n ItemsSource="{Binding ChartPaneViewModels}"
\n s:ThemeManager.Theme="{Binding ElementName=ThemeCombo, Path=SelectedItem}"
\n ItemContainerStyle="{StaticResource ChartPaneStyle}">
\n <s:SciChartGroup.ItemTemplate>
\n <DataTemplate><\/p>\n

<!– DataTemplate instantiates this View per ChartPaneViewModel –>
\n <!– This includes a SciStockChart, which is a specialized form of SciChartSurface –>
\n <!– which is tailored for Stock Charts (financial charts) with CategoryDateTimeAxis –>
\n <!– –>
\n <!– It also includes a SciChartScrollbar to create a custom overview control, which is Collapsed for all but the last pane –><\/p>\n

<Grid><\/p>\n

<Grid.RowDefinitions>
\n <RowDefinition Height="*"\/>
\n <RowDefinition Height="Auto"\/>
\n <\/Grid.RowDefinitions><\/p>\n

<!– Databinds each child SciStockChart to … –>
\n <!– SeriesSource to BaseChartPaneViewModel.ChartSeriesViewModels –>
\n <!– Axis Properties, like s:StockChartXAxis.VisibleRange to CreateMultiPaneStockChartsViewModel.XVisibleRange –>
\n <!– Axis Properties, like s:StockChartYAxis.GrowBy to BaseChartPaneViewModel.IsFirstChartPane with a converter to change behaviour based on pane position–>
\n <s:SciStockChart x:Name="PART_ChartPaneView"
\n SeriesSource="{Binding ChartSeriesViewModels}"><\/p>\n

<!– Properties omitted for brevity –><\/p>\n

<\/s:SciStockChart><\/p>\n

<!– Displays a SciChartScrollBar bound to the charts XAxis, and visible only for last chart pane –>
\n <Grid Grid.Row="1" Visibility="{Binding IsLastChartPane, Converter={StaticResource BoolToVisibilityConverter}}"><\/p>\n

<!– This is the Chart behind the scrollbar, bound to the First ChartPaneViewModel, first DataSeries –>
\n <!– It displays the data as a FastMountainRenderableSeries –>
\n <s:SciStockChart x:Name="PART_ScrollbarChartBackground"
\n Style="{StaticResource OverviewChartStyle}"><\/p>\n

<s:SciStockChart.RenderableSeries>
\n <s:FastMountainRenderableSeries DataSeries="{Binding ParentViewModel.ChartPaneViewModels[0].ChartSeriesViewModels[0].DataSeries}"\/>
\n <\/s:SciStockChart.RenderableSeries><\/p>\n

<\/s:SciStockChart><\/p>\n

<!– This is the scrollbar, its bound to the PART_ChartPaneView.XAxis above –>
\n <s:SciChartScrollbar
\n Margin="{Binding ElementName=PART_ChartPaneView, Path=Padding, Mode=OneWay}"
\n Axis="{Binding ElementName=PART_ChartPaneView, Path=XAxis }"
\n Style="{StaticResource ScrollBarStyle}"\/>
\n <\/Grid> <\/p>\n

<\/Grid>
\n <\/DataTemplate>
\n <\/s:SciChartGroup.ItemTemplate>
\n<\/s:SciChartGroup>
\n[\/xml]<\/p>\n

Code Walkthrough<\/h4>\n