Eu preciso fazer com que um controle apareça acima de todos os outros controles, para que eles se sobreponham parcialmente.
Eu preciso fazer com que um controle apareça acima de todos os outros controles, para que eles se sobreponham parcialmente.
Respostas:
Se você estiver usando um Canvas
ou Grid
em seu layout, dê um controle maior para que o controle seja colocado em cima ZIndex
.
Do 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 você não especificar ZIndex
, os filhos de um painel serão renderizados na ordem em que são especificados (por exemplo, o último no topo).
Se você deseja fazer algo mais complicado, pode ver como isso ChildWindow
é implementado no Silverlight. Sobrepõe um plano de fundo semitransparente e pop-up ao longo de todo o processo RootVisual
.
Robert Rossney tem uma boa solução. Aqui está uma solução alternativa que eu usei no passado que separa a "Sobreposição" do restante do conteúdo. Esta solução tira proveito da propriedade anexada Panel.ZIndex
para colocar a "Sobreposição" em cima de tudo o resto. Você pode definir a visibilidade da "Sobreposição" no código ou usar a 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>
Os controles na mesma célula de uma grade são renderizados de frente para frente. Portanto, uma maneira simples de colocar um controle em cima de outro é colocá-lo na mesma célula.
Aqui está um exemplo útil, que exibe um painel que desativa tudo na exibição (ou seja, o controle do usuário) com uma mensagem ocupada enquanto uma tarefa de longa execução é executada (ou seja, enquanto a BusyMessage
propriedade vinculada não é 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>
<Canvas Panel.ZIndex="1" HorizontalAlignment="Left" VerticalAlignment="Top" Width="570">
<!-- YOUR XAML CODE -->
</Canvas>