WPF graph cursor HorizontalCrosshairLength property

[yrnhkn]

Hi, 

In my aplication I use Cursor and RangeCursor on wpf  ni:Graph. 

I want to bind Cursor HorizontalCrosshairlength property to RangeCursor HorizontalRange property. When I change RangeCursor horizontal size I must set to HorizontalCrosshairlength to the same size. But datatypes are different.

I attached screenshot and sample project.

I hope someone can help me with this.

Best Regards.

Hakan

[phansen]

Yes, the range cursor uses data values for the filled area, while the single-point cursor uses relative values for the crosshair.

Instead of using two cursors, it would be easier to customize the display of the range cursor to add crosshairs:

public class CrosshairRangeCursor : RangeCursor {
    private static readonly Range<double> FullRelativeRange = Range.Create( 0.0, 1.0 );

    private readonly RenderTargetOptions _crosshairOptions;

    public CrosshairRangeCursor( ) {
        _crosshairOptions = new RenderTargetOptions( this,
            RenderTargetOption.CreateValue( RenderTargetOptionsProperty.Stroke, Brushes.Red ),
            RenderTargetOption.CreateBinding( RenderTargetOptionsProperty.StrokeThickness, CrosshairThicknessProperty ) );
    }

    protected override void RenderGraphCore( RenderArgs args ) {
        base.RenderGraphCore( args );

        Range<double> horizontalRelativeRange = GetRelativeHorizontalRange( ) ?? FullRelativeRange;
        Range<double> verticalRelativeRange = GetRelativeVerticalRange( ) ?? FullRelativeRange;

        Size pointSize = new Size( 10.0, 10.0 );
        Point relativeCenter = new Point(
            Center( horizontalRelativeRange ),
            Center( verticalRelativeRange ) );
        args.RenderTarget.DrawShape( _crosshairOptions, relativeCenter, PointShape.Ellipse, pointSize );

        double relativeLength = horizontalRelativeRange.Maximum - relativeCenter.X;
        args.RenderTarget.DrawConstantLine( _crosshairOptions, Orientation.Horizontal, relativeCenter, +relativeLength, pointSize.Width / 2.0, 0.0 );
        args.RenderTarget.DrawConstantLine( _crosshairOptions, Orientation.Horizontal, relativeCenter, -relativeLength, pointSize.Width / 2.0, 0.0 );
    }

    private static double Center( Range<double> range )
        => (range.Maximum + range.Minimum) / 2.0;
}

[yrnhkn]

Thanks for your help,

the crosshairs should be dragged up and down when left-clicking with the mouse and I need to get or set the crosshair y-axis value. I guess these features of the cursor crosshair do not exist here.

Best Regards,

Hakan.

[phansen · Accepted solution]

Ah, that makes sense! Definitely no need to re-implement cursor interaction. To have the single-point cursor follow the range cursor, just need to update settings whenever the range cursor changes position:

public MainWindow( ) {
    InitializeComponent( );

    rangeCursor1.PositionChanged += OnRangeCursorPositionChanged;
}

private void OnRangeCursorPositionChanged( object sender, EventArgs e ) {
    // Update the crosshair cursor to fit the new horizontal range.
    Range<double> relativeRange = rangeCursor1.GetRelativeHorizontalRange( ) ?? FullRelativeRange;
    Point relativePosition = cursor1.GetRelativePosition( );
    relativePosition.X = Center( relativeRange );
    cursor1.SetRelativePosition( relativePosition );
    cursor1.HorizontalCrosshairLength = relativeRange.Maximum - relativePosition.X;
}

(Note: this uses helpers defined in the previous code example, and the Label values need to change to x:Name values in the XAML in order to access the components by name.)

[yrnhkn]

Thanks Paul. This works fine.

[yrnhkn]

Hi Paul, There is a problem in that horizantal cursor. The single-point cursor should be dragged up and down when left-clicking with the mouse. But it cannot be moved left and right. I attached two image. I marked  point on first image . When I pressed on that point, the single-point cursor move left and right which we dont want this behaviour. You can see this situation in the second photo.  Our cursor code is below.

Thanks for your help.

  

<ni:Cursor x:Name="ThresholdChannel1"
VerticalCrosshairLength="0"
Foreground="White"
SnapToData="False"
TargetSize="0,0"
Visibility="{Binding Channel1Visibility }"
ValueVisibility="Collapsed" VerticalCursor="SizeNS" Cursor="SizeNS" InteractionMode="Mouse">
<ni:Cursor.CrosshairBrush>
<SolidColorBrush Color="White" Opacity="0.5"/>
</ni:Cursor.CrosshairBrush>
</ni:Cursor>