web-dev-qa-db-fra.com

Comment faire en sorte que le contrôle de superposition soit supérieur à tous les autres contrôles?

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

wpfxamlcontrolsoverlay
152
user626528

Si vous utilisez un Canvas ou Grid dans votre présentation, définissez le contrôle à placer plus haut 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 dans lequel ils ont été spécifiés (c'est-à-dire le dernier en haut).

Si vous souhaitez faire quelque chose de plus compliqué, vous pouvez voir comment ChildWindow est implémenté dans Silverlight. Il recouvre un arrière-plan semi-transparent et une fenêtre contextuelle sur l'ensemble de votre RootVisual.

150
foson

Robert Rossney a une bonne solution. Voici une solution alternative que j'ai utilisée par le passé et qui sépare la "superposition" du reste du contenu. Cette solution tire parti de la propriété attachée Panel.ZIndex pour placer le "calque" au-dessus de tout le reste. Vous pouvez soit définir la visibilité de la "superposition" dans le code, soit utiliser un paramètre 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>
64
Metro Smurf

Les contrôles dans la même cellule d'une grille sont rendus en arrière-plan. Ainsi, un moyen simple de placer un contrôle au-dessus d’un autre consiste à le placer dans la même cellule.

Voici un exemple utile, qui fait apparaître un panneau qui désactive tout le contenu de la vue (le contrôle utilisateur) avec un message occupé pendant l'exécution d'une tâche longue (c'est-à-dire lorsque la propriété BusyMessage bound n'est pas null) :

<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>
39
Robert Rossney

Mettez le contrôle que vous voulez mettre en avant à la fin de votre code xaml. C'est à dire.

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

C'est une fonction commune de Adorners 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 des z peuvent mieux convenir à votre cas.

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