locked
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?

    Wednesday, November 19, 2014 5:49 AM

Answers

  • 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;

    • Proposed as answer by Jamles HezModerator Wednesday, November 19, 2014 2:17 PM
    • Unproposed as answer by RandyPete Wednesday, November 19, 2014 3:30 PM
    • Marked as answer by RandyPete Wednesday, November 19, 2014 8:14 PM
    • Unmarked as answer by RandyPete Thursday, November 20, 2014 2:54 AM
    • Marked as answer by RandyPete Thursday, November 20, 2014 4:33 PM
    Wednesday, November 19, 2014 12:43 PM
  • 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.

    • Proposed as answer by Jamles HezModerator Wednesday, November 19, 2014 2:17 PM
    • Marked as answer by RandyPete Wednesday, November 19, 2014 8:14 PM
    • Unmarked as answer by RandyPete Thursday, November 20, 2014 2:54 AM
    • Marked as answer by RandyPete Thursday, November 20, 2014 4:33 PM
    Wednesday, November 19, 2014 2:17 PM
    Moderator
  • 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.

    • Marked as answer by RandyPete Thursday, November 20, 2014 4:33 PM
    Thursday, November 20, 2014 5:37 AM
    Moderator

All replies

  • 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.

    • Proposed as answer by zee_patel Wednesday, November 19, 2014 9:04 AM
    Wednesday, November 19, 2014 8:54 AM
    Moderator
  • 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.
    Wednesday, November 19, 2014 12:15 PM
  • 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;

    • Proposed as answer by Jamles HezModerator Wednesday, November 19, 2014 2:17 PM
    • Unproposed as answer by RandyPete Wednesday, November 19, 2014 3:30 PM
    • Marked as answer by RandyPete Wednesday, November 19, 2014 8:14 PM
    • Unmarked as answer by RandyPete Thursday, November 20, 2014 2:54 AM
    • Marked as answer by RandyPete Thursday, November 20, 2014 4:33 PM
    Wednesday, November 19, 2014 12:43 PM
  • 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.

    • Proposed as answer by Jamles HezModerator Wednesday, November 19, 2014 2:17 PM
    • Marked as answer by RandyPete Wednesday, November 19, 2014 8:14 PM
    • Unmarked as answer by RandyPete Thursday, November 20, 2014 2:54 AM
    • Marked as answer by RandyPete Thursday, November 20, 2014 4:33 PM
    Wednesday, November 19, 2014 2:17 PM
    Moderator
  • Thank you!  Both of your answers work wonderfully.
    Wednesday, November 19, 2014 8:14 PM
  • 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?

    Thursday, November 20, 2014 1:32 AM
  • 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.

    • Marked as answer by RandyPete Thursday, November 20, 2014 4:33 PM
    Thursday, November 20, 2014 5:37 AM
    Moderator