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?  

---

-- roschler

Answer 1

Use the MenuFlyout class It will calculate the position automatically. See Quickstart: Adding a MenuFlyout (or look at the Flyout if you want something less menu-y).

The position of an element is controlled by its container. A Canvas provides Top and Left properties for absolute positioning. A Grid positions the item by Row and Column. Other containers calculate the position.

You can find the resulting position in with VisualTreeHelper.FindElementsInHostCoordinates methods and you can use a RenderTransform to translate an element to a desired location.

That said, you'll get better results with less effort using the built in controls rather than implementing a custom solution.

--Rob

Answer 2

Hello Rob,

I have it working now.

Thank!

---

-- roschler