Comment faire en sorte que le contrôle superposé soit au-dessus de tous les autres contrôles ?

Question

Je dois faire en sorte qu'un contrôle apparaisse au-dessus de tous les autres contrôles, afin qu'il les recouvre partiellement.

Answer 1

Si vous utilisez un Canvas o Grid dans votre mise en page, donnez à la commande à mettre en haut une plus grande 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 vous ne spécifiez pas ZIndex les enfants d'un panneau sont rendus dans l'ordre où ils sont spécifiés (c'est-à-dire le dernier en haut).

Si vous cherchez à faire quelque chose de plus compliqué, vous pouvez regarder comment ChildWindow est mis en œuvre dans Silverlight. Il superpose un arrière-plan semi-transparent et une fenêtre contextuelle sur l'ensemble de votre site Web. RootVisual .

Answer 2

Robert Rossney a une bonne solution. Voici une autre solution que j'ai utilisée dans le passé et qui sépare la "superposition" du reste du contenu. Cette solution tire parti de la propriété jointe Panel.ZIndex pour placer la "superposition" au-dessus de tout le reste. Vous pouvez soit définir la visibilité de la "superposition" dans le code, soit utiliser une balise de type 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 3

Les contrôles situés dans la même cellule d'une grille sont rendus dos à dos. Une façon simple de placer un contrôle au-dessus d'un autre est donc de le placer dans la même cellule.

Voici un exemple utile, qui fait apparaître un panneau qui désactive tout ce qui se trouve dans la vue (c'est-à-dire le contrôle de l'utilisateur) avec un message d'occupation pendant l'exécution d'une tâche de longue durée (c'est-à-dire pendant que l'option BusyMessage n'est pas nulle) :

<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

Placez le contrôle que vous voulez mettre en avant à la fin de votre code xaml. Par exemple

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

Answer 5

Il s'agit d'une fonction courante de Adorateurs dans WPF. Les ornements apparaissent généralement au-dessus de tous les autres contrôles, mais les autres réponses qui mentionnent l'ordre z peuvent mieux convenir à votre cas.