Search code examples
c#graphdrawingflowdocument

How to draw Table with graph lines in the FlowDocument?


In my FlowDocument I would like to include a table filled with text and graph lines. Which approach would you recommend? I was thinking about attaching adorner to a table, but I could not accomplish attaching adorner over the whole table so far.

Here is sketch of something that I want to add to the document:

enter image description here

I'm using C# and .NET 4.0


Solution

  • The problem is solved with Grid. Grid is very similair to Table, and it has no problem to contain a Canvas. Here you can see the sample image, and sample of getting the Grid with Canvas together into FlowDocument. You can create same flow document through code too:

    Table with multiple rows, columns and drawing in the cells.

    <FlowDocument PageWidth="600" MinPageWidth="600" PagePadding="0,0,0,0">
      <Section>
        <Paragraph>
          <Grid ShowGridLines="False" Background="#FFFFFFFF" Margin="0,5,0,0">
            <Grid.ColumnDefinitions>
              <ColumnDefinition Width="140"/>
              <ColumnDefinition Width="460"/>
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
              <RowDefinition Height="20"/>
              <RowDefinition Height="20"/>
            </Grid.RowDefinitions>
            <Canvas Background="#FFFFFFFF" Name="Canvas0" Width="460" Height="40" Grid.Column="1" Grid.Row="1">
              <Rectangle Fill="#FFD3D3D3" Width="140" Height="40" Canvas.Left="160" Canvas.Top="0"/>
              <Rectangle Fill="#FFA9A9A9" Width="91" Height="40" Canvas.Left="188" Canvas.Top="0"/>
              <Ellipse Fill="#FF3E00C1" Width="7" Height="7" Canvas.Left="282.978417266187" Canvas.Top="6.5"/>
              <Ellipse Fill="#FF1D00E2" Width="7" Height="7" Canvas.Left="199.508" Canvas.Top="26.5"/>
              <Line X1="286.478417266187" Y1="10" X2="203.008" Y2="30" StrokeThickness="2">
                <Line.Stroke>
                  <LinearGradientBrush StartPoint="0,0" EndPoint="1,0">
                    <LinearGradientBrush.GradientStops>
                      <GradientStop Color="#FF1D00E2" Offset="0"/>
                      <GradientStop Color="#FF3E00C1" Offset="1"/>
                    </LinearGradientBrush.GradientStops>
                  </LinearGradientBrush>
                </Line.Stroke>
              </Line>
            </Canvas>
          </Grid>
        </Paragraph>
      </Section>
    </FlowDocument>