Jak sprawić, by nakładka była ponad wszystkimi innymi kontrolkami?

166

Muszę sprawić, by kontrolka pojawiła się nad wszystkimi innymi kontrolkami, więc częściowo je nałoży.

user626528
źródło

Odpowiedzi:

162

Jeśli używasz Canvaslub Gridw swoim układzie, ustaw wyżej kontrolkę, która ma być umieszczona na górze ZIndex.

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

Jeśli nie określisz ZIndex, elementy podrzędne panelu są renderowane w kolejności, w jakiej zostały określone (tj. Ostatnie na górze).

Jeśli chcesz zrobić coś bardziej skomplikowanego, możesz zobaczyć, jak ChildWindowjest zaimplementowany w Silverlight. Nakłada półprzezroczyste tło i wyskakujące okienko na całą zawartość RootVisual.

foson
źródło
Uwaga: to nie jest tak, jak oczekiwałem HTML Canvas. Nie jest przeznaczony do bezpośredniego rysowania, ale zapewnia bezwzględny kontekst pozycjonowania (do którego zwykle można bezpośrednio wstawiać kształty).
Paul
73

Robert Rossney ma dobre rozwiązanie. Oto alternatywne rozwiązanie, z którego korzystałem w przeszłości, które oddziela „Nakładkę” od reszty zawartości. To rozwiązanie wykorzystuje dołączoną właściwość, Panel.ZIndexaby umieścić „Nakładkę” na wszystkim innym. Możesz ustawić widoczność „Nakładki” w kodzie lub użyć pliku 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>
Metro Smurf
źródło
Ta nakładka pokryje całe okno, a nie tylko określony obszar.
Metro Smurf
Najlepsze rozwiązanie w historii! Dziękuję Ci!
Deweloper
Dokładnie to, czego potrzebowałem, aby umieścić „ekran prywatności” na całym oknie mojej aplikacji (np. Aby ukryć poufne informacje, jeśli użytkownik odejdzie od swojego biurka), z bardzo małą ilością kodu. Niesamowite!
Whitzz
39

Kontrolki w tej samej komórce siatki są renderowane od tyłu do przodu. Tak więc prostym sposobem na umieszczenie jednej kontrolki na drugiej jest umieszczenie jej w tej samej komórce.

Oto przydatny przykład, który wyświetla panel, który wyłącza wszystko w widoku (tj. Element sterujący użytkownika) z komunikatem o zajętości podczas wykonywania długotrwałego zadania (tj. Gdy BusyMessagewłaściwość powiązana nie jest pusta):

<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>
Robert Rossney
źródło
23

Umieść kontrolkę, którą chcesz przenieść na pierwszy plan na końcu kodu XAML. To znaczy

<Grid>
  <TabControl ...>
  </TabControl>
  <Button Content="ALways on top of TabControl Button"/>
</Grid>
artos
źródło
13

Jest to typowa funkcja Adorners w WPF. Ozdoby zwykle pojawiają się nad wszystkimi innymi kontrolkami, ale inne odpowiedzi, które wspominają o kolejności z, mogą lepiej pasować do twojego przypadku.

CodeNaked
źródło
3
<Canvas Panel.ZIndex="1" HorizontalAlignment="Left" VerticalAlignment="Top" Width="570">
  <!-- YOUR XAML CODE -->
</Canvas>
Devam Mehta
źródło