¿Cómo hacer que el control de superposición sobre todos los demás controles?


166

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

Respuestas:


162

Si está utilizando Canvasao Griden su diseño, otorgue el control que se colocará en la parte superior 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 especifica ZIndex, los elementos secundarios de un panel se representan en el orden en que se especifican (es decir, el último en la parte superior).

Si está buscando hacer algo más complicado, puede ver cómo ChildWindowse implementa en Silverlight. Superpone un fondo semitransparente y emergente sobre todo RootVisual.


Nota: Esto no es como el lienzo HTML como esperaba. No está destinado al dibujo directo, sino que proporciona un contexto de posicionamiento absoluto (en el que normalmente se colocarían formas directamente).
Paul

73

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.ZIndexpara colocar la "Superposición" encima de todo lo demás. Puede establecer la Visibilidad de la "Superposición" en el código o utilizar a 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>

Esta superposición cubrirá toda la ventana, no solo un área específica.
Metro Pitufo

¡La mejor solución de todas! ¡Gracias!
Desarrollador

Exactamente lo que necesitaba para colocar una "pantalla de privacidad" sobre toda la ventana de mi aplicación (por ejemplo, para ocultar información confidencial si el usuario se aleja de su escritorio), con muy poco código. ¡Increíble!
Whitzz

40

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

Aquí hay un ejemplo útil, que muestra un panel que desactiva todo en la vista (es decir, el control del usuario) con un mensaje ocupado mientras se ejecuta una tarea de larga duración (es decir, mientras la BusyMessagepropiedad enlazada 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>

23

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

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

13

Esta es una función común de Adorners en WPF. Los adornos suelen aparecer por encima de todos los demás controles, pero las otras respuestas que mencionan el orden z pueden adaptarse mejor a su caso.


3
<Canvas Panel.ZIndex="1" HorizontalAlignment="Left" VerticalAlignment="Top" Width="570">
  <!-- YOUR XAML CODE -->
</Canvas>
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.