如何将ScrollViewer放置在其应滚动的内容之上 [英] How to place a ScrollViewer on top of the content it should scroll

问题描述

我想将ScrollViewer放置在它所滚动的内容之上，使其重叠/位于上面.我将设置ScrollViewer的不透明度，以使内容在下面可见.

I would like to put my ScrollViewer in such a way that it overlaps/sits on top of the content it scrolls. I would set the Opacity of the ScrollViewer so that the content is visible underneath.

据我了解默认的ScrollViewer，这似乎是不可能的，因为内容嵌套在ScrollViewer内部.

As far as I understand the default ScrollViewer, this doesn't seem to be possible out of the box since the content is nested inside the ScrollViewer.

关于如何进行这项工作的任何想法?

Any ideas on how to make this work?

我了解ScrollViewer是一个装饰器，并且内容不了解ScrollViewer.这种分隔很好，我也不想让内容知道ScrollViewer.我试图做的是纯粹的视觉(布局)事情.只需在内容顶部显示ScrollViewer.ScrollViewer的行为应保持不变.

I understand that the ScrollViewer is a Decorator and that the content is not aware of the ScrollViewer. This separation is good and I don't want the content to be aware of the ScrollViewer. What I try to do is a purely visual (layout) thing. Simply show the ScrollViewer on top of the content.The behavior of the ScrollViewer should remain unchanged.

推荐答案

我想我现在了解您在顶部"的含义-一种实现方法是使用使ScrollContentPresenter跨两行的控件模板，滚动条位于第二行和第二列时，网格的第二列.滚动条设置为半透明.现在，内容将绘制在滚动条下方！

I think I now understand what you mean by "on top" - one way to do it is to use a control template that makes the ScrollContentPresenter span two rows and columns of a grid while the ScrollBars are in the 2nd rows and columns. The ScrollBars are set to be semi-transparent. The content will now draw under the 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>

结果是这样的:

很简单地修改它，以使ScrollBar最初非常透明(例如，不透明度= 0.2)，并在鼠标进入ScrollBar时使它们变得更加不透明.这将是一个很好的效果，并且将ScrollBar挡在需要之前.

It would be simple modify this so that the ScrollBars are initially very transparent (say, Opacity = 0.2) and have them become more opaque when the mouse enters the ScrollBar. That would be a nice effect and would keep the ScrollBars out the way until they're needed.

我已经在我的博客上写了这篇文章，像其他细节一样.

I've written this up on my blog for those who would like a little more detail.

这篇关于如何将ScrollViewer放置在其应滚动的内容之上的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！