How to add a SciChartOverview or Scrollbar with an ItemsControl of charts, or SciChartGroup
Published: 2024-05-02 09:16:41

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

We already have a documented workaround for v2.x or later to <a title="SciChartOverview bound to ItemsControl Templated Item" href="https://www.scichart.com/questions/question/scichartoverview-for-all-templated-items">add a SciChartOverview to appear under the last chart in an ItemsControl</a>. This works fine for ItemsControls, but it won't work with SciChartGroup.

Below, we present a way to add a Scrollbar to the SciChartGroup (multi-paned stock charts) using the new v3.2 ScrollBar API:
<h2>The Problem - Binding to SciChartGroup Templated Items</h2>
Why is this so hard? Well the SciChartGroup inherits the WPF 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.

So this code below, isn't going to work:

[xml]
&lt;!-- This won't work ... --&gt;
&lt;Grid&gt;
   &lt;Grid.RowDefinitions&gt;
      &lt;RowDefinition Height=&quot;*&quot;/&gt;
      &lt;RowDefintion Height=&quot;Auto&quot;/&gt;
   &lt;/Grid.RowDefinitions&gt;

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

   &lt;!-- Requires binding to SciChartSurface, but we can't get this if its inside an ItemTemplate! --&gt;
   &lt;sciChart:SciChartOverview Grid.Row=&quot;1&quot; ParentSurface=&quot;{Binding ElementName=sciChart}&quot;
                           DataSeries=&quot;{Binding ElementName=sciChart, Path=RenderableSeries[1].DataSeries}&quot;
                           SelectedRange=&quot;{Binding ElementName=sciChart, Path=XAxis.VisibleRange, Mode=TwoWay}&quot;/&gt;
[/xml]

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 <a href="https://www.scichart.com/questions/question/scichartoverview-for-all-templated-items">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.
<h2>The Solution - using SciChartScrollBar (v3.2 or later)</h2>
The solution is to use SciChart's new ScrollBar API, part of v3.2 or later.

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.

<strong>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.
<h4>The Code</h4>

