Update Class Position Dynamically

Hi,

Aim:

I want to connect the item in the left side with the right side.

But when i move the scroll bar(in any side) i want to move the line accordingly.

(For ex: "A" is connected to "Fog". When i move the listbox(on the right side), consider now Fog reaches the top. so the line should be updated accordingly.**Mentioned as the Red dotted line ***.)

What i have is:-

 <ListBox  ItemsSource="{Binding Key}" ScrollViewer.ScrollChanged="List1_ScrollChanged">
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <StackPanel Orientation="Horizontal">
                        <TextBlock Text="{Binding}" />
                        <Obj:CustomEllipse Background="Red"  MouseLeftButtonDown="Left_MouseLeftButtonDown" />
                    </StackPanel>
                </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox>

For this dynamic line update concept what i thought is:-

CustomEllipse  is a class which inherits from border. It is having a Point object. I am having a timer and on timer tick i am trying to update the Point where it resides.

Ex:

public class CustomEllipse : Border
    {
        Timer timer = null;
        Point currentPoint;

        public CustomEllipse()
        {
            timer = new Timer();
            timer.Tick += new EventHandler(timer_Tick);
            timer.Start();
        }

        void timer_Tick(object sender, EventArgs e)
        {
            currentPoint = new Point();
            currentPoint = Mouse.GetPosition(this);
        }
    }
}

I know this is not good.

I thought that to inherit from something like MouseMoveArgs and to have updated point of it dynamically. But i am unable.

May i kindly how to replace this. If possible pls provide a good example for this problem.

Thanks in advance.

NANDAKUMAR.T