After WPF Polygon binding, the graphics remain unchanged - wpf

Question

I used to assign directly to the set of points, the graphics can be displayed properly, and later found that the performance of doing that is very poor, I thought of using the binding method to do it.
After WPF Polygon binding, the set of points has changed, but the graphics have not changed.
xaml code
<Canvas Background="Black" Name="map">
<Polygon Name="pl" Points="{Binding sendPoints,Mode=TwoWay}"></Polygon>
</Canvas>
backend code
DrawLinesClass drawLinesClass = new DrawLinesClass();
pl.DataContext = drawLinesClass;//bind
pl.Stroke = Brushes.Red;
pl.StrokeThickness = 2;
Thread td = new Thread(() =>
{
double index = 0,sum=0;
while (true)
{
Thread.Sleep(50);
if (isRun)
{
sum+=0.01;
pl.Dispatcher.Invoke(new Action(() =>
{
if (sum * 2 >= map.ActualHeight - 40)
{
sum = 0;
index += 1;
//drawLinesClass.sendPoints.Clear();
}
drawLinesClass.sendPoints.Add(new Point(index * sum, sum * 2));
//pl.Points = drawLinesClass.sendPoints;//no bind
}));
}
}
});
td.IsBackground = true;
td.Start();
bind model
public class DrawLinesClass : INotifyPropertyChanged
{
public event PropertyChangedEventHandler PropertyChanged;
private PointCollection _sendPointsList;
public PointCollection sendPoints
{
get
{
if (_sendPointsList == null) _sendPointsList = new PointCollection();
return _sendPointsList;
}
set
{
//this._sendPointsList = new PointCollection();
this._sendPointsList = value;
OnPropertyChanged("sendPoints");
}
}
private void OnPropertyChanged(string propertyName)
{
if (PropertyChanged != null)
PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
}
}
Now the set of binding points has changed, I hope the graphics can change automatically.

Answer 1

The Binding
Points="{Binding sendPoints}"
where (Mode=TwoWay was pointless) only updates its target property Points if you assign a new value to its source property sendPoints. Just adding points to the existing sendPoints collection as in
drawLinesClass.sendPoints.Add(new Point(index * sum, sum * 2));
won't make the Binding update.
In other scenarios like binding the ItemsSource property of an ItemsControl you would simply use an ObservableCollection for the source property. However, this won't work here. You really have to create a new PointCollection whenever you add a point.
Besides that, better use a DispatcherTimer instead of a Thread with Sleep and Dispatcher.Invoke:
double index = 0,sum=0;
var timer = new DispatcherTimer
{
Interval = TimeSpan.FromMilliseconds(50)
};
timer.Tick += (s, e) =>
{
sum += 0.01;
if (sum * 2 >= map.ActualHeight - 40)
{
sum = 0;
index += 1;
}
var points = new PointCollection(drawLinesClass.sendPoints);
points.Add(new Point(index * sum, sum * 2));
drawLinesClass.sendPoints = points;
};
timer.Start();
To stop the the timer, just call
timer.Stop();
Also better write
private void OnPropertyChanged(string propertyName)
{
PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
}
As a final remark, the Bindings in your view should usually use a common view model, and hence a common DataContext that is assigned at the MainWindow instance. When you explicitly set a Polyline's DataContext in code behind like
pl.DataContext = drawLinesClass;
it is questionably why you would at all bind the Polylines's Points property. Instead of Binding and setting the DataContext, you could as well simply write
pl.Points = drawLinesClass.sendPoints;
and thus even avoid the need for implementing INotifyPropertyChanged. You would also avoid the need for creating a new PointsCollection on each update, because
drawLinesClass.sendPoints.Add(new Point(index * sum, sum * 2))
will now magically work.