wpf - ¿Cómo hacer control de superposición sobre todos los otros controles?

xaml controls

Question

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

Answer 1

Coloque 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>

Answer 2

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 3

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 del usuario) con un mensaje ocupado mientras se ejecuta una tarea de larga ejecución (es decir, mientras que la propiedad enlazada de 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 4

Si está utilizando un lienzo o cuadrícula en su diseño, dele el control para colocarlo encima de un ZIndex más alto.

Desde 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 se implementa ChildWindow en Silverlight. Superpone un fondo semitransparente y emergente sobre su RootVisual completo.

Answer 5

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 utilizar 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 6

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