c# - 如何在自定义 WPF 控件中呈现动态数据，例如折线图？

Question

我正在开发一个 LineGraph 控件，它包含许多影响控件应如何显示其数据的 DependencyProperties。例如，控件包含以下属性以影响其轴:

• AxisStroke - 轴的颜色。
• AxisThickness - 轴的行程粗细。

它还包含显示数字和刻度线的属性

• VerticalTicks - True/False 指示刻度是否沿垂直轴出现
• Horizo​​ntalTicks - True/False 指示刻度是否沿水平轴出现
• VerticalMin - 垂直轴上的最小值(数字)
• VerticalStep - 每个垂直刻度之间的距离
• VerticalMax - 垂直轴上的最大值(数字)
• Horizo​​ntalMin - 横轴上的最小值(数字)
• Horizo​​ntalStep - 每个水平刻度之间的距离
• Horizo​​ntalMax - 水平轴上的最大值(数字)

还有更多属性允许在单个图形上使用不同的线条样式(LineColor、LineThickness、DataPointShape 和 DataPointIcon 仅举几例)。

我的目标是能够在 XAML 中调出我的 LineGraph 以将其插入到 Window 中。我还希望能够在 XAML 中指定这些设置中的每一个，并在 WPF 设计器 中查看控件的新渲染图像。

现在，鉴于要在 LineGraph 上呈现大量几何形状，我认为使用 Canvas 呈现数据是一个不错的选择。不幸的是，当我在 XAML 中工作时，我无法根据控件的宽度和高度计算形状的位置。

是的，必须计算形状的位置，因为图形的数据点是动态的，与刻度相关的信息也是动态的。更不用说，我想沿 LineGraph 的每个轴显示实际值。

所以，我认为我可以像在 C# 代码中进行渲染一样显示此控件。 其他窗口框架有时会提供一个 Render 方法，可用于布置所有子组件。

但是，这样做似乎不太可能，因为 WPF 在很大程度上依赖于 XAML 来实现控件的视觉外观。此外，要求 WPF 设计器必须根据指定的属性和数据显示 LineGraph，C# 代码似乎无法解决问题。

我想我的问题是:

如何在 WPF 控件内动态呈现数据？

我能否在 C# 中指定如何呈现我的控件，从而允许 WPF 设计器反射(reflect)它？

---

旁注:
我已经做了相当多的研究，但我只找到有关如何实现更简单类型的控件的信息。如果您知道任何包含此主题信息的引用资料，请在回答之外随时发布。我会非常乐意学习如何完全做到这一点。

编辑:我使用 Excel 创建了一个图表来详细说明 LineGraph 控件在具有正确数据和属性的情况下可能是什么样子。

Answer 1

我将根据我在 WIN32、WinForm、WPF、WinCE、WP8+WinRT 中实现自定义图形库的经验来回答这个问题，......甚至在 FPGA 上:)

---

从头开始实现是非常困难的。一开始看起来很容易，但您会遇到很多“如果发生这种情况我该怎么办？”。例如，在您上面的图表中，您似乎得到了一个 DataPoint @ (5,100)，它很好地绘制了图表。但是可以说，我添加了另一个 DataPoint @ (5.000000005, 0)。你会如何在你的代码中处理它？您是说图表上的每个像素代表 X 轴上的一个精确值，还是每个像素代表一个 X 值范围？

我建议您使用已经建立的库来做您想做的事情，除非您需要非常具体的东西，比如假设您需要图表上的水平光标(想想 Tektronix 示波器)并且您需要计算两者之间的一些值两个游标.. 那么您可能需要实现自己的自定义游标或在开源游标之上构建。

因此，如果您仍然坚持要创建自己的自定义控件，这里是您问题的答案。

---

如何在 WPF 控件内动态呈现数据？

You can use a WriteableBitmap and create your own primitive drawing library from that. After you're done rendering, set it as the ImageSource of your control. Or you can use WriteableBitmapEx which has GDI like drawing functions already implemented for you.
WriteableBitmapEx CodePlex Page, I also think you can just get it from NuGet as well.
You can also use a <Canvas> and add UI elements to that as well.

---

我能否在 C# 中指定如何呈现我的控件，从而允许 WPF 设计器反射(reflect)它？

This depends on how you create your controls, but yes you can create Properties in your custom control that will appear in the Designer. Allowing you to change it thus updating the display. I would read a lot of tutorials about writing your own custom user control library. They can explain it better than I can in a SO answer. If you implement the properties correctly it should like so.....

---

全尺寸图片:http://i.stack.imgur.com/pmevo.png

将行数从 15 更改为 10 并将起始 Y 偏移量更改为 -1(从而将图形向上移动并使行高很多)

全尺寸图片:http://i.stack.imgur.com/0RKnA.png