SciChart® the market leader in Fast WPF Charts, WPF 3D Charts, iOS Chart, Android Chart and JavaScript Chart Components


I looked at the Multi-pane stock charts example and fail to understand how I can have the height of my panes change dynamically during runtime as function of updated window size (SizeChanged event) or when adjusting the number panes in the chartgroup? Problem with the below code is that when I resize the window only the first pane in chartgroup is changed not any of the other panes. What am I missing? Do I need to also bind the SciChartSurface.Height within the ItemTemplate to Height for each individual pane height? (I commented out the Height property binding in SciChartSurface. Would I need that?). Either way the panes do not resize when the whole window resizes. I made sure the events all fire and “ChartGroupHeight” is properly updated each time the window is resized.

I implemented the following in my view:

    <i:EventTrigger EventName="SizeChanged">
            Command="{Binding UserControlResizedCommand, Mode=OneWay}"
            EventArgsConverterParameter="{Binding ElementName=LayoutRoot}"
            PassEventArgsToCommand="True" />


    <!-- This allows setting the Height of a pane from a viewmodel -->
    <Style x:Key="ChartPaneStyle" TargetType="s:SciChartGroupPane">
        <Setter Property="Height" Value="{Binding ChartGroupHeight, Mode=TwoWay}"/>

    <!-- A number of converters which change parameters of charts based on the IsFirstChartPane property -->
    <resources:BoolToValueConverter x:Key="MinorsPerMajorConverter" TrueValue="4" FalseValue="2"/>
    <resources:BoolToValueConverter x:Key="MaxAutoTicksConverter" TrueValue="8" FalseValue="4"/>
    <resources:BoolToValueConverter x:Key="GrowByConverter" >
        <s:DoubleRange Min="0.02" Max="0.02"/>
        <s:DoubleRange Min="0.02" Max="0.02"/>



        <RowDefinition Height="32" />
        <RowDefinition Height="*" />

    <StackPanel Grid.Row="0" Orientation="Horizontal" Background="Black">
        <TextBlock Text="Dataseries Type:" Margin="5,0" VerticalAlignment="Center" FontSize="12" Foreground="White"/>
        <ComboBox x:Name="ComboBox_ChooseSeriesType" MinWidth="140" Margin="5,3" VerticalContentAlignment="Center"/>
        <TextBlock Text="Theme:" Margin="5,0" VerticalAlignment="Center" FontSize="12" Foreground="White"/>
        <ComboBox x:Name="ComboBox_ChooseTheme" MinWidth="140" Margin="5,3" VerticalContentAlignment="Center"/>

        ItemsSource="{Binding ChartPaneViewModels}"
        s:ThemeManager.Theme="{Binding ElementName=ComboBox_ChooseTheme, Path=SelectedItem}"
        ItemContainerStyle="{StaticResource ChartPaneStyle}">



                    SeriesSource="{Binding ChartSeriesViewModels}">
                    <!--Height = "{Binding Height}">-->

                        <s:DateTimeAxis Visibility="Visible" 
                                        LabelProvider="{Binding XAxisFormatting}" 
                                        VisibleRange="{Binding ParentViewModel.XVisibleRange, Mode=TwoWay}"
                                        GrowBy="0.02, 0.02"/>

                        <s:NumericAxis AxisAlignment="Right"
                                       TextFormatting="{Binding YAxisTextFormatting}" 
                                       GrowBy="0.02, 0.02" 

                        <s:ModifierGroup s:MouseEventGroup="SharedMouseGroup">

                            <!-- Provides Interactivity -->
                            <s:RubberBandXyZoomModifier IsAnimated = "False" IsXAxisOnly = "True" ExecuteOn = "MouseRightButton"/>
                            <s:ZoomPanModifier XyDirection="XYDirection" ClipModeX = "ClipAtExtents" ExecuteOn ="MouseLeftButton" />
                            <s:MouseWheelZoomModifier XyDirection = "XYDirection"/>
                            <s:ZoomExtentsModifier IsAnimated = "False" ExecuteOn = "MouseDoubleClick" />
                            <s:XAxisDragModifier  DragMode = "Scale"/>
                            <s:CursorModifier SourceMode="AllSeries"  UseInterpolation="True"/>
                            <s:LegendModifier ShowLegend="True" LegendPlacement ="Inside" GetLegendDataFor="AllSeries" Margin="10"/>

                            <!-- Provides selection of series and custom styling to the selected series -->
                            <!--<s:SeriesSelectionModifier ReceiveHandledEvents="True">
                                    <Style TargetType="s:BaseRenderableSeries">
                                        <Setter Property="SeriesColor" Value="White"/>
                                        <Setter Property="PointMarkerTemplate">
                                                    <s:EllipsePointMarker Fill="#FF00DC" Stroke="White" Width="7" Height="7"/>

                            <!-- Provides a data source for the legend control -->




  • You must to post comments
Best Answer

Hi there,

Thanks for your question. The SciChartGroup is designed to behave in this way be default – when a window is resized, it affects only the first pane. May I ask you about the desired behavior? Do you expect all panes to scale proportionally?

Concerning the Height property binding in the ItemContainerStyle, you are right. You can alter the height of child panes setting this value, so it’s possible to use it in your scenario to change size of panes during window resizing.

Hope this helps, please feel free to comment if you have any questions,

Best regards,

  • bbmat
    My intention is for all panes to change their height proportionally when the window as a whole is resized. I just want to be able to have all panes change their height proportionally when I resize the window or when I add a new pane (for example, when I specify an identical proportional height for all panes then all existing panes' height should be downward adjusted when I add an additional pane. I am happy to do so manually but I fail to understand how I can implement that (please see below) My question is: You explained that scichartgroup sets up 3 grid rows, row0 being reserved for the primary/first pane, row1 for all child panes and row2 for minimized panes. Can you please provide a code sample that shows how I can actually use the full "real estate" and render all (including first) pane in row1 so that I can manually resize all panes to my liking either upon resizing the window or adding/removing panes? Thanks
  • bbmat
    I ended up keeping the rows as intended and also have the first chart rendered in Row0 (first pane). After correctly setting up the style that binds Height of Chart group pane items to "PaneViewModel.Height" [which by the way is very poorly documented and took many hours to figure out; neither the parent view model nor base nor actual child view models work here. ] everything works now as intended. Thanks
  • You must to post comments
Showing 1 result
Your Answer

Please first to submit.