risposta-alla-domanda-sullo-sviluppo-web-bd.com

Come rendere il controllo overlay sopra tutti gli altri controlli?

Devo far apparire un controllo sopra tutti gli altri controlli, quindi li sovrapporrà parzialmente.

wpfxamlcontrolsoverlay
147
user626528

Se stai usando un Canvas o Grid nel tuo layout, dai il controllo per mettere in cima un ZIndex.

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

Se non specifichi ZIndex, i figli di un pannello vengono visualizzati nell'ordine in cui sono stati specificati (ovvero l'ultimo in alto).

Se stai cercando di fare qualcosa di più complicato, puoi vedere come ChildWindow è implementato in Silverlight. Sovrappone uno sfondo semitrasparente e un popup sull'intero RootVisual.

147
foson

Robert Rossney ha una buona soluzione. Ecco una soluzione alternativa che ho usato in passato che separa "Overlay" dal resto del contenuto. Questa soluzione sfrutta la proprietà collegata Panel.ZIndex per posizionare "Overlay" in cima a tutto il resto. Puoi impostare la visibilità del "Overlay" nel codice o utilizzare 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>
62
Metro Smurf

I controlli nella stessa cella di una griglia vengono visualizzati frontalmente. Quindi un modo semplice per mettere un controllo sopra l'altro è metterlo nella stessa cella.

Ecco un utile esempio, che fa apparire un pannello che disabilita tutto nella vista (cioè il controllo utente) con un messaggio occupato mentre viene eseguita un'attività di lunga durata (cioè mentre la proprietà associata BusyMessage non è nulla):

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

Metti il ​​controllo che vuoi mettere in primo piano alla fine del tuo codice xaml. Cioè.

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

Questa è una funzione comune di Adorners in WPF. Gli ornatori di solito appaiono sopra tutti gli altri controlli, ma le altre risposte che menzionano l'ordine z potrebbero adattarsi meglio al tuo caso.

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