How can I position a control at runtime over a another control in a WinRT app?

Question

I have a C# WinRT app. I have a row of thumbnails. When the user presses and holds on a thumbnail I want to "popup" a grid that acts as context menu over the location where the thumbnail is. I have everything working except the positioning of the grid over the target thumbnail. In WinForms this is trivial using the Top/Left properties, but those properties or anything similar don't seem to exist in WinRT.

I have access to the target Image object via the HoldRoutingEventArgs and I have access to the Grid via XAML since it exists at start but with an opacity of 0%. I've even saved off the Rect structure belonging to the target Image object to a Rect property in my ViewModel in the hopes of pulling this off with data binding. I just don't know how to move the Grid to the desired location. How can I do this?

Answer 1

an example:

.A----------------------------
|    .B-----  .C----          |
|    |      | |     |         |
|    |      | |     |         |
|    |      | |     |         |
|     ------   -----          |
|                             |
|                             |
 ----------------------------

where .A represents the margin of you host and .B represents the margin of a Thumbnail and C also covers a thumbnail.

the margin of your grid inside the Host (A) would be the same as the thumbnail you select (this is based on the fact that your grid also is part of the host container). Else you would need to add both Margins for calculating the correct margin.

A.TopMargin = 50 and LeftMargin = 90 B.TopMargin = 5 and leftMargin = 35 C.TopMargin = 5 and LeftMargin = 95

For in code:

BThum = YourSelectedThumbNailAtThatMoment; //either B or C
Grid.TopMargin = AHost.TopMargin + BThum.TopMargin;
Grid.LeftMargin = AHost.LeftMargin + BThum.LeftMargin;