Question

I have a Border with some contents and a Line on a canvas. The Border + contents are draggable and the Line is updated to move with the Border. My problem is that the line is on top of the Border so in some situations it blocks my content. I have tried setting the ZIndex and changed their order in XAML but it doesn’t effect anything. I would hazard a guess it is because the Line is continually being rendered as it changes shape and for some reason outputs to the screen on top. Any way around this?

SOME OF MY CODE

XAML

<Canvas x:Name="canvas"
            MouseDown="Canvas_MouseDown"
            MouseUp="Canvas_MouseUp"
            MouseMove="Canvas_MouseMove">
            <Border BorderBrush="Aqua" BorderThickness="3" Padding="3" Name="bdr"
Background="{StaticResource GradientBackground}" Canvas.ZIndex="99"
                MouseLeftButtonDown="MouseLeftBtnDown">
                <Border.RenderTransform>
                    <TranslateTransform />
                </Border.RenderTransform>
    <button/>
            </Border>
        </Canvas>
        <Polygon
            Canvas.ZIndex="98"
            Name="SpeechPoly"
            Stroke="Aqua" 
            StrokeThickness="2"
            Fill="{StaticResource GradientBackground}">
        </Polygon>

C#

private void Dragging()
{
...
point = bdr.TransformToAncestor(this).Transform(new Point(0, 0));
myPoints.RemoveAt(1);
myPoints.RemoveAt(1);

myPoints.Add(new Point(p.X, p.Y + 50));
myPoints.Add(new Point(p.X, p.Y + 25));
SpeechPoly.Points = myPoints;
}

Answer 1

Crap work around would be to determine where the line is coming from on the border (i.e. right/left hand side, top/bottom) and move it around the border.

UPDATED

if (p.X > myPoints[0].X)//right
{
    if (p.Y + bdr.ActualHeight> myPoints[0].Y)//lower
    {
        myPoints.Add(new Point(p.X, p.Y + 50));
        myPoints.Add(new Point(p.X, p.Y + 25));
    }
    else//higher
    {
        myPoints.Add(new Point(p.X, p.Y + bdr.ActualHeight- 50));
        myPoints.Add(new Point(p.X, p.Y + bdr.ActualHeight - 25));
    }
}
else if (p.X + bdr.ActualWidth > myPoints[0].X)//Middle
{
    if (p.Y + bdr.ActualHeight > myPoints[0].Y)//lower
    {
        myPoints.Add(new Point(p.X + (bdr.ActualWidth / 2) + 25, p.Y));
        myPoints.Add(new Point(p.X + (bdr.ActualWidth / 2), p.Y));
    }
    else if (p.Y + bdr.ActualHeight < myPoints[0].Y)//higher
    {
        myPoints.Add(new Point(p.X + (bdr.ActualWidth / 2) + 25, p.Y + bdr.ActualHeight));
        myPoints.Add(new Point(p.X + (bdr.ActualWidth / 2), p.Y + bdr.ActualHeight));
    }
}
else//left
{
    if (p.Y > myPoints[0].Y)//lower
    {
        myPoints.Add(new Point(p.X + bdr.ActualWidth, p.Y + 50));
        myPoints.Add(new Point(p.X + bdr.ActualWidth, p.Y + 25));
    }
    else//higher
    {
        myPoints.Add(new Point(p.X + bdr.ActualWidth, p.Y + 50));
        myPoints.Add(new Point(p.X + bdr.ActualWidth, p.Y + 25));
    }
}

SOLUTION

Had to have my Line within the same canvas as the border. Seems obvious now… Thanks Vincent!