답변:
Canvas
또는 Grid
레이아웃을 사용하는 경우 컨트롤을 더 높게 배치하십시오 ZIndex
.
에서 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>
을 지정하지 않으면 ZIndex
패널의 자식이 지정된 순서대로 렌더링됩니다 (예 : 맨 위).
좀 더 복잡한 것을 원한다면 ChildWindow
Silverlight 에서 어떻게 구현 되는지 볼 수 있습니다 . 반투명 배경과 팝업 전체를 오버레이합니다 RootVisual
.
Robert Rossney 는 좋은 해결책이 있습니다. 다음은 과거에 사용했던 대체 솔루션으로 나머지 콘텐츠와 "오버레이"를 분리합니다. 이 솔루션은 연결된 속성 Panel.ZIndex
을 활용 하여 "오버레이"를 다른 모든 것 위에 배치합니다. 코드에서 "오버레이"의 가시성을 설정하거나을 사용할 수 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>
그리드의 동일한 셀에있는 컨트롤은 앞뒤로 렌더링됩니다. 따라서 한 컨트롤을 다른 컨트롤 위에 놓는 간단한 방법은 동일한 셀에 놓는 것입니다.
다음은 유용한 예제입니다. 장기 실행 작업이 실행되는 동안 (예 : BusyMessage
바운드 속성이 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>