How can I move a WPF Popup when its anchor element moves?

WpfPopupBinding

Wpf Problem Overview


I have a Popup defined like this:

<Popup
    Name="myPopup"
    StaysOpen="True"
    Placement="Bottom"
    PlacementRectangle="0,20,0,20"
    PlacementTarget="{Binding ElementName=myPopupAnchor}">
    <TextBlock ... />
</Popup>

I have added event handlers to the myPopupAnchor element for the events MouseEnter and MouseLeave. The two event handlers toggle the popup's visibility.

My problem is the position of myPopupAnchor is only read when the popup is first shown, or hidden and then shown again. If the anchor moves, the popup does not.

I'm looking for ways to work around this, I want a moving Popup. Can I notify WPF that the PlacementTarget binding has changed and should be read again? Can I manually set the popup's position?

Currently, I have a very crude workaround that involves closing and then opening the popup again, which causes some repainting issues.

Wpf Solutions


Solution 1 - Wpf

I looked at a couple options and samples out there. The thing that seems to work best for me is to "bump" one of the properties that causes the Popup to reposition itself on its own. The property that I used is HorizontalOffset.

I set it to (itself + 1) and then set it back the original value. I do this in an event handler that runs when the window is repositioned.

// Reference to the PlacementTarget.
DependencyObject myPopupPlacementTarget;

// Reference to the popup.
Popup myPopup; 

Window w = Window.GetWindow(myPopupPlacementTarget);
if (null != w)
{
    w.LocationChanged += delegate(object sender, EventArgs args)
    {
        var offset = myPopup.HorizontalOffset;
        myPopup.HorizontalOffset = offset + 1;
        myPopup.HorizontalOffset = offset;
    };
}

When the window is moved, the popup will reposition. The subtle change in the HorizontalOffset is not noticed because the window and popup are already moving anyway.

I'm still evaluating whether a popup control is the best option in cases where the control stays open during other interaction. I'm thinking that Ray Burns suggestion to put this stuff in an Adorner layer seems like a good approach for some scenarios.

Solution 2 - Wpf

Just to add on to NathanAW's great solution above, I thought I'd point out some context, such as where to place the C# code in this case. I'm still pretty new to WPF so I struggled at first to figure out where to put NathanAW's code. When I tried putting that code in the constructor for the UserControl that hosted my Popup, Window.GetWindow() always returned Null (so the "bump" code never executed). So I thought that other newbies might benefit from seeing things in context.

Before showing the C# in context, here's some example XAML context to show some relevant elements and their names:

<UserControl x:Class="MyNamespace.View1"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" >

    <TextBlock x:Name="popupTarget" />
    <Popup x:Name="myPopup"
           Placement="Bottom"
           PlacementTarget="{Binding ElementName=popupTarget}" >
         (popup content here)
    </Popup>
</UserControl>

Then in the code-behind, to avoid having Window.GetWindow() return Null, wire up a handler to the Loaded event to house NathanAW's code (see Peter Walke's comment on a similar stackoverflow discussion for example). Here's exactly how it all looked in my UserControl code-behind:

public partial class View1 : UserControl
{
    // Constructor
    public View1()
    {
        InitializeComponent();

        // Window.GetWindow() will return Null if you try to call it here!             

        // Wire up the Loaded handler instead
        this.Loaded += new RoutedEventHandler(View1_Loaded);
    }

    /// Provides a way to "dock" the Popup control to the Window
    ///  so that the popup "sticks" to the window while the window is dragged around.
    void View1_Loaded(object sender, RoutedEventArgs e)
    {
        Window w = Window.GetWindow(popupTarget);
        // w should not be Null now!
        if (null != w)
        {
            w.LocationChanged += delegate(object sender2, EventArgs args)
            {
                var offset = myPopup.HorizontalOffset;
                // "bump" the offset to cause the popup to reposition itself
                //   on its own
                myPopup.HorizontalOffset = offset + 1;
                myPopup.HorizontalOffset = offset;
            };
            // Also handle the window being resized (so the popup's position stays
            //  relative to its target element if the target element moves upon 
            //  window resize)
            w.SizeChanged += delegate(object sender3, SizeChangedEventArgs e2)
            {
                var offset = myPopup.HorizontalOffset;
                myPopup.HorizontalOffset = offset + 1;
                myPopup.HorizontalOffset = offset;
            };
        }
    }
}

Solution 3 - Wpf

    private void ppValues_Opened(object sender, EventArgs e)
    {
        Window win = Window.GetWindow(YourControl);
        win.LocationChanged += new EventHandler(win_LocationChanged);            
    }
    void win_LocationChanged(object sender, EventArgs e)
    {
        if (YourPopup.IsOpen)
        {                
            var mi = typeof(Popup).GetMethod("UpdatePosition", System.Reflection.BindingFlags.NonPublic | System.Reflection.BindingFlags.Instance);
            mi.Invoke(YourPopup, null);
        }
    }

Solution 4 - Wpf

If you want to move the popup, there is a simple trick : change its position,then set :

