popup - UWP - A pop-up menu that can be moved within the page

Question

Happy New Year.

I am new to UWP, and I am trying various new things.

I want to make a pop-up menu that can be moved inside the page.

When the user clicks the button, the corresponding menu is displayed, and I want to be able to move within the screen at any time.

It is displayed in a fixed position such as Flyout and Popup and cannot be moved. Do you have any good ideas?

Answer 1

To move the PopUp control, you will need to handle the Pointer events of the content that you put in the PopUp. Then change the position of the PopUp due to the pointer position.

I made a simple demo that you could have a try:

Xaml Code:

 <Grid>
    <StackPanel>
        <Button Content="Show Popup (using Offset)" Click="ShowPopupOffsetClicked"/>
    </StackPanel>
    <Popup VerticalOffset="10" HorizontalOffset="200" x:Name="StandardPopup"  >
        <Border BorderBrush="Black" 
                Background="Gray"
                PointerPressed="StandardPopup_PointerPressed"
                PointerMoved="StandardPopup_PointerMoved"
                PointerReleased="StandardPopup_PointerReleased"
                BorderThickness="2" 
                Width="200" 
                Height="200">
            <StackPanel HorizontalAlignment="Center" VerticalAlignment="Center">
                <TextBlock Text="Simple Popup" FontSize="24.667" HorizontalAlignment="Center"/>
            </StackPanel>
        </Border>
    </Popup>
</Grid>

Code behind:

 public sealed partial class MainPage : Page
{
    public bool isDraging { get; set; }

    public MainPage()
    {
        this.InitializeComponent();
        isDraging = false;

    }

    private void StandardPopup_PointerPressed(object sender, PointerRoutedEventArgs e)
    {
        //enable dragging
        isDraging = true;
        e.Handled = true;
    }

    private void StandardPopup_PointerMoved(object sender, PointerRoutedEventArgs e)
    {
        if (isDraging)
        {
            //get pointer position
            var pointerPosition = Windows.UI.Core.CoreWindow.GetForCurrentThread().PointerPosition;
            var x = pointerPosition.X - Window.Current.Bounds.X;
            var y = pointerPosition.Y - Window.Current.Bounds.Y;
            //change position
            StandardPopup.HorizontalOffset = x-100;
            StandardPopup.VerticalOffset = y-100;
        }

        e.Handled = true;
    }

    private void StandardPopup_PointerReleased(object sender, PointerRoutedEventArgs e)
    {
        //disable dragging
        isDraging = false;
        e.Handled = true;
    }

    private void ClosePopupClicked(object sender, RoutedEventArgs e)
    {
        // if the Popup is open, then close it 
        if (StandardPopup.IsOpen) { StandardPopup.IsOpen = false; }
    }

    // Handles the Click event on the Button on the page and opens the Popup. 
    private void ShowPopupOffsetClicked(object sender, RoutedEventArgs e)
    {
        // open the Popup if it isn't open already 
        if (!StandardPopup.IsOpen) { StandardPopup.IsOpen = true; }
    }
}