[英]Realtime UI and LiveCharts update in MVVM
I'm trying to implement a real-time plot UI, i'm using WPF with the MVVM Pattern and Live-Charts by beto-rodriguez as my plot library, but i have some trouble with updating the graphs in real time.我正在尝试实现一个实时绘图 UI,我正在使用 WPF 与 MVVM 模式和 beto-rodriguez 的实时图表作为我的绘图库,但我在实时更新图表时遇到了一些麻烦。 I know that i have to run multiple threads to update the UI in realtime, but every single way i tried doesn't work (i'm learning C# now).
我知道我必须运行多个线程来实时更新 UI,但是我尝试的每一种方式都不起作用(我现在正在学习 C#)。 I'm confused of how i should properly implement this pattern for the realtime update, and if the plot library is able to do that.
我很困惑我应该如何为实时更新正确实现这种模式,以及绘图库是否能够做到这一点。
This is my actual code (its a simplified version of what i will do and doesn't implement any multithread code)这是我的实际代码(它是我将要做的事情的简化版本,没有实现任何多线程代码)
ModelView Code:模型视图代码:
using System;
using System.ComponentModel;
using System.Windows;
using LiveCharts;
namespace TestMotionDetection
{
class MainViewModel : INotifyPropertyChanged
{
public SeriesCollection Series { get; set; }
public Func<double, string> YFormatter { get; set; }
public Func<double, string> XFormatter { get; set; }
public DataViewModel SData
{
set
{
Series[0].Values.Add(value);
OnPropertyChanged("Series");
}
}
public event PropertyChangedEventHandler PropertyChanged;
public MainViewModel()
{
SeriesConfiguration<DataViewModel> config = new SeriesConfiguration<DataViewModel>();
config.Y(model => model.Value);
config.X(model => model.Time);
Series = new SeriesCollection(config)
{
new LineSeries {Values = new ChartValues<DataViewModel>(), PointRadius = 0}
};
XFormatter = val => Math.Round(val) + " ms";
YFormatter = val => Math.Round(val) + " °";
}
protected virtual void OnPropertyChanged(string propertyName)
{
PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
}
public void generateData()
{
DataViewModel val = new DataViewModel();
for (int i = 0; i < 500; i++)
{
val.Time = i;
val.Value = i + 2.3f;
SData = val;
}
}
}
}
Here is the View code:这是查看代码:
using System.Windows;
namespace TestMotionDetection
{
/// <summary>
/// Logica di interazione per MainWindow.xaml
/// </summary>
public partial class MainWindow : Window
{
private MainViewModel vista;
public MainWindow()
{
vista = new MainViewModel();
DataContext = vista;
}
private void button_Click(object sender, RoutedEventArgs e)
{
vista.generateData();
}
}
}
And the XALM:和 XALM:
<Window x:Class="TestMotionDetection.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:lvc="clr-namespace:LiveCharts;assembly=LiveCharts"
Title="Example 2 (WPF)"
Width="1025.213"
Height="482.801">
<Grid>
<lvc:LineChart Margin="0,2,245,-2"
LegendLocation="Right"
Series="{Binding Series}">
<lvc:LineChart.AxisX>
<lvc:Axis LabelFormatter="{Binding XFormatter}" Separator="{x:Static lvc:DefaultAxes.CleanSeparator}" />
</lvc:LineChart.AxisX>
<lvc:LineChart.AxisY>
<lvc:Axis LabelFormatter="{Binding YFormatter}" />
</lvc:LineChart.AxisY>
</lvc:LineChart>
<Button x:Name="button"
Width="151"
Height="79"
Margin="804,47,0,0"
HorizontalAlignment="Left"
VerticalAlignment="Top"
Click="button_Click"
Content="Button" />
</Grid>
</Window>
Your XFormatter & YFormatter should both be like this:你的 XFormatter 和 YFormatter 都应该是这样的:
private Func<double, string> _yFormatter;
public Func<double, string> YFormatter {
get{ return _yFormatter; }
set
{
_yFormatter = value;
OnPropertyChanged("YFormatter");
}
If you are using C#6 you should do nameof(YFormatter)
instead.如果您使用的是 C#6,则应
nameof(YFormatter)
使用nameof(YFormatter)
。
That will cause the view to update, otherwise the view has no way of knowing that the formatter changed.这将导致视图更新,否则视图无法知道格式化程序已更改。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.