привязка диаграммы плоттер с использованием mvvm

Question

Я пытаюсь сделать графики с использованием динамического отображения данных. Я использую MVVM. Мой senderviewmodel код следующие

 voltagePointCollection = new VoltagePointCollection(); 

     updateCollectionTimer = new DispatcherTimer(); 
     updateCollectionTimer.Interval = TimeSpan.FromMilliseconds(1); 
     updateCollectionTimer.Tick += new EventHandler(updateCollectionTimer_Tick); 
     updateCollectionTimer.Start(); 

     var ds = new EnumerableDataSource<VoltagePoint>(voltagePointCollection); 
     ds.SetXMapping(x => dateAxis.ConvertToDouble(x.Date)); 
     ds.SetYMapping(y => y.Voltage); 
     ((MainWindow)System.Windows.Application.Current.MainWindow).TextBlock1.Text = "Setting Text from My Program"; 
     ((MainWindow)System.Windows.Application.Current.MainWindow).plotter.AddLineGraph(ds, Colors.Green, 2, "Volts"); 
     plotter.AddLineGraph(ds, Colors.Green, 2, "Volts"); // to use this method you need "using Microsoft.Research.DynamicDataDisplay;" 

     MaxVoltage = 3; 
     MinVoltage = -3; 
     //System.IO.StreamReader file = new System.IO.StreamReader("C:\\Users\\niranjan\\Desktop\\sample.txt"); 
     //var sample = file.ReadToEnd(); 
     //tokens = sample.Split(new string[] { "\r\n", "\n" }, StringSplitOptions.None); 
     // here graph ending 

     ResultValue = "N/D"; 
     var wasSent = await _senderBluetoothService.Send(SelectDevice, Data); 
     if (wasSent) 
     { 
      ResultValue = "The data was sent."; 
     } 
     else 
     { 
      ResultValue = "The data was not sent."; 
     } 

Мой view.xaml файл следующие

<d3:ChartPlotter Name= "plotter" Grid.Row="1" Grid.Column="1" Height="244" HorizontalAlignment="Left" Width="1076"> 
     <d3:ChartPlotter.HorizontalAxis> 
      <d3:HorizontalDateTimeAxis Name="dateAxis"/> 
     </d3:ChartPlotter.HorizontalAxis> 
     <d3:Header FontFamily="Georgia" Content="Voltage chart"/> 
     <d3:VerticalAxisTitle FontFamily="Georgia" Content="Voltage [V]" /> 
     <d3:HorizontalAxisTitle FontFamily="Georgia" Content="Time"/> 
     <d3:HorizontalLine Value="{Binding MaxVoltage}" Stroke="Red" StrokeThickness="2"/> 
     <d3:HorizontalLine Value="{Binding MinVoltage}" Stroke="Red" StrokeThickness="2"/> 
    </d3:ChartPlotter> 

Проблема заключается в линии

plotter.AddLineGraph(ds, Colors.Green, 2, "Volts"); 

Это говорит о том, что плоттер не существует текущий контекст. Но привязка MaxVoltage и MinVoltage работает. Не могли бы вы рассказать мне об изменениях, чтобы я мог использовать plotter.addline в моем файле SenderViewmodel.cs.

Answer 1

При использовании MVVM вы не можете напрямую ориентировать элементы пользовательского интерфейса. Единственный способ взаимодействия с вашим пользовательским интерфейсом - использование свойств ViewModel и привязка их к пользовательскому интерфейсу. Вы делаете это с помощью Max и MinVoltage, поэтому они работают ...

Но плоттер является элементом пользовательского интерфейса, если вы хотите использовать любой из его методов, лучший способ сделать это - использовать какой-то MVVM обмена сообщениями (mvvm light messenger) и регистрации на это сообщение в коде позади представления. Таким образом вы можете использовать элемент пользовательского интерфейса.

Answer 2

Вы можете объявить экземпляр вашей ViewModel в пределах вашей точки зрения, и связать его с DataContext в представлении следующим образом:

public MyViewModel myVM; 

Добавить в конструкторе зрения:

public MyView() 
    { 
    .. 
    myVM = new MyViewModel(); 

    this.DataContext = myVM; 
    } 

Объявите плоттера в представлении и здесь используйте данные из вашего видаModel в качестве источника данных, а затем вызовите функцию построения графика:

var ds = new EnumerableDataSource<VoltagePoint>(myVM.voltagePointCollection); 
     ds.SetXMapping(x => dateAxis.ConvertToDouble(x.Date)); 
     ds.SetYMapping(y => y.Voltage); 
     plotter.AddLineGraph(ds, Colors.Green, 2, "Volts"); 

Надеюсь, это поможет. У вас будут вопросы, которые я остану в вашем распоряжении.

С уважением,