[xml]
&lt;!-- Databinds a SciChartGroup to a list of ChartPaneViewModels --&gt;
&lt;!-- Child chart panes are generated using the ItemTemplate below --&gt;
&lt;s:SciChartGroup Grid.Row=&quot;1&quot;
                    ItemsSource=&quot;{Binding ChartPaneViewModels}&quot;
                    s:ThemeManager.Theme=&quot;{Binding ElementName=ThemeCombo, Path=SelectedItem}&quot;
                    ItemContainerStyle=&quot;{StaticResource ChartPaneStyle}&quot;&gt;
    &lt;s:SciChartGroup.ItemTemplate&gt;
        &lt;DataTemplate&gt;

            &lt;!-- DataTemplate instantiates this View per ChartPaneViewModel --&gt;
            &lt;!-- This includes a SciStockChart, which is a specialized form of SciChartSurface --&gt;
            &lt;!-- which is tailored for Stock Charts (financial charts) with CategoryDateTimeAxis --&gt;
            &lt;!--                                                                                 --&gt;
            &lt;!-- It also includes a SciChartScrollbar to create a custom overview control, which is Collapsed for all but the last pane --&gt;

            &lt;Grid&gt;

                &lt;Grid.RowDefinitions&gt;
                    &lt;RowDefinition Height=&quot;*&quot;/&gt;
                    &lt;RowDefinition Height=&quot;Auto&quot;/&gt;
                &lt;/Grid.RowDefinitions&gt;

                &lt;!-- Databinds each child SciStockChart to ... --&gt;
                &lt;!--  SeriesSource to BaseChartPaneViewModel.ChartSeriesViewModels --&gt;
                &lt;!--  Axis Properties, like s:StockChartXAxis.VisibleRange to CreateMultiPaneStockChartsViewModel.XVisibleRange --&gt;
                &lt;!--  Axis Properties, like s:StockChartYAxis.GrowBy to BaseChartPaneViewModel.IsFirstChartPane with a converter to change behaviour based on pane position--&gt;
                &lt;s:SciStockChart x:Name=&quot;PART_ChartPaneView&quot;
                                SeriesSource=&quot;{Binding ChartSeriesViewModels}&quot;&gt;

                    &lt;!-- Properties omitted for brevity --&gt;

                &lt;/s:SciStockChart&gt;

                &lt;!-- Displays a SciChartScrollBar bound to the charts XAxis, and visible only for last chart pane --&gt;
                &lt;Grid Grid.Row=&quot;1&quot; Visibility=&quot;{Binding IsLastChartPane, Converter={StaticResource BoolToVisibilityConverter}}&quot;&gt;

                    &lt;!-- This is the Chart behind the scrollbar, bound to the First ChartPaneViewModel, first DataSeries --&gt;
                    &lt;!-- It displays the data as a FastMountainRenderableSeries --&gt;
                    &lt;s:SciStockChart x:Name=&quot;PART_ScrollbarChartBackground&quot;
                                        Style=&quot;{StaticResource OverviewChartStyle}&quot;&gt;

                        &lt;s:SciStockChart.RenderableSeries&gt;
                            &lt;s:FastMountainRenderableSeries DataSeries=&quot;{Binding ParentViewModel.ChartPaneViewModels[0].ChartSeriesViewModels[0].DataSeries}&quot;/&gt;
                        &lt;/s:SciStockChart.RenderableSeries&gt;

                    &lt;/s:SciStockChart&gt;

                    &lt;!-- This is the scrollbar, its bound to the PART_ChartPaneView.XAxis above --&gt;
                    &lt;s:SciChartScrollbar
                                    Margin=&quot;{Binding ElementName=PART_ChartPaneView, Path=Padding, Mode=OneWay}&quot;
                                    Axis=&quot;{Binding ElementName=PART_ChartPaneView, Path=XAxis    }&quot;
                                    Style=&quot;{StaticResource ScrollBarStyle}&quot;/&gt;
                &lt;/Grid&gt;                        

            &lt;/Grid&gt;
        &lt;/DataTemplate&gt;
    &lt;/s:SciChartGroup.ItemTemplate&gt;
&lt;/s:SciChartGroup&gt;
[/xml]

<h4>Code Walkthrough</h4>
<ul>
<li>The SciChartGroup is an ItemsControl. We declare an ItemTemplate to instantiate some view for each ViewModel in the ItemsSource. This is what gives us our multi-paned charts.</li>
<li>The ItemTemplate includes a SciStockChart (<em>PART_ChartPaneView</em>) and a scrollbar. So one of each is generated for each ViewModel</li>
<li>The Scrollbar area is actually a Grid, and another chart behind it (<em>PART_ScrollBarChartBackground</em>). This is how we create our 'Overview' control.</li>
<li>The Grid containing the ScrollBar is only visible for the last chart, see the Visibility binding <em>Visibility="{Binding IsLastChartPane, Converter={StaticResource BoolToVisibilityConverter}}"</em></li>
<li>The overview chart surface (<em>PART_ChartPaneView</em>) must display a MountainSeries from the first chart panes first series. We do this by binding FastMountainRenderableSeries <em>DataSeries="{Binding ParentViewModel.ChartPaneViewModels[0].ChartSeriesViewModels[0].DataSeries}"</em></li>
</ul>
<h4>How does it look?</h4>
Pretty awesome! We will be including this sample with the v3.2 Create Multi-Paned Stock Charts example, which is due to be released very shortly!

<a href="https://www.scichart.com/wp-content/uploads/2014/11/Screen-Shot-2014-11-01-at-10.30.05.png"><img class="aligncenter size-full wp-image-7641" src="https://www.scichart.com/wp-content/uploads/2014/11/Screen-Shot-2014-11-01-at-10.30.05.png" alt="SciChartGroup with ScrollBar" width="1019" height="545" /></a>