Question

我正在尝试使用动态数据显示制作图表。我正在使用MVVM。我的senderviewmodel代码如下

Normalize.css

我的view.xaml文件如下

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

问题出在

行

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

它表示绘图仪在当前上下文中不存在。但绑定MaxVoltage和MinVoltage工作。你可以告诉我更改，以便我可以在我的SenderViewmodel.cs文件中使用plotter.addline。

Answer 1

使用MVVM时，无法直接定位UI元素。与UI交互的唯一方法是使用ViewModel属性并将其与UI绑定。您正在使用Max和MinVoltage进行此操作，因此这些工作......

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

Answer 2

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

public MyViewModel myVM;

添加到视图的构造函数：

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

   this.DataContext = myVM;
   }

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

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

希望它有所帮助。如果你有任何问题我仍然可以随时使用。

致以最诚挚的问候，

使用mvvm绑定图表绘图仪

2 个答案: