dynamic position of flyout?

Question

I've already looked at the samples. They are horribly outdated and do not address what I'm looking for.

I'm making a custom flyout menu for my texts.  I need the flyout to show up at where the mouse pointer or the finger press position.  I'm using flyout.ShowAt(.....)

What goes in the parentheses for the flyout to show up where the mouse pointer or the finger long press is?

Answer 1

Hi RandyPete,

Flyout is base on it's parent control, but instead you can use popup to customize the size and position.

--James

---

<THE CONTENT IS PROVIDED "AS IS" WITHOUT WARRANTY OF ANY KIND, WHETHER EXPRESS OR IMPLIED>
Thanks
MSDN Community Support

Please remember to "Mark as Answer" the responses that resolved your issue. It is a common way to recognize those who have helped you, and makes it easier for other visitors to find the resolution later.

Answer 2

Can you please share a code snippet or point me to the right direction? I tried popup already but I couldn't figure out how to have it come out where the right click or long press position is.

Answer 3

Hello RandyPete,

You can put popup in the canvas control and than set its X,Y position base on pointer click.

Here is the code to do that.

 var point = e.GetCurrentPoint(mainGrd);
 Canvas.SetLeft(popup, point.Position.X);
 Canvas.SetTop(popup, point.Position.Y);
 popup.IsOpen = true;

Answer 4

I did something differently instead of using a canvas, I register a global right tapped event:

    <Grid x:Name="mainGrid" Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <Button Content="Button" HorizontalAlignment="Left" Height="137" Margin="237,194,0,0" VerticalAlignment="Top" Width="305"/>

        <Popup x:Name="myPopup" IsOpen="False">
            <StackPanel>
                <TextBlock Text="Type some input" FontSize="24.667" />
                <TextBox Width="300" Height="55" />
                <Button Content="Save" />
            </StackPanel>
        </Popup>
    </Grid>

        public MainPage()
        {
            this.InitializeComponent();

            this.AddHandler(UIElement.RightTappedEvent,new RightTappedEventHandler(Grid_RightTapped),true);
        }


        private void Grid_RightTapped(object sender, RightTappedRoutedEventArgs e)
        {
            Point rightTappedPosition = e.GetPosition(mainGrid);

            myPopup.HorizontalOffset = rightTappedPosition.X;
            myPopup.VerticalOffset = rightTappedPosition.Y;
            myPopup.IsOpen = true;
            myPopup.IsLightDismissEnabled = false;

        } 

--James

---

<THE CONTENT IS PROVIDED "AS IS" WITHOUT WARRANTY OF ANY KIND, WHETHER EXPRESS OR IMPLIED>
Thanks
MSDN Community Support

Please remember to "Mark as Answer" the responses that resolved your issue. It is a common way to recognize those who have helped you, and makes it easier for other visitors to find the resolution later.

Answer 5

Thank you!  Both of your answers work wonderfully.

Answer 6

Hello RandyPete,

You can put popup in the canvas control and than set its X,Y position base on pointer click.

Here is the code to do that.

 var point = e.GetCurrentPoint(mainGrd);
 Canvas.SetLeft(popup, point.Position.X);
 Canvas.SetTop(popup, point.Position.Y);
 popup.IsOpen = true;

Question for you.  I ended up using this method.  One thing, though, is I noticed if I right click near the bottom of the screen the popup would still appear below the pointer and half of it would be outside the screen.

Normally, a flyout would relocate itself (top, bottom, right, or left) automatically to avoid going outside the screen.

How would I make sure my popup won't go outside the screen like a flyout?

Answer 7

I think this is the most interesting coding part, if the point.Position.X plus Popup.Width bigger than Canvas.Width, relocate the popup. The same on Y and Canvas.Height.

--James

---

<THE CONTENT IS PROVIDED "AS IS" WITHOUT WARRANTY OF ANY KIND, WHETHER EXPRESS OR IMPLIED>
Thanks
MSDN Community Support

Please remember to "Mark as Answer" the responses that resolved your issue. It is a common way to recognize those who have helped you, and makes it easier for other visitors to find the resolution later.