Binding a Popup to another control's relative screen position - wpf

I'm writing an XBAP with a complex Popup (Canvas Z-index of 99 with a grid on it...) that I would like to "attach" to the button that opens it and follow that button around wherever it goes on the screen. For example, if the button is in a ListBox or an XamDataGrid I would like the popup to follow the button as it scrolls through. If it is beneath an Expander I want it to stay attached to the button when the expander forces it to move, etc.
Any Ideas?

When using a Popup, neither PlacementTarget nor CustomPopupPlacementCallback is used after the popup has originally appeared. So any use of these properties will not allow the popup to track the button as it moves.
Several ways occur to me of achieving what you desire:
Attach a custom Adorner to the button and put the popup inside it. Disadvantage: Popup is not connected to Button or surrounding elements, so it won't inherit properties & DataContext from them.
Attach a custom Adorner to the button. This adorner will get measure and arrange calls when the button moves relative to the AdornerLayer, allowing you to manually update the Popup position. As long as your AdornerDecorator doesn't move relative to your Window (eg if it is the direct child of the Window), you can easily detect the AdornerLayer being moved by monitoring changes to Window size. Disadvantage: Complex to code & get right.
Don't use a Popup at all. Instead wrap the button in a <Grid> alongside a <Canvas> with zero width and height and the desired position. Inside the <Canvas> add the UserControl for the popup with an appropriate ZIndex. It will extend past the edge f the Canvas, which is just fine in WPF. Instead of using a Popup control just control the visibility of the UserControl. Disadvantage: Will not really be totally on top of all other objects, can't extend off edge of window (may not be an issue for XBAP, though).

I'm not sure if it will auto-update for you or not, but the PlacementTarget property allows you to specify a control to position the popup relative to. If that doesn't work, then maybe CustomPopupPlacementCallback will do the trick?

Related

MouseLeave of underlying object is fired even when overlapping object is IsHitTestVisible = false

