다른 모든 컨트롤 위에 오버레이 컨트롤을 만드는 방법은 무엇입니까?


166

컨트롤을 다른 모든 컨트롤 위에 표시해야 부분적으로 오버레이됩니다.

답변:


162

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패널의 자식이 지정된 순서대로 렌더링됩니다 (예 : 맨 위).

좀 더 복잡한 것을 원한다면 ChildWindowSilverlight 에서 어떻게 구현 되는지 볼 수 있습니다 . 반투명 배경과 팝업 전체를 오버레이합니다 RootVisual.


참고 : 이것은 예상대로 HTML 캔버스와 다릅니다. 직접 그리기를위한 것이 아니라 절대 위치 지정 컨텍스트를 제공합니다 (일반적으로 직접 모양을 넣을 수 있음).
Paul

73

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>

이 오버레이는 특정 영역뿐만 아니라 전체 창을 덮습니다.
메트로 스머프

최고의 솔루션! 감사합니다!
개발자

코드가 거의없이 전체 앱 창에 "개인 정보 화면"을 배치하는 데 필요한 것 (예 : 사용자가 책상에서 멀어지면 민감한 정보 숨기기) 대박!
휘트

39

그리드의 동일한 셀에있는 컨트롤은 앞뒤로 렌더링됩니다. 따라서 한 컨트롤을 다른 컨트롤 위에 놓는 간단한 방법은 동일한 셀에 놓는 것입니다.

다음은 유용한 예제입니다. 장기 실행 작업이 실행되는 동안 (예 : 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>

23

xaml 코드의 끝에 가져 오려는 컨트롤을 배치하십시오. 즉

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

13

이것은 WPF에서 Adorners 의 공통 기능입니다 . Adorners는 일반적으로 다른 모든 컨트롤 위에 나타나지만 z-order를 언급하는 다른 답변이 귀하의 경우에 더 적합 할 수 있습니다.


3
<Canvas Panel.ZIndex="1" HorizontalAlignment="Left" VerticalAlignment="Top" Width="570">
  <!-- YOUR XAML CODE -->
</Canvas>
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.