xaml ScrollViewer，模糊边框 - Windows应用商店应用

Question

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

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

Answer 1

由于WinRT放弃了对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，使其看起来与您自己的设置完全正确，但概念应该在那里并且是一个选项。希望这会有所帮助。