I have created a custom popup to decorate my buttons with animated tooltips. I track Button.MouseEnter for the button to decide when to display the popup. I use Button.MouseLeave to determine when to hide the popup.
Problem is Button.MouseLeave is fired prematurely if the popup moves over the mouse cursor (its appearance is animated) despite the fact that I have set IsHitTestVisible = false for the popup and all its visual children.
Is this the way WPF is designed to work? I need MouseLeave to only fire when the cursor moves away from the button itself and not be influenced by the popup.
Thanks
I believe that the Popup control is actually contained within a window, which is why the popup can extend beyond the window bounds in some cases. (It's also why popup transparency is not supported in Silverlight.)
I believe that while the popup control is no longer processing "hits", the container window is, which is why you are losing your button's mouse focus.
I've not tested this, but you might try creating a template for your button and actually declaring the popup as part of the button (rather than below it). This may cause WPF to view the popup control as part of the button and eliminate the problem of losing mouse focus. This works in other scenarios, but I'm not 100% sure how this will work with a Popup.
EDIT: As a side note, the deault WPF tooltip allows you to override the template. I'm not sure what your goals are, but you may find it easier to change the appearance and behavior of the default tooltip than to try to roll your own, as a lot of these sorts of problems have already been solved in the default Tooltip.

WPF Popup Alternative

I have a window with a popup that pops when an item in a listview is double clicked.
It centers to the main window and looks really nice floating there.
The problem is when the user moves the main window or selects another program, and the popup floats on top of other stuff.
I would like to have something like a popup, meaning that it floats on top of other elements in the window, but sticks with the main window when it moves (stays centered), and doesn't float on top of other programs.
Can I make a popup act like this, or is there a better way to do it?
Popups will not move while the window is resized or moved. Because, Popups/Context menus are not the part of Visual Tree. You have to use Adorner for this. I will suggest to read this four part series for a quick start on Adorner.
It's possible that an Adorner will fit your needs in this case better than a popup. Adorners can float above your window, too. There are a few differences, mainly that an adorner is bound to a UIElement (which include windows).
If you are willing to use a third-party/open source (MS-PL) option, the Extended WPF Toolkit has a ChildWindow control.
It's technically not a separate window, but it appears to be a separate window to the user.
I have not found a way to make Popups stop doing that in WPF
As an alternative, you can create a UserControl which acts like a Popup.
Usually I host the content section of the app along with the Popup within a Canvas control, and when IsPopupOpen gets changed to True I set the popup Visibility = Visible.

WPF Adorner Overlay Problem

I am trying to achieve functionality similar to that of a Popup, without using a Popup, but instead adorning my ContentControl with a basic adorner. Basically, I want the ContentControl to have an "overlay" effect, whereby it is the topmost object, above all other elements - similiar to that of the Popup control.
Here is the problem that I am running into, and I am hoping that someone can point out where I am going wrong:
I have a stand grid with two row definitions. The first row contains a UI element - for example, a rectangle. The second row contains a custom control that I have developed to emulate the functionality of a "drawer" sliding out. Basically, when I click on button, I am going to animate a TranslateTransform to "slide" my ContentControl "up". This works fine - except that it gets cropped underneath the rectange in the first row of the grid. If I remove the row definitions in the grid, then when the desired behavior is achieved - the ContentControl is moved "up" and partially "on top" of the rectangle. The rectangle is merely a place holder for what I am trying to achieve. I basically want to have a drawer type control that can slide out and be on top of all other controls.
I am somewhat new to using the Adorner class, so, I am hoping that someone can please point out where I am going wrong.
Thanks.
Chris
Change the parent of the adorner to the full grid, and not just your control. If you put a control in a grid row, and set the adorner to adorn the control, it will usually be clipped to that row because the control is.

WPF contentcontrol extend beyond the bounds of its parent control

This is a sort of extension of this question I asked yesterday (the question gave me a contentcontrol that can overlay the current control). I now have a contentcontrol that can be overlayed on the current control via bindings (a modal type window). This works well and I am happy with this. One great feature would be if I could get the overlay to go over its parent.
currently the overlay will go into "My Control" control. What I would like is if I can still define it in that control (as that is were it is needed), but when it is displayed it can cover the whole main content area and / or the main window.
is this even possible?
Thanks
Sure it's possible, just wrap it into a Popup! :) You might have to manually stretch it though, but Popup is the control which will let you go outside the bounds of the parent view.
Another way is to host the MainContent in a grid and add a collapsed content control after the MainContent.
To show the popup: put it in the collapsed content control and make it visible.
To hide the popup: collapse the contentn control and remove the popup.

How to position a menubar above TextBox in Silverlight?

I want to add the menubar to TextBox control in Silverlight 4. (I will create a new reusable control.) The menubar will consists of a few image buttons. The idea is that it will normally stay hidden and will show up only when the user puts his/her mouse cursor to the TextBox area. If used in a multiline textbox, whole menubar can fit inside it, this should be easy. (I hope. :-))
But how to solve situation when TextBox is in single line mode? I'd like to put the menubar above the TextBox. But I don't have a clue how to do it. Can somebody help? I need to let all other controls in a form to stay in their positions, and only add my menubar above my textbox. (So the menubar will NOT hide the textbox. Instead, it will hide other controls residing right above the textbox.) It should work in all arrangements of form, like Grid, StackPanel, Canvas etc. In the fact it would be similar to a classic right-click context menu, but not modal. (Right-click context menu is modal, i.e. while it is shown you cannot use other controls, and it automatically hides when you click anywhere else. I want my menubar to stay visible as long as user heeps mouse cursor over the textbox or the menubar.)
Example: Coordinates of textbox are top=100,left=20,bottom=115,right=120. So my menubar's coordinates should be bottom=100,left=20, right & top are based on size of menubar.
If many textboxes will be used on a single page, each single one should have its own menubar. (Of course.)
You can create your own control (custom control or UserControl, whichever you like should work) which has the TextBox, and the visual for the menu bar.
If the TextBox is single-line, you could display the menu bar in a Popup which you position just above the TextBox whenever the mouse is over it.
If the TextBox is multi-line, you'd simply use a StackPanel or Grid or whatever to do layout like normal, if I am understanding what you want.
No coding required if you use this menu:
http://sl4popupmenu.codeplex.com
To achieve this behavior you will need to set its IsPinned property to true.

Resources