{"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 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] <!– ItemsControl bound to N Viewmodels, with ItemTemplate showing one chart per view model –> <!– Requires binding to SciChartSurface, but we can’t get this if its inside an ItemTemplate! –>The Problem – Binding to SciChartGroup\u00a0Templated Items<\/h2>\n
\n<!– This won’t work … –>
\n<Grid>
\n <Grid.RowDefinitions>
\n <RowDefinition Height="*"\/>
\n <RowDefintion Height="Auto"\/>
\n <\/Grid.RowDefinitions><\/p>\n
\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
\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