logo标签列表

使用数据绑定和点集合的折线图实现连续更新

wpfdata-bindingc#-4.0polyline
7


first of all I describe my objective I want to achive. I want to visualise a continuous data stream (maximum 1000 values per second but could be reduced). This data stream should be visualised as a chart - being more precise it's a visualisation of an ECG among other things. My first idea was using polyline and bind it to a point collection. The problem here is that nothing is shown on the UI. Perhaps it's a wrong aproach for this task. Better ideas are welcomed. Here ist my code so far. First the View: 

 
<code><Canvas></code>
  <code><Polyline Points="{Binding Points}" Stroke="Red" StrokeThickness="2" /></code>
<code></Canvas></code>

For the sake of simplicity I use the code-behind even though I use the MVVM-pattern. That's also the reason why I want to use the binding and not just the name of the polyline and add the values. 


public partial class MainWindow : Window
{
   private short[] data = new short[]{ 10,30,50,70,90,110,130,150,170,190,210 };
   private short[] data1 = new short[] { 15,14,16,13,17,12,18,11,19,10,24 };

    public MainWindow()
    {
        InitializeComponent();
        for (int i = 0; i < data.Length; i++)
        {
            Points.Add(new Point(data[i], data1[i]));
        }
    }

    private PointCollection _points = new PointCollection();
    public PointCollection Points
    {
        get { return _points; }
    }

我知道这不是好的编码风格，但对于第一次测试来说足够了。我使用数组数据作为x值，data1作为y值。有人能告诉我这个绑定有什么问题吗？在出现新值时如何连续更新视图？
提前感谢您的帮助。

[Updated new version] The view: 


<code><Window.Resources></code>
        <code><my:PointCollectionConverter x:Key="myPointsConverter"/></code>
<code></Window.Resources></code>
    <code><Grid Name="grid"></code>
        <code><Polyline x:Name="ekglineI" Points="{Binding Points, Converter={StaticResource myPointsConverter}}" Stroke="Red" StrokeThickness="2"  /></code>
        <code><Button Content="Button" Click="button1_Click" /></code>
<code></Grid></code>
The code-behind which draws a polyline on startup and later on when a button is clicked. 

public partial class MainWindow : Window, INotifyPropertyChanged
    {
        private short[] data = new short[] { 10, 30, 50, 70, 90, 110, 130, 150, 170, 190, 210 };
        private short[] data2 = new short[] { 230, 250, 270, 290, 300, 310, 330, 350, 370, 390, 410 };
        private short[] data1 = new short[] { 15, 14, 16, 13, 17, 12, 18, 11, 19, 10, 24 };

public MainWindow() { InitializeComponent(); // 将当前窗口作为 DataContext 分配给网格 grid.DataContext = this; for (int i = 0; i < data.Length; i++) { // 添加数据点 Points.Add(new Point(data[i], data1[i])); } } // 定义属性更改事件 public event PropertyChangedEventHandler PropertyChanged; // 创建一个可观察的集合 Points private ObservableCollection _points = new ObservableCollection(); public ObservableCollection Points { get { return _points; } }

    private void button1_Click(object sender, RoutedEventArgs e)
    {
        for (int i = 0; i < data2.Length; i++)
        {
            Points.Add(new Point(data2[i], data1[i]));
        }
        PropertyChanged(this, new PropertyChangedEventArgs("Points"));
    }

现在我想做的是去掉这行代码：grid.DataContext = this; 这样我就可以使用我的MVVM模式，还有其他可能性吗？
3个回答
10
为了成功将Polyline的Points属性绑定到您的视图模型上（即在绑定的PointCollection更改时更新它），您应避免将PointCollection作为集合进行更改（如Clear，Add等）。即使使用自定义转换器绑定到一个ObservableCollection中的Points，Polyline也不会注意到这一点。
相反，您应该将您的PointCollection视为一个属性：使用新创建的PointCollection设置它，并触发NotifyPropertyChanged事件：
    private PointCollection points = new PointCollection();
    public PointCollection Points 
    {
        get { return points; }
        set
        {
            points = value;
            NotifyPropertyChanged("Points");
        }
    }

    public void SomeUpdateFunc() 
    {
        PointCollection pc = new PointCollection();

        // Do some adding: pc.Add(new Point(x, y)); etc

        this.Points = pc; // set via the setter, so the notification will fire
    }

现在折线应该已经成功更新了，祝你好运！

2

至少有一种可能的方法可以移除grid.DataContext = this;

将Binding to RelativeSource添加到网格本身。在这种情况下，xaml文件看起来像：

<Window x:Class="WpfApplication2.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="MainWindow" Height="350" Width="525" xmlns:my="clr-namespace:WpfApplication2">
<Grid Name="grid" DataContext="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType=my:MainWindow, AncestorLevel=1}}">
    <Canvas>
        <Polyline Points="{Binding Points}" Stroke="Red" StrokeThickness="2" />
    </Canvas>
</Grid>

而代码的背后将会是这样的

 using System;
 using System.Collections.Generic;
 using System.Collections.ObjectModel;
 using System.Linq;
 using System.Text;
 using System.Windows;
 using System.Windows.Controls;
 using System.Windows.Data;
 using System.Windows.Documents;
 using System.Windows.Input;
 using System.Windows.Media;
 using System.Windows.Media.Imaging;
 using System.Windows.Navigation;
 using System.Windows.Shapes;
 using System.ComponentModel;

 namespace WpfApplication2
 {
    public partial class MainWindow : Window , INotifyPropertyChanged
    {
        public MainWindow()
        {
            InitializeComponent();

            for (int i = 0; i < data.Length; i++)
            {
                 Points.Add(new Point(data[i], data1[i]));
            }
            NotifyPropertyChanged("Points");                
        }

        private void NotifyPropertyChanged(String info)
        {
            if (PropertyChanged != null)
            {
                PropertyChanged(this, new PropertyChangedEventArgs(info));
            }
        }

        public PointCollection Points { get { return _points; } }

        public event PropertyChangedEventHandler PropertyChanged;
        private PointCollection _points = new PointCollection();
        private short[] data = new short[] { 10, 30, 50, 70, 90, 110, 130, 150, 170, 190, 210 };
        private short[] data1 = new short[] { 15, 14, 16, 13, 17, 12, 18, 11, 19, 10, 24 };


    }
}
2
为了使更改通知传播到您的绑定，您应该使用实现更改通知的集合，而PointCollection并不具备此功能。您可以创建自己的集合，但我建议使用ObservableCollection<T>。
此外，这里有一个类似的SO post，它还涉及到其他几种使UI意识到您的更改的选项。
好的，我也尝试了这种方法。对于我的ObservableCollection<Point>，是否有必要使用ValueConverter？因为在将PointCollection更改为ObservableCollection<Point>后，应用程序运行但没有任何可见内容，尽管集合中有值。 - Kai Krupka
如果你正在使用Points属性，那么你不需要这样做，因为它是一个DP。确保输出窗口中没有错误，因为绑定的路径可能会出错。如果你正在将ObservableCollection<Point>传递到DataContext中，那么它将简单地成为Points="{Binding}"。 - Aaron McIver
System.Windows.Data错误：1：无法创建默认转换器以执行“单向”类型之间的转换“System.Collections.ObjectModel.ObservableCollection1[System.Windows.Point]”和“System.Windows.Media.PointCollection”。请考虑使用Binding的Converter属性。BindingExpression：Path =; DataItem ='ObservableCollection1'（HashCode = 45943265）;目标元素为'Polyline'（Name ='pline'）;目标属性为'Points'（类型为'PointCollection'） - Kai Krupka
关于INotifyCollectionChanged怎么样？我也需要实现它吗？ - Kai Krupka
添加一个ValueConverter并将ObservableCollection转换为PointCollection。或者创建一个实现INotifyCollectionChanged的自定义PointCollection。你可以先使用第一种方法进行测试，但是在我看来，自定义集合才是正确的方式。 - Aaron McIver
显示剩余15条评论
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接