Question

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.

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?

EDIT: 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.

Answer 1

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!

The Style I tried that works is as follows:

<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> 

Example usage:

<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> 

The result is along the lines of this:

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.

EDIT:

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