How to make overlay control above all other controls

Question

I need to make a control appear above all other controls  so it will partially overlay them

User · Accepted Answer

If you are using a Canvas or Grid in your layout  give the control to be put on top a higher ZIndex   From MSDN    lt Page xmlns  http   schemas microsoft com winfx 2006 xaml presentation  WindowTitle  ZIndex Sample  gt     lt Canvas gt       lt Rectangle Canvas ZIndex  3  Width  100  Height  100  Canvas Top  100  Canvas Left  100  Fill  blue   gt       lt Rectangle Canvas ZIndex  1  Width  100  Height  100  Canvas Top  150  Canvas Left  150  Fill  yellow   gt       lt Rectangle Canvas ZIndex  2  Width  100  Height  100  Canvas Top  200  Canvas Left  200  Fill  green   gt        lt  -- Reverse the order to illustrate z-index property -- gt        lt Rectangle Canvas ZIndex  1  Width  100  Height  100  Canvas Top  300  Canvas Left  200  Fill  green   gt       lt Rectangle Canvas ZIndex  3  Width  100  Height  100  Canvas Top  350  Canvas Left  150  Fill  yellow   gt       lt Rectangle Canvas ZIndex  2  Width  100  Height  100  Canvas Top  400  Canvas Left  100  Fill  blue   gt     lt  Canvas gt   lt  Page gt    If you don t specify ZIndex  the children of a panel are rendered in the order they are specified  i e  last one on top    If you are looking to do something more complicated  you can look at how ChildWindow is implemented in Silverlight  It overlays a semitransparent background and popup over your entire RootVisual

User · Answer

Put the control you want to bring to front at the end of your xaml code  I e    lt Grid gt     lt TabControl     gt     lt  TabControl gt     lt Button Content  ALways on top of TabControl Button   gt   lt  Grid gt

User · Answer

lt Canvas Panel ZIndex  1  HorizontalAlignment  Left  VerticalAlignment  Top  Width  570  gt     lt  -- YOUR XAML CODE -- gt   lt  Canvas gt

User · Answer

Controls in the same cell of a Grid are rendered back-to-front   So a simple way to put one control on top of another is to put it in the same cell   Here s a useful example  which pops up a panel that disables everything in the view  i e  the user control  with a busy message while a long-running task is executed  i e  while the BusyMessage bound property isn t null     lt Grid gt        lt local MyUserControl DataContext   Binding    gt        lt Grid gt           lt Grid Style gt               lt Style TargetType  Grid  gt                   lt Setter Property  Visibility                          Value  Visible    gt                   lt Style Triggers gt                       lt DataTrigger Binding   Binding BusyMessage                                    Value   x Null   gt                           lt Setter Property  Visibility                                  Value  Collapsed    gt                       lt  DataTrigger gt                    lt  Style Triggers gt               lt  Style gt           lt  Grid Style gt           lt Border HorizontalAlignment  Stretch                  VerticalAlignment  Stretch                  Background  DarkGray                  Opacity   7    gt           lt Border HorizontalAlignment  Center                  VerticalAlignment  Center                  Background  White                  Padding  20                  BorderBrush  Orange                  BorderThickness  4  gt               lt TextBlock Text   Binding BusyMessage     gt           lt  Border gt       lt  Grid gt   lt  Grid gt

User · Answer

Robert Rossney has a good solution  Here s an alternative solution I ve used in the past that separates out the  Overlay  from the rest of the content  This solution takes advantage of the attached property Panel ZIndex to place the  Overlay  on top of everything else  You can either set the Visibility of the  Overlay  in code or use a DataTrigger    lt Grid x Name  LayoutRoot  gt     lt Grid x Name  Overlay  Panel ZIndex  1000  Visibility  Collapsed  gt       lt Grid Background gt         lt SolidColorBrush Color  Black  Opacity   5   gt       lt  Grid Background gt        lt  -- Add controls as needed -- gt     lt  Grid gt      lt  -- Use whatever layout you need -- gt     lt ContentControl x Name  MainContent    gt    lt  Grid gt

User · Answer

This is a common function of Adorners in WPF  Adorners typically appear above all other controls  but the other answers that mention z-order may fit your case better

[wpf] How to make overlay control above all other controls?

Examples related to wpf

Examples related to xaml

Examples related to controls

Examples related to overlay