如何将ScrollViewer放在它应该滚动的内容之上

Question

我想把ScrollViewer放在它滚动的内容重叠/位于其上面的方式.我会设置ScrollViewer的不透明度,以便内容在下面可见.

据我所知,默认的ScrollViewer,这似乎不可能开箱即用,因为内容嵌套在ScrollViewer中.

关于如何使这项工作的任何想法？

编辑:我知道ScrollViewer是一个装饰器,内容不知道ScrollViewer.这种分离很好,我不希望内容知道ScrollViewer.我尝试做的是纯粹的视觉(布局)事物.只需在内容之上显示ScrollViewer.ScrollViewer的行为应保持不变.

Answer 1

我想我现在理解你在"顶部"的意思 - 一种方法是使用一个控件模板,使ScrollContentPresenter跨越网格的两行和一列,而ScrollBars在第二行和第二列.ScrollBars设置为半透明.现在内容将在滚动条下绘制!

我试过的样式如下:

<Style x:Key="SVStyle" TargetType="{x:Type ScrollViewer}">
    <Setter Property="OverridesDefaultStyle" Value="True" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type ScrollViewer}">
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="*" />
                        <ColumnDefinition Width="Auto" />
                    </Grid.ColumnDefinitions>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="*"/>
                        <RowDefinition Height="Auto"/>
                    </Grid.RowDefinitions>
                    <ScrollContentPresenter Grid.ColumnSpan="2" Grid.RowSpan="2"/>
                        <ScrollBar Name="PART_VerticalScrollBar"
                            HorizontalAlignment="Right"
                            Opacity="0.5" 
                            Grid.Column="1"
                            Value="{TemplateBinding VerticalOffset}"
                            Maximum="{TemplateBinding ScrollableHeight}"
                            ViewportSize="{TemplateBinding ViewportHeight}"
                            Visibility="{TemplateBinding ComputedVerticalScrollBarVisibility}" />
                        <ScrollBar Name="PART_HorizontalScrollBar"
                            VerticalAlignment="Bottom"
                            Orientation="Horizontal"
                            Opacity="0.5"
                            Grid.Row="1"
                            Value="{TemplateBinding HorizontalOffset}"
                            Maximum="{TemplateBinding ScrollableWidth}"
                            ViewportSize="{TemplateBinding ViewportWidth}"
                            Visibility="{TemplateBinding ComputedHorizontalScrollBarVisibility}"/>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

用法示例:

<ScrollViewer HorizontalScrollBarVisibility="Auto" Style="{StaticResource SVStyle}" >
    <StackPanel>
        <Button Height="100" Width="800" >Hello World</Button>
        <Button Height="100" Width="800" >Hello World</Button>
        <Button Height="100" Width="800" >Hello World</Button>
        <Button Height="100" Width="800" >Hello World</Button>
        <Button Height="100" Width="800" >Hello World</Button>
        <Button Height="100" Width="800" >World World</Button>
        <Button Height="100" Width="800" >Hello World</Button>
        <Button Height="100" Width="800" >Hello World</Button>
    </StackPanel>
</ScrollViewer>

结果如下:

可以很简单地修改它,以便ScrollBars最初非常透明(例如,Opacity = 0.2)并且当鼠标进入ScrollBar时它们变得更不透明.这将是一个很好的效果,并将ScrollBars保持在他们需要之前.

编辑:

我已经在我的博客上为那些想要更多细节的人写了这篇文章.