Winrt - Adjusting flyout according to where it appears

Question

I have a GridView in a windows store project, that contains some big squares, and inside those i have a list of user images, when i tap on of those images a flyout appears on the right showing some information like this.

the problem is that my gridview extends to the edges of the screen and beyond, and when that does i get this situation, i press the user with the red border near the edge of the screen and flyout appears on left.

My flyout placement is set to Right, and im guessing since the element i press is near the edge it follows the Fall back order with according to this is Right > Left > Top > Bottom.

What i would like to know is how to detect this happens, so i can adjust my flyout position, or another viable alternative :)

Answer 1

After searching through properties and Dependency properties on Flyout and FlyoutBase, I haven't found a way to simply get the actual placement of the Flyout (which is unfortunate because I think that can be important, as we see in your case). Perhaps you can try what was proposed here by implementing a method that compares the desired size of the Flyout with the available space.

Answer 2

You can subscribe to FlyOut.Opened event and compare absolute coordinates of the flyout and the element you're showing it at. Here is an example for top/bottom flyout placement (easily extendable to check for left/right as well):

    private void FlyOut_Opened(object sender, object e)
    {
        GeneralTransform flyOutTransform = 
            flyOut.Content.TransformToVisual(Window.Current.Content);
        Point flyOutPosition = 
            flyOut.TransformPoint(new Point(0, 0));

        GeneralTransform showAtElementTransform = 
            showAtElementTransform.TransformToVisual(Window.Current.Content);
        Point showAtElementPosition = 
            showAtElementPosition.TransformPoint(new Point(0, 0));

        if(flyOutPosition.Y < showAtElementPosition.Y)
        {
            // top
        }
        else
        {
            // bottom
        }
    }