add one xaml based usercontrol to another on mouse event

Question

I have three xaml files + their code behind files in my Silverlight (C#) web project.

One is the MainPage.xaml, which is what gets rendered in the browser.

The other two (lets call them Dot and Box) are custom usercontrols.

When the webpage loads, Dots get added to random locations in a sub-canvas in MainPage xml.

I would like to add a Box to a Dot's location when the user mouses over the Dot. Here is my code behind for Dot:

public partial class Dot : UserControl

{ public string grbId {get; set;}

public Dot() { // Required to initialize variables InitializeComponent(); }

    private void UserControl_MouseEnter(object sender, MouseEventArgs e)
    {
        //
        //HtmlPage.Window.Alert(grbId);

        MainPage mp = new MainPage();
        Box idWindow = new Box();
        idWindow.textBlock.Text = grbId;

        // I added the following two lines because I thought it was being 
        // rendered behind Skymap but that is not the case.
        Canvas.SetZIndex(idWindow, 5);
        Canvas.SetZIndex(mp.SkyMap, -1);

        idWindow.IsEnabled = true;

        // Grow is animation storyboard
        idWindow.Grow.Begin();

        // SkyMap is a canvas inside my LayoutRoot canvas in MainPage.
        mp.SkyMap.Children.Add(idWindow);            
    }

}

The MouseEnter event fires properly and the HtmlPage alert works just fine. But the Box never gets drawn. I have added the same code to the MainPage OnLoad event and it works fine. Can someone please tell me what I am missing? I would appreciate any help you can provide.

Please let me know if I am leaving out important information to solve the problem. Thanks!

Answer 1

I had searched every keyword combo I could think of before posting this question. Apparently, they were not the keywords the search engines wanted.

I was able to finally find my answer here: http://forums.silverlight.net/forums/p/123126/278060.aspx