c# - WPF 是否有在没有第三方库的情况下进行 2D 图表制作的首选方法？

Question

我想做一个项目，为几乎无形的图表制作一个非常通用的可重用用户控件。我希望在制图方面有所作为，但似乎地球上几乎每个人都免费使用 WPF 工具包或 Sparrow Charts 以第 3 方方式制作图表。有没有人有绑定(bind)或构建完全独立的图表制作方式的经验？我正在考虑做一些通用的事情，比如在 Canvas 上绑定(bind)多段线并通过。我很好奇是否有其他人曾走这条路，并且有关于为事件引发和潜在依赖属性设置绑定(bind)的提示。我正在考虑遵循 MVVM 架构方法并完成大部分与 ViewModel 的绑定(bind)，但我最终希望公开属性以进行更新。

在概念上与此类似(UserControl 嵌入另一个 View 或 MainForm):

<StackPanel>
    <Label x:Name="lblCustomDataGridHeader" Content="{Binding TestText}"  HorizontalAlignment="Center" FontSize="24"/>
    <Canvas Height="260" Width="300">
      <Polyline Points="{Binding Points}" Stroke="LightBlue" StrokeThickness="4" />
    </Canvas>
  </StackPanel>

View 模型属性:

public ViewModel()
{
    TestText = "Line Chart";
    //Obviously some converter or something else here to accept one or many   lines
    Points = "0,260 10,250 20,245 40,200 50,250 80, 200, 140,100";
}

public string TestText {
    get { return _testText; }
    set 
    {
        _testText = value;
        OnPropertyChanged(NameOf(TestText));
    }
}

private string _points;
public string Points {
    get { return _points; }
    set 
    {
        _points = value;
        OnPropertyChanged(NameOf(Points));
    }
}

稍后编辑

我也试过做一个绑定(bind)到一个类的模板化控件

 <Style TargetType="{x:Type local:LineGraph}">
  <Setter Property="Template">
    <Setter.Value>
      <ControlTemplate TargetType="{x:Type local:LineGraph}">
        <Grid>
          <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
          </Grid.RowDefinitions>
          <TextBlock Grid.Row="0" Text="Hello" FontSize="20"/>
          <Border Grid.Row="1" BorderThickness="1" BorderBrush="Black" CornerRadius="15" Margin="10">
            <Canvas Margin="10" x:Name="PART_Canvas">
              <Canvas.LayoutTransform>
                <ScaleTransform ScaleX="1" ScaleY="-1" />
              </Canvas.LayoutTransform>
            </Canvas>
          </Border>
        </Grid>
      </ControlTemplate>
    </Setter.Value>
  </Setter>
</Style>

类(其中一些需要清理，因为我正在使用其他人的实现，它在 VB.NET 中并已转换):

public class LineGraph : Control, INotifyPropertyChanged
{

    //CONSTRUCTOR
    static LineGraph()
    {
        DefaultStyleKeyProperty.OverrideMetadata(typeof(LineGraph), new FrameworkPropertyMetadata(typeof(LineGraph)));
    }

    public event PropertyChangedEventHandler INotifyPropertyChanged.PropertyChanged;

    public void OnPropertyChanged(string info)
    {
        if (PropertyChanged != null) {
            PropertyChanged(this, new PropertyChangedEventArgs(info));
        }
    }


    public static readonly DependencyProperty _Trends = DependencyProperty.RegisterReadOnly("Trends", typeof(Collection<ChartDataSegment>), typeof(LineGraph), new PropertyMetadata(new Collection<ChartDataSegment>())).DependencyProperty;
    public Collection<ChartDataSegment> Trends {
        get { return (Collection<ChartDataSegment>)GetValue(_Trends); }
    }

    public override void OnApplyTemplate()
    {
        base.OnApplyTemplate();
        dynamic canvas = GetTemplateChild("PART_Canvas") as Canvas;
        if (canvas != null && Trends != null) {
            foreach (void trend_loopVariable in Trends) {
                trend = trend_loopVariable;
                DrawTrend(canvas, trend);
            }
        }
    }

    private void DrawTrend(Canvas drawingCanvas, ChartDataSegment Trend)
    {
        dynamic t = Trend as ChartDataSegment;
        if (t != null && t.Points != null) {
            for (int i = 1; i <= t.Points.Count - 1; i++) {
                dynamic toDraw = new Line {
                    X1 = t.Points(i - 1).X,
                    Y1 = t.Points(i - 1).Y,
                    X2 = t.Points(i).X,
                    Y2 = t.Points(i).Y,
                    StrokeThickness = 2,
                    Stroke = t.LineColor
                };
                drawingCanvas.Children.Add(toDraw);
            }
        }
    }

}

public class ChartDataSegment : DependencyObject
{


    public static readonly DependencyProperty _LineColor = DependencyProperty.Register("LineColor", typeof(Brush), typeof(ChartDataSegment), new PropertyMetadata(null));
    public Brush LineColor {
        get { return (Brush)GetValue(_LineColor); }
        set { SetValue(_LineColor, value); }
    }

    public static readonly DependencyProperty _LineThickness = DependencyProperty.Register("LineThickness", typeof(Thickness), typeof(ChartDataSegment), new PropertyMetadata(null));
    public Thickness PointThickness {
        get { return (Thickness)GetValue(_LineThickness); }
        set { SetValue(_LineThickness, value); }
    }

    public static readonly DependencyProperty _Points = DependencyProperty.Register("Points", typeof(ObservableCollection<Point>), typeof(ChartDataSegment), new UIPropertyMetadata(null));
    public ObservableCollection<Point> Points {
        get { return (ObservableCollection<Point>)GetValue(_Points); }
        set { SetValue(_Points, value); }
    }
}

并在 ViewModel 中实现:

var lineTrend1 = new ChartDataSegment {
    LineColor = Brushes.Blue,
    Points = new ObservableCollection<Point>({
        new Point {
            X = 1,
            Y = 1
        },
        new Point {
            X = 50,
            Y = 20
        },
        new Point {
            X = 100,
            Y = 100
        },
        new Point {
            X = 150,
            Y = 130
        }
    })
};

var ctrl = new LineGraph();
ctrl.Trends.Add(lineTrend1);

我最大的担忧不是这可以实现，而是按需注入(inject)项目，不仅是在实例化时，而且在对象已经运行之后，以根据需要不断更新行。 EG:异步调用来更新折线图，而不是托管需要处理然后调用的静态图表。

由于 Stack Overflow 需要有关问题的详细信息，我的直接问题是:“您能否轻松注入(inject)集合(点)的集合(行)并使用具有依赖属性的 Canvas 进行自我更新？”

Answer 1

我制作了我需要的特定类型的图表，和你一样，我没有使用任何第三方库。我一直在寻找它，我发现了这个项目项目:
http://www.codeproject.com/Articles/446888/Custom-Spider-or-Radar-Chart-Control

他们制作了一个类似于以下的图表:



源代码可供下载，并且不使用第三方代码，因此您可以轻松查看它们所做的一切。

要创建图表，只需执行以下操作:

<WpfCharts:SpiderChart Title="Spider chart"  
                   Lines="{Binding Lines}" 
                   Axis="{Binding Axes}" 
                   Minimum="0" 
                   Maximum="1" 
                   Ticks="5" 
                   ShowLegend="True" 
                   LegendLocation="BottomRight" 
                   LegendBackgroundColor="Aquamarine"/> 

正如您所看到的，它已经绑定(bind)了属性。我已经在 MVVM 项目中使用它。

我希望它能引导你找到你正在寻找的东西。