使用 mvvm 绑定图表绘图仪

Posted 2023-04-01

【中文标题】使用 mvvm 绑定图表绘图仪

【英文标题】：binding chart plotter using mvvm

【发布时间】：2016-11-27 05:58:28

【问题描述】：

我正在尝试使用动态数据显示制作图表。我正在使用 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 有效。您能否告诉我更改，以便我可以在我的 SenderViewmodel.cs 文件中使用 plotter.addline。

【参考方案1】：

使用 MVVM 时，您不能直接定位 UI 元素。与 UI 交互的唯一方法是使用 ViewModel 属性并将它们与 UI 绑定。 你是用 Max 和 MinVoltage 来做的，所以这些工作......

但是 plotter 是一个 UI 元素，如果你想使用它的任何方法，最好的方法是使用某种 MVVM 消息传递 ( mvvm light messenger ) 并在后面的代码中注册该消息看法。这样你就可以使用 UI 元素了。

【参考方案2】：

您可以在视图中声明 viewModel 的实例并将其绑定到视图的 DataContext，如下所示：

public MyViewModel myVM;

添加到视图的构造函数：

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

   this.DataContext = myVM;
   

在视图中声明一个绘图仪，在这里使用来自您的 viewModel 的数据作为数据源，然后调用绘图函数：

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");

希望对您有所帮助。您有什么问题吗？我仍然为您解答。

最好的问候，