Good Morning/Afternoon,
I am trying to produce a view where the xAxis’s AxisAlignment is Left, but the scrollbar stays on the right. I am attaching an image from the application we are replacing…
It doesn’t appear that the Scrollbar has a Location or Position or WhereDoIDrawMyself property, and that the scrollbar is coupled to the Axis location. I am not sure what approach to take.
Is this even possible?
Thanks,
Mike.
- Michael Dusoe asked 8 years ago
- You must login to post comments
It is of course possible.
Check out our documentation on WPF Chart Scrollbars. It is possible to put the scrollbar outside the axis using the second technique.
Putting a Scrollbar Outside of the SciChartSurface
The scrollbar doesn’t have to be declared on the Axis.Scrollbar property. It can be declared anywhere in your View, and simply bound to the axis via the SciChartScrollbar.Axis property. For instance:
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="32"/>
</Grid.RowDefinitions>
<s:SciChartSurface Grid.Row="0">
<!-- RenderableSeries omitted for brevity -->
<s:SciChartSurface.YAxis>
<s:NumericAxis x:Name="yAxis"/>
</s:SciChartSurface.YAxis>
<s:SciChartSurface.XAxis>
<s:NumericAxis x:Name="xAxis"/>
</s:SciChartSurface.XAxis>
</s:SciChartSurface>
<!-- Declare a scrollbar and bind to XAxis by ElementName binding -->
<s:SciChartScrollbar Grid.Row="1" Margin="6,5,4,5" Axis="{Binding ElementName=xAxis}"/>
</Grid>
So, if you can figure out how to place it then you can bind it like this.
Hope this helps!
- Andrew Burnett-Thompson answered 8 years ago
- You must login to post comments
Thanks Andrew,
Two problems arose, both of which I solved by getting a little “hacky…” Can you suggest anything better?
Problem #1 – The chart surfaces are defined in a contenttemplate that I use for a UserControl that I have providing tiling capabilities. Therefore, I couldn’t use named elements. Solution: relative binding (see below).
Problem #2 – I wanted the height of the Scrollbar to match the “plotting surface”, excluding XAxis data and scrollbars. Solution: Bind to the ModifierSurface.ActualHeight property:
<Grid Grid.Row="0" Grid.Column="0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<s:SciChartSurface Grid.Column="0" DataContext="{Binding}" s:SciChartGroup.VerticalChartGroup="aLine" >
<!-- snip stuff -->
<!-- Create an X Axis -->
<s:SciChartSurface.XAxis >
<chart:WindowedNumericAxis Visibility="{Binding DisplayAxisData, Converter={StaticResource PaneVisibilityConverter}}" VisibleRange="{Binding VisibleX, Mode=TwoWay, Delay=20}" MaxRange="{Binding MaxXRange}" AutoRange="Never">
<chart:WindowedNumericAxis.Scrollbar>
<s:SciChartScrollbar />
</chart:WindowedNumericAxis.Scrollbar>
</chart:WindowedNumericAxis>
</s:SciChartSurface.XAxis>
<!-- Create a Y Axis -->
<s:SciChartSurface.YAxis>
<chart:WindowedDateTimeAxis
FlipCoordinates="{Binding InvertTimeDirection}"
TextFormatting="hh:mm:ss"
VisibleRange="{Binding VisibleY, Mode=TwoWay, Delay=20}"
MaxRange="{Binding MaxYRange}"
AxisAlignment="Left" AutoRange="Never">
</chart:WindowedDateTimeAxis>
</s:SciChartSurface.YAxis>
</s:SciChartSurface>
<s:SciChartScrollbar Grid.Column="1"
Axis="{Binding Path=Children[0].YAxis, RelativeSource={RelativeSource AncestorType=Grid}}"
Height="{Binding Path=Children[0].ModifierSurface.ActualHeight, RelativeSource={RelativeSource AncestorType=Grid}}"
VerticalAlignment="Top"/>
</Grid>
Thank you for the direction!
Mike.
- Michael Dusoe answered 8 years ago
- last edited 8 years ago
-
Hi Michael, I don’t think either of these methods are hacky. The alternatives are to re-write the code of scichart, or re-template the whole surface. I’d say this was a good solution!
- You must login to post comments
Please login first to submit.