가장자리에서 SplitView.Pane에 대한 DropShadow를 만드는 방법

Question

현재 가장자리 브라우저 기록/즐겨 찾기 창과 비슷한 SplitView.Pane을 만들려고합니다. 따라서 SplitView.Pane의 (왼쪽) 테두리에 그림자가 있어야합니다.

그림자를 만들려면 UWP Toolkit의 DropShadowPanel을 사용합니다. 아이디어는 다음과 같습니다 (물론 작동하지 않습니다).

<controls:DropShadowPanel> 
    <SplitView.Pane> 
     <!--Content--> 
    </SplitView.Pane> 
</controls:DropShadowPanel> 

섀도우는 패널 외부에 있어야합니다. 어떻게해야합니까?

이 그림자처럼 보이게하는 방법입니다 :

How it should look like

편집은 다음의 DropShadow는 창 벗어합니다. 중복 게시물의 대답은 창 내부에 그림자를 만듭니다. 내가 거기에서 무엇인가 놓치지 않는 한.

Answer 1

Pane의 자식이 잘 리면 그림자가 적용되지 않을 수 있습니다. 당신은 물론 재정의 시도 할 수 SplitView의 스타일 직접 Pane 요소에 그림자를 적용하지만, 곧 PaneRoot 당신이주의하지 않았다, 그래서 만약 자신의 는 XAML에 정의 논리를 클리핑이 있다는 것을 발견 할 것이다, 잠재적으로 기본 UI 로직을 손상시킬 수 있습니다.

다음은 스타일을 수정하지 않고 작동하는 간단한 해결책입니다. 아이디어는이 요소와 그림자 사이에 충분한 공간이있는 내부 요소에 그림자를 적용하여 그림자가 퍼져 나가는 것입니다 (Pane의 루트 요소).

는이 DropShadowPanel의 BlurRadius (즉 12)과 일치하는이 Border (즉 RootBorder)와, 는 패딩 남아 있어야한다 (즉. 12,0,0,0)를 상기 PanePlacement이어서, Right으로 루트 요소 설정 가정한다.

또한 PaneBackground은 투명이어야합니다. 그렇지 않으면 그림자를 덮을 것입니다. 대신 루트 요소 내부에있는 컨테이너 요소 (예 : PaneContentGrid)에 배경색을 적용해야합니다.

간단한 예를 들어 아래의 코드를 참조하십시오 - 이미 질문을하거나 HTTPS의 중복처럼

XAML

<SplitView PanePlacement="Right" PaneBackground="Transparent"> 
    <SplitView.Pane> 
     <Border x:Name="RootBorder" Padding="12,0,0,0"> 
      <Grid> 
       <controls:DropShadowPanel BlurRadius="12" 
              Color="Black" 
              Opacity="0.3" 
              HorizontalContentAlignment="Stretch" 
              VerticalContentAlignment="Stretch"> 
        <Rectangle Fill="White" /> 
       </controls:DropShadowPanel> 

       <!-- SystemControlPageBackgroundChromeLowBrush is the default PaneBackground brush, feel free to change it to whatever you like! --> 
       <Grid x:Name="PaneContentGrid" Background="{ThemeResource SystemControlPageBackgroundChromeLowBrush}"> 
        <!-- place your Panel content here. --> 
       </Grid> 
      </Grid> 
     </Border> 
    </SplitView.Pane> 
</SplitView> 

데모