Where do I start designing a Custom Control that contains child objects?

Question

I think this is a fun engineering-level question.

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 Pens which actually describe the data and presentation so that it ends up with Xaml something along these lines:

<Chart>
  <Pen Name="SalesData" Color="Green" Data="..."/>
  <Pen Name="CostData" Color="Red" Data="..." />
  ...
</chart>

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

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.

Answer 1

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?

Answer 2

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.

<Chart>
  <Chart.Pens>
    <Pen Name="SalesData" Data="{Binding Name=SalesData}" />        
    <Pen Name="CostData">
      <Pen.Data>
        <PenData Y="12" X="Jan" />
        <PenData Y="34" X="Feb" />
      </Pen.Data>
    </Pen>
  </Chart.Pens>
</Chart>

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.

---

For those looking for a ready to go solution

For those looking for a ready to go solution then I'd check out CodePlex for VisiFire's WPF chart control. It is WPF and Silverlight compatible and it even has a Silverlight app for you to enter your data & style and have it generate XAML (or HTML) to paste into your application.

Answer 3

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.