Drawing Lines On a Canvas From Grid to Grid as Added Programmatically

Question

I have a Canvas that is bound to a List

  <ItemsControl x:Name="MyCanvasControl" ItemsSource="{Binding Nodes}" Grid.Column="2">
            <ItemsControl.ItemsPanel>
                <ItemsPanelTemplate>
                    <Canvas x:Name="NodeCanvas" >
                        <Canvas.Style>
                            <Style>
                                <Setter Property="Panel.Background" Value="Gray"/>
                            </Style>
                        </Canvas.Style>
                    </Canvas>
                </ItemsPanelTemplate>
            </ItemsControl.ItemsPanel>
        </ItemsControl>

So I made multiple grids each with a rectangle inside of them. I add the grids to my Grid List which is bound to the Canvas. They appear fine. I make a special grid with a special rectangle and I place it on the far end of the canvas.

This special grid will be my "TargetGrid". I want every grid I made previously in the collection to have a unique line drawn from them to my "target grid"

               Point p = TargetGrid.TransformToAncestor(MainWindowView.getInstance().MyCanvasControl).Transform(new Point(0, 0));
                Grid g = new Grid();
                g.Name = "line";
                Line RC = new Line();
                g.Children.Add(RC);
                foreach (Grid gr in Nodes)
                {
                        if(gr.Name != "line")
                       {
                         RC.X1 = Canvas.GetLeft(gr);
                         RC.Y1 = Canvas.GetTop(gr);
                         RC.Y2 = p.Y - RC.Y1;
                         RC.X2 = p.X - RC.X1;
                         Canvas.SetLeft(g, RC.X1);
                         Canvas.SetTop(g, RC.Y1);
                         RC.Stroke = System.Windows.Media.Brushes.Blue;
                         RC.StrokeThickness = 2;
                         Nodes.add(RC);
                       }
                }

What happens is peculiar. Every line hits TargetGrid fine. So the endpoints are correct (Y2 and X2). What isn't correct are the X1 and Y1 for some reason and I can't figure out why. They're correct for grid 1 and 3, but every grid after that gets lines that are all over the place. And the coordinates seem perfectly fine too! X1 and Y1 are exactly where I expect them to be.

If I get a picture later, I'll show it.

EDIT: And if I do exactly what I do with p and my TargetGrid...

Point pp = gr.TransformToAncestor(MainWindowView.getInstance().MyCanvasControl).Transform(new Point(0, 0));

The pp.x and pp.y is ALWAYS 0,0 as if the grids aren't sitting in the canvas control. But curiously enough TargetGrid is always there and it gets a point just fine doing this.

Edit 2: Image http://imgur.com/GOnEmfp

user99999991 user99999991 · Accepted Answer · 2014-03-20T15:06:25

      RC.X2 = p.X;
      RC.Y2 = p.Y;
      Canvas.SetLeft(g, Canvas.GetLeft(gr));
      Canvas.SetTop(g, Canvas.GetTop(gr));

The solution was to leave X1 and Y1 at 0. They origin point is the grid itself which will be positioned ~over~ the other grids. So instead of trying to align the lines with the other grids, I just needed to let the grids align the lines if you will through their origin.

Drawing Lines On a Canvas From Grid to Grid as Added Programmatically

1 Answers