如何將點集合繪製爲單獨的圓圈？

Question

我的視圖模型具有PointCollection屬性是這樣的：

public class ViewModel : INotifyPropertyChanged 
{ 
    public event PropertyChangedEventHandler PropertyChanged; 

    private PointCollection points; 
    public PointCollection Points 
    { 
     get { return points; } 
     set 
     { 
      points = value; 
      PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(nameof(Points))); 
     } 
    } 
} 

這通常顯示爲一條折線：

<Polyline Points="{Binding Points}" Stroke="Black" StrokeThickness="2"/> 

我將如何有效地顯示出它作爲獨立的圓的集合？

Answer 1

使用如下所示的綁定轉換器。它將IEnumerable<Point> 轉換成由一組零長度線組成的StreamGeometry。這些被繪製爲圓圈 ，由具有StrokeStartLineCap和StrokeEndLineCap的路徑設置爲Round。

public class LinePointsConverter : IValueConverter 
{ 
    public object Convert(
     object value, Type targetType, object parameter, CultureInfo culture) 
    { 
     var geometry = new StreamGeometry(); 
     var points = value as IEnumerable<Point>; 

     if (points != null && points.Any()) 
     { 
      using (var sgc = geometry.Open()) 
      { 
       foreach (var point in points) 
       { 
        sgc.BeginFigure(point, false, false); 
        sgc.LineTo(point, true, false); 
       } 
      } 
     } 

     return geometry; 
    } 

    public object ConvertBack(
     object value, Type targetType, object parameter, CultureInfo culture) 
    { 
     throw new NotSupportedException(); 
    } 
} 

的路徑是這樣的：

<Path Data="{Binding Points, Converter={StaticResource LinePointsConverter}}" 
     Stroke="Black" StrokeThickness="5" 
     StrokeStartLineCap="Round" StrokeEndLineCap="Round"/>