How to draw a graph into DataGrid in WPF?

Question

I want to draw a line graph on DataGrid. This will be on the first column of my grid, and the graph is big and spans over all the rows on the data grid.

How would I approach this scenario? Should I use Canvas? If so, should I place one small Canvas per each DataGridCell or can I somehow render a big Canvas on top of the DataGrid?

Answer 1

Well, you could do what you say in your question, which is overlay another control on top of the grid, etc, etc. But synchronizing with scroll, column/row resize could prove to be a nightmare. From my experience, having done this many times, one of the easier ways (in the long run, even though it seems harder at first) is to extract DataGrid Template (using blend) and modify it to your needs.

After you extract DataGrid's Template, there you'll find:

....
<ControlTemplate TargetType="{x:Type DataGrid}">
    <Border ...>
       <ScrollViewer Focusable="false" Name="DG_ScrollViewer" Background="{TemplateBinding Background}">
          <ScrollViewer.Template>
             <ControlTemplate TargetType="{x:Type ScrollViewer}">
                  <Grid x:Name="DG_MainGrid" Background="{TemplateBinding Background}">

That's the grid where the "SelectAllButton" is placed, scrollbars, etc. You can place anything in there align it with whatever columns you got:

you can place a border and put the graph (chart control in it), control the border Width, Height, Margin, etc with Binding, something like this:

<Border Grid.Row="2" Grid.ColumnSpan="2" BorderThickness="2"    
        Width="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Views:MyView}}, Path=ChartBorderWidth}"
        Height="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Views:MyView}}, Path=ChartBorderHeight}"
        Margin="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Views:MyView}}, Path=ChartBorderMargin}">
        <..your charting control>
</Border>

Anyway, this is just a suggestion, when you start doing things in WPF that are custom and more than just out-of-the-box solutions, things are too complicated to give you the exact answer. But I hope this helps..