xaml ScrollViewer，边框模糊-Windows Store应用程序

Question

滚动时是否可能会有某种模糊的边框？ 为了更好地理解，我添加了一张我想要实现的图像。

我的限制是，在ScrollViewer下方有一个背景图像。 因此，我不能只在ScrollViewer的左侧使用具有白色到透明渐变的填充Rectangle 。

Answer 1

由于WinRT放弃了对OpacityMask支持， OpacityMask我不确定是否要使用Alpha通道进行设置。 话虽这么说，几乎总是可以解决的。 那么，如果您只是利用自然的z顺序来伪造该怎么办？ 像这样的东西；

<!-- 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>

当然，您可能希望调整示例中的“ Rectangle Margin类的一些值，以使其在您自己的设置中看起来完全正确，但是该概念应该存在并且是一个选项。 希望这可以帮助。