IsOpen = false;
IsOpen = true;

Solution 5 - Wpf

To add to Jason Frank's answer, the Window.GetWindow() approach wouldn't work if the WPF UserControl is ultimately hosted in an WinForms ElementHost. What I needed to find was the ScrollViewer that my UserControl was placed in, as that was the element showing the scrollbars.

This generic recursive method (modified off another answer) will help find the parent of a particular type in the logical tree (it's possible to use the visual tree too), and return it if found.

public static T FindLogicalParentOf<T>(DependencyObject child) where T: FrameworkElement
    {
        DependencyObject parent = LogicalTreeHelper.GetParent(child);

        //Top of the tree
        if (parent == null) return null;

        T parentWindow = parent as T;
        if (parentWindow != null)
        {
            return parentWindow;
        }
        
        //Climb a step up
        return FindLogicalParentOf<T>(parent);
    }

Call this helper method instead of Window.GetWindow() and continue with Jason's answer of subscribing to the right events. In the case of ScrollViewer, it's the ScrollChanged event instead.

Solution 6 - Wpf

I modified the Code from Jason, because the Popup is already in Foreground if the Window is not Activated. Is there any Option in the Popup class or i is my solution ok?

private void FullLoaded(object sender, RoutedEventArgs e) {
Window CurrentWindow = Window.GetWindow(this.Popup);
if (CurrentWindow != null) {
    
    CurrentWindow.LocationChanged += (object innerSender, EventArgs innerArgs) => {
        this.RedrawPopup();
    };

    CurrentWindow.SizeChanged += (object innerSender, SizeChangedEventArgs innerArgs) => {
        this.RedrawPopup();
    };

    CurrentWindow.Activated += (object innerSender, EventArgs innerArgs) => {
        if (this.m_handleDeActivatedEvents && this.m_ShowOnActivated) {
            this.Popup.IsOpen = true;
            this.m_ShowOnActivated = false;
        }
    };

    CurrentWindow.Deactivated += (object innerSender, EventArgs innerArgs) => {
        if (this.m_handleDeActivatedEvents && this.Popup.IsOpen) {
            this.Popup.IsOpen = false;
            this.m_ShowOnActivated = true;
        }
    };
    
}
}

    private void RedrawPopup() {
        double Offset = this.Popup.HorizontalOffset;
        this.Popup.HorizontalOffset = Offset + 1;
        this.Popup.HorizontalOffset = Offset;
    }

Solution 7 - Wpf

I encapsulated the logic provided by Jason Frank in a class and inherit from the PopUp class.

class MyPopup : Popup
	{
		private Window _root;

		public MyPopup()
		{
			Loaded += OnLoaded;
			Unloaded += OnUnloaded;
		}

		private void OnLoaded(object sender, RoutedEventArgs e)
		{
			_root = Window.GetWindow(this);
			_root.LocationChanged += OnRootLocationChanged;
			
		}

		private void OnRootLocationChanged(object sender, EventArgs e)
		{
			var offset = this.HorizontalOffset;
			this.HorizontalOffset = offset + 1;
			this.HorizontalOffset = offset;
		}

		private void OnUnloaded(object sender, RoutedEventArgs e)
		{
			_root.LocationChanged -= OnRootLocationChanged;
			Loaded -= OnLoaded;
			Unloaded -= OnUnloaded;
		}
	}

Solution 8 - Wpf

You can not do this. When Popup is displayed on the screen, it does not reposition itself if its parent is repositioned. Thats the behavior of Popup control. check this: http://msdn.microsoft.com/en-us/library/system.windows.controls.primitives.popup.aspx

you can use a Window(with WindowStyle=None) instead of Popup that may solve your problem.

Solution 9 - Wpf

Download the Popup Popup Position Sample at:

http://msdn.microsoft.com/en-us/library/ms771558(v=VS.90).aspx

The code sample uses the class CustomPopupPlacement with a Rect object, and binds to horizontal and vertical offsets to move the Popup.

<Popup Name="popup1" Placement="Bottom" AllowsTransparency="True"
       IsOpen="{Binding ElementName=popupOpen, Path=IsChecked}"
       HorizontalOffset="{Binding ElementName=HOffset, Path=Value, Mode=TwoWay}"
       VerticalOffset="{Binding ElementName=VOffset, Path=Value, Mode=TwoWay}"

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionMizipzorView Question on Stackoverflow
Solution 1 - WpfNathanAWView Answer on Stackoverflow
Solution 2 - WpfJason FrankView Answer on Stackoverflow
Solution 3 - WpfAQL.exeView Answer on Stackoverflow
Solution 4 - WpfAurelien RibonView Answer on Stackoverflow
Solution 5 - WpfzemienView Answer on Stackoverflow
Solution 6 - WpfGigabyteView Answer on Stackoverflow
Solution 7 - WpfBrayanKnView Answer on Stackoverflow
Solution 8 - WpfvikyView Answer on Stackoverflow
Solution 9 - WpfZamboniView Answer on Stackoverflow