1

I want to draw lines between ScatterViewItems but it doesn't work with what I already found here. There is a Line, but not connected to the center of the ellipses. Does anybody see my mistake? Here is what I have:

 <Grid>
    <s:ScatterView>
        <s:ScatterViewItem Height="250" Width="500" Background="Transparent" Orientation="0" HorizontalAlignment="Right" Margin="0,70,-764,-70" d:LayoutOverrides="HorizontalAlignment, Width">
            <s:ScatterView Height="250" Width="500" Background="BlueViolet">
                <s:ScatterViewItem Background="Transparent" Center="100,145" Orientation="0">
                    <Label Content="Knoten A" Background="WhiteSmoke" Foreground="Black"/>
                </s:ScatterViewItem>
                <s:ScatterViewItem x:Name="StartItem" CanMove="False" CanRotate="False" Margin="0" Center="10,125" Background="Transparent">
                    <Ellipse Width="10" Height="10" Fill="Transparent" Stroke="Black" Margin="0,0,0,0"/>
                </s:ScatterViewItem>
                <s:ScatterViewItem x:Name="EndItem" CanMove="False" CanRotate="False" Margin="0" Center="490,125" Background="Transparent">
                    <Ellipse Width="10" Height="10" Fill="Transparent" Stroke="Black" Margin="0,0,0,0"/>
                </s:ScatterViewItem>
                <s:ScatterViewItem Background="Transparent">
                    <Canvas Name="LineHost"/>
                </s:ScatterViewItem>
            </s:ScatterView>
        </s:ScatterViewItem>
    </s:ScatterView>
</Grid>

And the c#

 Line line = new Line { Stroke = Brushes.Black, StrokeThickness = 2.0 };
        BindLineToScatterViewItems(line, StartItem, EndItem);
        LineHost.Children.Add(line);

private void BindLineToScatterViewItems(Line line, ScatterViewItem StartItem, ScatterViewItem EndItem)
    {
        BindingOperations.SetBinding(line, Line.X1Property,
                                     new Binding {Source = StartItem, Path = new PropertyPath("ActualCenter.X")});
        BindingOperations.SetBinding(line, Line.Y1Property,
                                     new Binding { Source = StartItem, Path = new PropertyPath("ActualCenter.Y") });

        BindingOperations.SetBinding(line, Line.X2Property,
                                    new Binding { Source = EndItem, Path = new PropertyPath("ActualCenter.X") });
        BindingOperations.SetBinding(line, Line.Y2Property,
                                     new Binding { Source = EndItem, Path = new PropertyPath("ActualCenter.Y") });
    }

line somewhere in the middle

Judith
  • 51
  • 9

2 Answers2

0

The startpoint AND endpoint from your lines is ActualCenter.X/ActualCenter.Y of your Startitem. If the ActualCenter of your Startitem is 10/100, you would draw a line from 10/100 to 10/100, which is a reason why youre not seeing any line. Instead of setting Source = Startitem in the last two lines of your BindLineToScatterViewItems method, try setting Source = EndItem.

Hope this helps.

Florian Gl
  • 5,984
  • 2
  • 17
  • 30
  • Thanks I just saw it, too ;-) Now the line is there but not connected to the ellipses. Any Idea why? – Judith Nov 26 '12 at 14:11
  • Could you post a screenshot of it please? ;) – Florian Gl Nov 26 '12 at 14:13
  • We're sorry, but as a spam prevention mechanism, new users aren't allowed to post images. Earn more than 10 reputation to post images. ^^ – Judith Nov 26 '12 at 14:19
  • I think your LineHost (Canvas) hasnt the same size as the ScatterView, so the coordinates might be correct, but it looks wrong. You could wrap the canvas around your ScatterView: `...` – Florian Gl Nov 26 '12 at 14:51
  • If I have my Canvas outside the ScatterView it is a static line. The problem might be the ScatterViewItem. But I don't know how to give it the right size and position, yet. – Judith Nov 27 '12 at 09:28
  • So what are you actually trying to do? I thought you want to connect these two ellipses, but this wont work with binding if the parent of the line hasnt the same position as the parent of the scatterviewitems which contain the ellipses. So if the LineHost is at 0/0 the line connects the two ellipses. – Florian Gl Nov 27 '12 at 12:23
  • Till now the ScatterViewItem had no fix position. If I give him the 0/0 it works more ore less. I have to play with the positon, but for now in the trial and error phase it works for me. Thanks! – Judith Nov 27 '12 at 12:43
0

If I use Canvas instead of ScatterView and ScatterViewItem and the order ist like this

 <s:ScatterView>
        <Canvas Name="LineCanvas2" Width="500" Height="250" Background="Aquamarine">
            <Canvas Background="Transparent" Name="LineCanvas"/>
            <s:ScatterView Width="500" Height="250" Background="Transparent">
                <s:ScatterViewItem ...

there is no problem with the positioning of the connection lines.

Judith
  • 51
  • 9