Bindung Diagrammplotter mit MVVM

Question

Ich versuche, Diagramme mit dynamischen Datenanzeige zu machen. Ich benutze MVVM. Mein senderviewmodel Code ist der folgende

 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."; 
     } 

Meine view.xaml Datei ist die folgende

<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> 

Das Problem in der Leitung ist

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

Er sagt, dass der Plotter nicht existiert in der aktuelle Kontext. Aber bindende MaxVoltage und MinVoltage funktionieren. Könnten Sie mir bitte Änderungen mitteilen, damit ich plotter.addline in meiner SenderViewmodel.cs Datei verwenden kann.

Answer 1

Wenn Sie MVVM verwenden, können Sie nicht direkt auf Benutzeroberflächenelemente abzielen. Die einzige Möglichkeit zur Interaktion mit Ihrer Benutzeroberfläche besteht in der Verwendung von ViewModel-Eigenschaften und deren Bindung an die Benutzeroberfläche. Sie tun das mit Max und MinVoltage, so dass diese Arbeit ...

Aber Plotter ist ein UI-Element, wenn Sie irgendwelche Methoden verwenden möchten, ist der beste Weg, dies zu tun, mit einer Art von MVVM Messaging (mvvm light messenger) und Registrierung für diese Nachricht im Code hinter der Ansicht. Auf diese Weise können Sie das UI-Element verwenden.

Answer 2

Sie können eine Instanz der Ansichtsmodell innerhalb Ihrer Sicht erklären und binden es der Blick auf die Datacontext wie folgt:

public MyViewModel myVM; 

zu Konstruktor Ihrer Ansicht hinzufügen:

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

    this.DataContext = myVM; 
    } 

ein Deklarieren Plotter innerhalb der Ansicht und verwenden Sie hier Daten von Ihrem viewModel als dataSource und dann Aufruf Plotfunktion:

Hoffe es hilft ein bisschen. Solltest du Fragen haben, stehe ich dir zur Verfügung.

Mit freundlichen Grüßen,