xaml ScrollViewer, blurred border - Windows Store App

Question

스크롤 할 때 흐리게 표시된 테두리가 있으면 어떨까요? 더 나은 이해를 위해 내가 성취하고자하는 것을 그림으로 추가했습니다.

내가 가지고있는 제한 사항은 ScrollViewer 아래에 배경 이미지가 있습니다. 따라서 ScrollViewer의 왼쪽에 채워진 Rectangle을 흰색에서 투명한 그라데이션으로 그냥 사용할 수 없습니다.

Answer 1

은 WinRT는 OpacityMask에 대한 지원을 중단하고 난 당신이 알파 채널로 설정 싶어 있는지 확실하지 않습니다 때문에. 그 말로는, 항상 많은 일들이 있습니다. 그렇다면 자연 z-order를 대신 사용하고 가짜로 만들면 어떨까요? 이 같은; 물론

<!-- Grid as Container --> 
<Grid> 

    <ScrollViewer VerticalScrollBarVisibility="Disabled" HorizontalScrollBarVisibility="Visible"> 
     <!-- example backgrounds, like images, just for the concept example. --> 
     <StackPanel Orientation="Horizontal"> 
      <Rectangle Height="75" Width="300" Fill="Red" Margin="20,0"/> 
      <Rectangle Height="75" Width="300" Fill="Red" Margin="20,0"/> 
      <Rectangle Height="75" Width="300" Fill="Red" Margin="20,0"/> 
      <Rectangle Height="75" Width="300" Fill="Red" Margin="20,0"/> 
      <Rectangle Height="75" Width="300" Fill="Red" Margin="20,0"/> 
     </StackPanel> 
    </ScrollViewer> 

    <!-- An adhoc gradient overlay to just float over the ScrollViewer itself. 
     Then using Margin to fit it to the shape of the Scrollviewer and still 
     allow hit visibility to the scrollbar etc. --> 

    <Rectangle Width="50" HorizontalAlignment="Left" Margin="1,1,0,20"> 
     <Rectangle.Fill> 
      <LinearGradientBrush EndPoint="1,0.5" StartPoint="0.1,0.5"> 
       <GradientStop Color="White" Offset="0.3"/> 
       <GradientStop Color="Transparent" Offset="1"/> 
      </LinearGradientBrush> 
     </Rectangle.Fill> 
    </Rectangle> 

</Grid> 

당신은 아마 자신의 설정과 정확히 잘 보이게하기 위해 예에서 RectangleMargin 같은 일부 값을 조정할 싶을 것이다, 그러나 개념은있을 수 및 옵션입니다한다. 희망이 도움이됩니다.