Pre loader

GridLine styling in Xaml

Welcome to the SciChart Forums!

  • Please read our Question Asking Guidelines for how to format a good question
  • Some reputation is required to post answers. Get up-voted to avoid the spam filter!
  • We welcome community answers and upvotes. Every Q&A improves SciChart for everyone

WPF Forums | JavaScript Forums | Android Forums | iOS Forums

0
0

Hi,

i’d like to style my major and minor grid lines so that they are not visible over the whole width of the chart but only in the center.
I tried to asign them a LinearGradientBrush, but that did not show the Gridline at all, clipping did not change anything on the visual appearance of the Gridlines. Are these stylings not supported for grid lines?

My styling of grid lines and axes look as the following:

<Setter Property="MajorGridLineStyle">
    <Setter.Value>
        <Style TargetType="{x:Type Line}">
            <Setter Property="Stroke" Value="DarkRed" />
            <Setter Property="StrokeThickness" Value="1" />
        </Style>
    </Setter.Value>
</Setter>
<Setter Property="MinorGridLineStyle">
    <Setter.Value>
        <Style TargetType="{x:Type Line}">
            <Setter Property="Stroke" Value="Gray" />
            <Setter Property="StrokeThickness" Value="1" />
        </Style>
    </Setter.Value>
</Setter>
...
<s:SciChartSurface.XAxis>
            <s:NumericAxis VisibleRange="{Binding ScaleBarRange}"
                           FlowDirection="RightToLeft"
                           MajorDelta="5"
                           DrawMajorGridLines="True"
                           MinorDelta="1"
                           DrawMinorGridLines="True"
                           Style="{StaticResource ScaleStyle}">
            </s:NumericAxis>
        </s:SciChartSurface.XAxis>
        <s:SciChartSurface.YAxis>
            <s:NumericAxis Visibility="Collapsed"
                           DrawMajorGridLines="False" />
        </s:SciChartSurface.YAxis>

I attached an image that shows approximately how i’d like it to be and i already have a workaround using two surfaces overlayed over each other, but that one i’d really like to get rid of.
I’d be thankful for a hint that allows me to individually crop/clip grid lines.

Thanks,
Martin

Version
4.0.4.8098
Images
  • You must to post comments
0
0

Hi Martin,

That’s not possible with SciChart out of the box I’m afraid. the Gridline Style is used to translate into drawing commands which are drawn using our software or DirectX renderer (not with WPF) so setting properties like alignment won’t work.

What you can do however is to use our APIs to draw directly onto the axis surface.

Have a look at overriding AxisBase (e.g. inherit from NumericAxis) and overriding DrawGridLines. Something like this:

public class NumericAxisEx : NumericAxis
{
    protected virtual void DrawGridLine(IRenderContext2D renderContext, Style gridLineStyle, IEnumerable<float> coordsToDraw)
    {
        var direction = IsHorizontalAxis ? XyDirection.XDirection : XyDirection.YDirection;

        LineToStyle.Style = gridLineStyle;
        ThemeManager.SetTheme(LineToStyle, ThemeManager.GetTheme(this));

        using (var linePen = renderContext.GetStyledPen(LineToStyle))
        {
            if (linePen == null || linePen.Color.A == 0) return;

            foreach (var coord in coordsToDraw)
            {
                DrawGridLine(renderContext, linePen, direction, coord);
            }
        }
    }

    /// <summary>
    /// Draws a single grid line on the <see cref="RenderSurface"/>, using the specified Style (TargetType <see cref="Line"/>), <see cref="XyDirection"/> and integer coordinate.
    /// </summary>
    /// <remarks>If direction is <see cref="XyDirection.XDirection"/>, the coodinate is an X-coordinate, else it is a Y-coordinate</remarks>
    /// <param name="renderContext">The <see cref="IRenderContext2D"/> instance to draw to</param>
    /// <param name="linePen">The pen (TargetType <see cref="IPen2D"/>) to apply to the grid line</param>
    /// <param name="direction">The X or Y direction to draw the  </param>
    /// <param name="atPoint">The integer coordinate to draw at. If direction is <see cref="XyDirection.XDirection"/>, the coodinate is an X-coordinate, else it is a Y-coordinate</param>
    protected virtual void DrawGridLine(IRenderContext2D renderContext, IPen2D linePen, XyDirection direction, float atPoint)
    {
        var renderSurface = RenderSurface;
        if (renderSurface == null) return;

        var strokeThickness = linePen.StrokeThickness;
        // Add strokeThickness to cut off line's round ends
        var pt1 = direction == XyDirection.YDirection
            ? new Point(-strokeThickness, atPoint)
            : new Point(atPoint, -strokeThickness);
        var pt2 = direction == XyDirection.YDirection
            ? new Point(renderSurface.ActualWidth + strokeThickness, atPoint)
            : new Point(atPoint, renderSurface.ActualHeight + strokeThickness);

        // HERE: Change pt1 and pt2 X to make the line shorter 
        renderContext.DrawLine(linePen, pt1, pt2);
    }
}

You will need version 4.2.6.10612 which is building now and wil be published to NuGet shortly, as I made some methods virtual and public so that this will work.

Best regards,
Andrew

  • Martin Godec
    Hi Andrew, thanks to your answer, since i did update already to the newest version i’ll most likely give it a try when i’ve time. Best, Martin
  • You must to post comments
Showing 1 result
Your Answer

Please first to submit.

Try SciChart Today

Start a trial and discover why we are the choice
of demanding developers worldwide

Start TrialCase Studies