c# - xaml ScrollViewer，边界模糊 - Windows Store App

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示例中的一些值，使其看起来与您自己的设置完全一致，但这个概念应该存在并且是一个选项。希望这可以帮助。