Question

我希望将Scrollview的内容“淡出”到Scrollview的底部和顶部。我是通过在视图中添加不透明蒙版来完成的。我现在的问题是Scrollbar本身在底部和顶部淡出。无论如何要解决这个问题吗？

我的Scrollview代码:(编辑Stackpanel内容）

<ScrollViewer Margin="0,66,460,34">
    <ScrollViewer.OpacityMask>
        <LinearGradientBrush StartPoint="0,0"
                             EndPoint="0,1">
            <GradientStop Color="Transparent"
                          Offset="0" />
            <GradientStop Color="#FF000912"
                          Offset="0.1" />
            <GradientStop Color="#FF000912"
                          Offset="0.9" />
            <GradientStop Color="Transparent"
                          Offset="1" />
        </LinearGradientBrush>
    </ScrollViewer.OpacityMask>
    <StackPanel HorizontalAlignment="Right">
        <Rectangle Height="1500"
                   Width="400"
                   HorizontalAlignment="Left"
                   VerticalAlignment="Top">
            <!-- Imagine this Rectangle is a huge pile of content -->
        </Rectangle>
    </StackPanel>
</ScrollViewer>

Answer 1

您可以创建一个与主要尺寸和位置相同的重叠滚动查看器：

<ScrollViewer Margin="0,66,460,34" Name="ScrollViewerMain">
    <ScrollViewer.OpacityMask>
        <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
            <GradientStop Color="Transparent" Offset="0" />
            <GradientStop Color="#FF000912" Offset="0.1" />
            <GradientStop Color="#FF000912" Offset="0.9" />
            <GradientStop Color="Transparent" Offset="1" />
        </LinearGradientBrush>
    </ScrollViewer.OpacityMask>
    <StackPanel HorizontalAlignment="Right">
        <Rectangle Height="1500" Width="400" HorizontalAlignment="Left" VerticalAlignment="Top">
            <!-- Imagine this Rectangle is a huge pile of content -->
        </Rectangle>
    </StackPanel>
</ScrollViewer>
<ScrollViewer Margin="0,66,460,34" Name="ScrollViewerOverlay" ScrollChanged="ScrollViewerOverlay_ScrollChanged">
    <StackPanel HorizontalAlignment="Right">
        <Rectangle Height="1500" Width="400" HorizontalAlignment="Left" VerticalAlignment="Top">
            <!-- Keep this Rectangle transparent -->
        </Rectangle>
    </StackPanel>
</ScrollViewer>

然后你可以绑定到重叠的scrollviewer ScrollChanged事件来滚动主要内容，如下所示：

private void ScrollViewerOverlay_ScrollChanged(object sender, ScrollChangedEventArgs e)
{
    ScrollViewerMain.ScrollToVerticalOffset(ScrollViewerMain.VerticalOffset + e.VerticalChange);
}

向Scrollviewer内容添加不透明蒙版，而不会影响滚动条本身

1 个答案: