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

0
0

Hello,
I have a dependency property inside a class which inherits from YAxisDragModifier, and I get some strange behaviour when trying to bind to it.

When I have the code below then the binding is triggered and everything is fine:

    <StackPanel>
        <RadioButton IsChecked="True" Content="Scale" GroupName="PanScale"/>
        <RadioButton x:Name="PanRadioButton" Content="Pan" GroupName="PanScale"/> 
        <local:CustomYAxisDragModifier YAxisId="yAxis1" 
                                               InteractionType="{Binding Path=IsChecked, ElementName=PanRadioButton, Converter={StaticResource BoolToPanConverter}}" 
                                               />
    </StackPanel>

But when I take the exact same CustomYAxisDragModifier, with the same properties and I put it inside the SciChart:ModifierGroup where it belongs, then the binding stops working.
Is there anything in the logic of your control that prevents the binding from getting triggered?

I have attached a code example for you to get a better idea of what I am trying to do.

  • You must to post comments
0
0

Hi there, I’ve had some time to investigate this today. I don’t know why the binding doesn’t work between the Axis modifier and the RadioButton, but I’ve moved the binding to a viewmodel and it seems to work just fine (full solution attached).

Here’s the code for a viewmodel to hold the IsPanMode property

public class MainViewModel : INotifyPropertyChanged
{
    private bool _isPanMode;
    public event PropertyChangedEventHandler PropertyChanged;

    public bool IsPanMode
    {
        get { return _isPanMode; }
        set 
        {
            _isPanMode = value;
            OnPropertyChanged("IsPanMode");
        }
    }

    protected void OnPropertyChanged(string prop)
    {
        var handler = PropertyChanged;
        if (handler != null)
        {
            handler(this, new PropertyChangedEventArgs(prop));
        }
    }
}

And the Xaml has been adjusted as follows:

<!-- ... -->
<StackPanel>
    <RadioButton IsChecked="True" Content="Scale" GroupName="PanScale"/>
    <RadioButton x:Name="PanRadioButton" Content="Pan" GroupName="PanScale" IsChecked="{Binding IsPanMode, Mode=TwoWay}"/> 

</StackPanel>
<StackPanel>
</StackPanel>
<SciChart:SciChartSurface Grid.Row="1" x:Name="sciChartSurface" SciChart:ThemeManager.Theme="BrightSpark">
    <SciChart:SciChartSurface.ChartModifier>
        <SciChart:ModifierGroup>
            <SciChart:LegendModifier x:Name="legendModifier"/>
            <local:CustomYAxisDragModifier YAxisId="yAxis1" 
                    InteractionType="{Binding IsPanMode, Converter={StaticResource BoolToPanConverter}}" />
<!-- ... -->

The chart scales and pans when you change the radio button.

Finally, well done on creating a custom modifier! 🙂

  • Straliciuc
    Ok, thank you! I had not tried it with a ViewModel. I can live with that.
  • Lisbeth Skogland
    I love this feature. It is just what I was looking for. Thank you Straliciuc for posting it. But I have a follow up question for Andrew on this: If I want this to work with multiple Y-axis, how would I do that?
  • You must to post comments
0
0

Hi Lisbeth,

Straliciuc’s custom modifier inherits YAxisDragModifier, which itself can be used on multiple axis. See this demo (and the code behind) for more information:

SciChart Examples – DragAxisToScale sample

In the code you’ll notice there are multiple YAxisDragModifier’s declared and attached to individual axes:

<!-- Adding the ZoomPanModifier gives SciChart the ability to pan on mouse-drag -->
<sciChart:SciChartSurface.ChartModifier>
    <sciChart:ModifierGroup>
        <sciChart:XAxisDragModifier x:Name="xAxisDragModifier" IsEnabled="True"/>
        <sciChart:YAxisDragModifier x:Name="yAxisLeftDragmodifier" IsEnabled="True" YAxisId="LeftAxisId"/>
        <sciChart:YAxisDragModifier x:Name="yAxisRightDragmodifier" IsEnabled="True" YAxisId="RightAxisId"/>
    </sciChart:ModifierGroup>
</sciChart:SciChartSurface.ChartModifier>

You should be able to use similar markup to declare more than one CustomeYAxisDragModifier 🙂

  • Lisbeth Skogland
    I just tried that, but still it only pans the first y axis. Thought maybe there was something I needed to change in the code to get it to work. It works fine with the YAxisDragModifier in the exact same place.
  • You must to post comments
0
0

Figured it out by myself…

For anyone that might be interested: I just changed the code a little bit in the Pan method. Changed in all places where the property YAxis was used to using GetYAxis(YAxisId). The method should look like this:

        private void Pan(Point currentPoint, Point startPoint)
        {
            var yAxis = GetYAxis(YAxisId);
            var doubleRange = yAxis.VisibleRange.AsDoubleRange();

            double rangeMax = doubleRange.Max;
            double rangeMin = doubleRange.Min;

            double delta = (rangeMax - rangeMin) * (currentPoint.Y - startPoint.Y) / yAxis.Height;

            var newMax = rangeMax + delta;
            var newMin = rangeMin + delta;

            var updateSuspender = ParentSurface.SuspendUpdates();
            using (updateSuspender)
            {
                yAxis.VisibleRange = RangeFactory.NewWithMinMax(yAxis.VisibleRange, newMin, newMax);
            }
  • Andrew
    Hi Lisbeth,I just posted the solution at the same time! Since you have it I've removed my code.Yes that's exactly it! This is because ChartModifierBase.YAxis binds to the first axis (left in for backward compatibility reasons), but ChartModifierBase.GetYAxis(string id) will return a specific axis by ID.This is how the base class works so its the correct solution
  • You must to post comments
Showing 3 results
Your Answer

Please first to submit.