How to make usercontrol on topmost in wpf?

Question

I have a grid which contains three rows. First row contains which show toolbar. Second row contains which shows status bar. Third row contains the Listbox which is data bound to observable collection.

When some conditions are met I need to show popup.

I thought to use popup, the problem with popup is it will not move with the parent control when I move the window.

So I decided to create a user control(say mypopup) which is added in second row with higher ZIndex programmatically, the problem is even if I set the higher index it is going behind the ListboxItems.

a) Any solution for this?

As a solution I thought to use Adorner for that user control(mypopup), the problem is my user control(mypopup) contains Button and Checkbox, after applying adorner these controls are not accessible.

b) Any idea to make my user control interactive with adorner?

Answer 1

<Window...>
<Grid>
   <Grid.RowDefinitions>
      <RowDefinition Height="Auto" />
      <RowDefinition Height="Auto" />
      <RowDefinition Height="*" />
   </Grid.RowDefinitions>

   <Toolbar Grid.Row="0" ... />
   <Statusbar Grid.Row="1" ... />
   <ListBox Grid.Row="2" ... />

   <OverlayControl Grid.Row="0" Grid.RowSpan="3" 
                   HorizontalAlignment="Stretch" 
                   VerticalAlignment="Stretch" />
</Grid>
</Window>

OverlayControl:

<UserControl ...>
<Grid Background="#30000000">
   <Border HorizontalAlignment="Center" VerticalAlignment="Center" ...>
        Content, e.g. TextBlock with a message 
   </Border>
</Grid>
</UserControl>

Don't set width on the usercontrol as it should stretch out, use d:DesignWidth/Height if you need to. Order matters, the last one is over others within the same row. Change row and rowspan if you want it only to occupy the 3rd row.

Answer 2

Adorners wont give you interactivity. They are simply drawing based. So they will not react like a user control does unless you "simulate" it. So lets keep them aside for now.

Use popups only. Set their placement target and placement orientation. The popup below is placed to the top left corner of a Button.

        popup.PlacementTarget = MyButton;
        popup.Placement = PlacementMode.Relative;

It moves along the placement target i.e. MyButton. For that I change the margin of the button and accordingly popup moves. For this effect to take place you need to hide the popup and reset its placement target.

        popup.IsOpen = false;
        popup.PlacementTarget = null;
        MyButtonMargin = new Thickness(MyButton.Margin.Left + 10);
        popup.PlacementTarget = MyButton;
        popup.IsOpen = true; 

Let me know if this helps.