<p>I think this is a fun engineering-level question.</p>

<p>I need to design a control which displays a line chart.  What I want to be able to do is use a designer to add multiple <code>Pens</code> which actually describe the data and presentation so that it ends up with Xaml something along these lines:</p>

<pre><code>&lt;Chart&gt;
  &lt;Pen Name="SalesData" Color="Green" Data="..."/&gt;
  &lt;Pen Name="CostData" Color="Red" Data="..." /&gt;
  ...
&lt;/chart&gt;
</code></pre>

<p>My first thought is to extend <code>ItemsControl</code> for the <code>Chart</code> class.  Will that get me where I want to go or should I be looking at it from a different direction such as extending <code>Panel</code>?</p>

<p>The major requirement is to be able to use it in a designer without adding any C# code.  In order for that to even be feasible, it needs to retain its structure in the tree-view model.  In other words, if I were working with this in Expression Blend or Mobiform Aurora, I would be able to select the chart from the logical tree or select any of the individual pens to edit their properties.</p>

[{'answer_id': 51997, 'author': 'NotDan', 'author_id': 3291, 'author_profile': 'https://Stackoverflow.com/users/3291', 'pm_score': 0, 'selected': False, 'text': '<p>Another option is to extend Canvas for the chart and extend Shape for the Pens.  Then dynamically draw the shape based on the Color/Data properties.</p>\n'}, {'answer_id': 63996, 'author': 'Jobi Joy', 'author_id': 8091, 'author_profile': 'https://Stackoverflow.com/users/8091', 'pm_score': 3, 'selected': True, 'text': '<p>I would go with Chart as an ItemsControl and its ItemsPanel be a Canvas(For some light use I would go with Grid as ItemsPanel). And each Pen will be a CustomControl derived from PolyLine class. Does that make any sense?</p>\n'}, {'answer_id': 334399, 'author': 'Rhys', 'author_id': 22169, 'author_profile': 'https://Stackoverflow.com/users/22169', 'pm_score': 1, 'selected': False, 'text': '<p>For those interested in making their own control from a personal development point of view (as stated in the original question) then I\'d suggest a structure in this format.</p>\n\n<pre><code>&lt;Chart&gt;\n  &lt;Chart.Pens&gt;\n    &lt;Pen Name="SalesData" Data="{Binding Name=SalesData}" /&gt;        \n    &lt;Pen Name="CostData"&gt;\n      &lt;Pen.Data&gt;\n        &lt;PenData Y="12" X="Jan" /&gt;\n        &lt;PenData Y="34" X="Feb" /&gt;\n      &lt;/Pen.Data&gt;\n    &lt;/Pen&gt;\n  &lt;/Chart.Pens&gt;\n&lt;/Chart&gt;\n</code></pre>\n\n<p>For that you will need to expose a Pens collection in the user control (I would not see this as a derived ItemsControl control).  This derived user control will encapsulate other controls typically a grid to place a label for the heading, labels for the axis names, possibly a Canvas for the drawing area and a ItemsControl to display the items in the Legend.</p>\n\n<hr>\n\n<h2>For those looking for a ready to go solution</h2>\n\n<p>For those looking for a ready to go solution then I\'d check out CodePlex for <a href="http://www.codeplex.com/visifire/Release/ProjectReleases.aspx?ReleaseId=19717" rel="nofollow noreferrer">VisiFire\'s</a> WPF chart control.  It is WPF and Silverlight compatible and it even has a <a href="http://www.visifire.com/silverlight_chart_designer.php" rel="nofollow noreferrer">Silverlight app</a> for you to enter your data &amp; style and have it generate XAML (or HTML) to paste into your application.</p>\n'}]
['https://Stackoverflow.com/questions/49562', 'https://Stackoverflow.com', 'https://Stackoverflow.com/users/93/']