¿Cómo hacer control de superposición por encima de todos los otros controles?

Question

Necesito hacer que un control aparezca sobre todos los demás controles, por lo que se superpondrá parcialmente.

Answer 1

Si está utilizando un lienzo o Cuadrícula en su diseño, darle el control a ser puesto en la parte superior un mayor ZIndex

De MSDN:

<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" WindowTitle="ZIndex Sample"> 
    <Canvas> 
    <Rectangle Canvas.ZIndex="3" Width="100" Height="100" Canvas.Top="100" Canvas.Left="100" Fill="blue"/> 
    <Rectangle Canvas.ZIndex="1" Width="100" Height="100" Canvas.Top="150" Canvas.Left="150" Fill="yellow"/> 
    <Rectangle Canvas.ZIndex="2" Width="100" Height="100" Canvas.Top="200" Canvas.Left="200" Fill="green"/> 

    <!-- Reverse the order to illustrate z-index property --> 

    <Rectangle Canvas.ZIndex="1" Width="100" Height="100" Canvas.Top="300" Canvas.Left="200" Fill="green"/> 
    <Rectangle Canvas.ZIndex="3" Width="100" Height="100" Canvas.Top="350" Canvas.Left="150" Fill="yellow"/> 
    <Rectangle Canvas.ZIndex="2" Width="100" Height="100" Canvas.Top="400" Canvas.Left="100" Fill="blue"/> 
    </Canvas> 
</Page> 

Si no se especifica ZIndex, la los hijos de un panel se representan en el orden en que se especifican (es decir, el último en la parte superior).

Si desea hacer algo más complicado, puede ver cómo se implementa ChildWindow en Silverlight. Superpone un fondo semitransparente y emergente sobre su RootVisual completo.

Answer 2

Los controles en la misma celda de una cuadrícula se representan de atrás hacia adelante. Entonces, una forma simple de poner un control encima de otro es colocarlo en la misma celda.

Aquí hay un ejemplo útil, que muestra un panel que desactiva todo en la vista (es decir, el control de usuario) con un mensaje ocupado mientras se ejecuta una tarea larga (es decir, mientras la propiedad BusyMessage no es nula) :

<Grid> 

    <local:MyUserControl DataContext="{Binding}"/> 

    <Grid> 
     <Grid.Style> 
      <Style TargetType="Grid"> 
       <Setter Property="Visibility" 
         Value="Visible" /> 
       <Style.Triggers> 
        <DataTrigger Binding="{Binding BusyMessage}" 
           Value="{x:Null}"> 
         <Setter Property="Visibility" 
           Value="Collapsed" /> 
        </DataTrigger> 

       </Style.Triggers> 
      </Style> 
     </Grid.Style> 
     <Border HorizontalAlignment="Stretch" 
       VerticalAlignment="Stretch" 
       Background="DarkGray" 
       Opacity=".7" /> 
     <Border HorizontalAlignment="Center" 
       VerticalAlignment="Center" 
       Background="White" 
       Padding="20" 
       BorderBrush="Orange" 
       BorderThickness="4"> 
      <TextBlock Text="{Binding BusyMessage}" /> 
     </Border> 
    </Grid> 
</Grid> 

Answer 3

Esta es una función común de Adorners en WPF. Generalmente, los adornos aparecen por encima de todos los otros controles, pero las otras respuestas que mencionan el orden z pueden ajustarse mejor a su caso.

Answer 4

Robert Rossney tiene una buena solución. Aquí hay una solución alternativa que he usado en el pasado que separa la "superposición" del resto del contenido. Esta solución aprovecha la propiedad adjunta Panel.ZIndex para colocar la "Superposición" encima de todo lo demás. Puede establecer la Visibilidad de la "Superposición" en el código o usar un DataTrigger.

<Grid x:Name="LayoutRoot"> 

<Grid x:Name="Overlay" Panel.ZIndex="1000" Visibility="Collapsed"> 
    <Grid.Background> 
     <SolidColorBrush Color="Black" Opacity=".5"/> 
    </Grid.Background> 

    <!-- Add controls as needed --> 
    </Grid> 

    <!-- Use whatever layout you need --> 
    <ContentControl x:Name="MainContent" /> 

</Grid> 

Answer 5

<Canvas Panel.ZIndex="1" HorizontalAlignment="Left" VerticalAlignment="Top" Width="570"> 
    <!-- YOUR XAML CODE --> 
</Canvas> 

Answer 6

Ponga el control que desea llevar al frente al final de su código XAML. Es decir.

<Grid> 
    <TabControl ...> 
    </TabControl> 
    <Button Content="ALways on top of TabControl Button"/> 
</Grid>