ScrollViewer scroll bars cover the content

[rprimora]

I have some content in my scroll viewer and I should be able to interact with it. This cannot be done since vertical scrollbar covers this content. I could set right padding to 20px and this would solve the issue. However, if I set VerticalScrollBarVisibility="Auto" it kind of beats the purpose since if there arent that many items then scroll bar will not be displayed and I will be left with a 20px gap on right.

I have tried applying a style as such to aleviate the issue because from what I can see in the control template it is made by design so the control can Autohide(AllowAutoHide) scroll bar without constant content push. This is what I have tried but it doesn't work.

<Style Selector="ScrollViewer /template/ ScrollContentPresenter#PART_ContentPresenter">
   <Setter Property="Grid.ColumnSpan" Value="1"/>
</Style>

The only consisten behavior I can get is if I set VerticalScrollBarVisibility="Visible" and set Padding="0,0,20,0". This way I will always have scroll bar visible and padding applied.

[maxkatz6]

Yes, it is by design, and it coverts only when you hover the scrollbar.
Apply padding on your content or use AllowAutoHide.

[Kryptos-FR]

The issue is that AllowAutoHide="False" still covers the content.

Instead it should auto-apply a margin based on the width of the scrollbar in the current theme, so that the scrollbar appears beside the content and not over it.

[timunie]

It is fixed in nightly and will be available in 11.1. Consider to try nightly for now.

[Kryptos-FR]

Oh right. I misunderstood your comment on the reply below. Looks good for me, I can wait for the next official release.

[akof1314]

Use 11.1 and Avalonia.Controls.TreeDataGrid will cause Misalignment with header (the horizontal scrollbar ) @timunie

[sinatrocious]

I have the same issue with vertical scrollbar of ScrollViwer overlapping content:

As you can see, I was lucky enough to have some Margin, so my solution is to move vertical scrollbar a bit to the right:

<!-- apply Classes="fixedScrollbar" to a ScrollViewer, which vertical scrollbar overlaps -->
<Style Selector="ScrollViewer.fixedScrollbar">
    <Setter Property="ClipToBounds" Value="False"/>
    <Style Selector="^ /template/ ScrollBar:vertical">
        <Setter Property="Margin" Value="0,0,-10,0"/>
    </Style>
</Style>

Now it looks acceptable:

[timunie]

In latest nightly this was fixed if you are not doing Auto-hide

[Agagamand]

Try this:

<x:Double x:Key="ScrollBarSize">7.5</x:Double>

[Richard-Big]

In addition on @timunie:

Just add AllowAutoHide=False to your ScrollViewer will draw content and scrollbars as you want.

Explanation:

According to the original Avalonia-style, the ScrollViewer consists of a 2x2 grid.
The property AllowAutoHide is used to use both columns and both rows, when set to True.

Part of source of Avalonia style (ScrollViewer.AXAML):

    <Style Selector="^[AllowAutoHide=True] /template/ ScrollContentPresenter#PART_ContentPresenter">
      <Setter Property="Grid.ColumnSpan" Value="2" />
      <Setter Property="Grid.RowSpan" Value="2" />
    </Style>

Example to display scrollbars without overlapping contents:

<Grid RowDefinitions="auto,*">
					
	<StackPanel Grid.Row="0" Orientation="Horizontal">
		<Slider x:Name="sliderZoom" Minimum="1" Maximum="20" Value="1" Width="200"/>
		<TextBlock Text="{Binding #sliderZoom.Value, StringFormat='{}Zoom factor {0}x '}"/>
	</StackPanel>
					
	<ScrollViewer Grid.Row="1" HorizontalScrollBarVisibility="Visible" VerticalScrollBarVisibility="Visible" AllowAutoHide="False">
		<!--AllowAutoHide=False is necessary to be set, otherwise scrollbars will overlap contents-->

		<LayoutTransformControl>

			<LayoutTransformControl.LayoutTransform>
				<ScaleTransform ScaleX="{Binding #sliderZoom.Value}" ScaleY="{Binding #sliderZoom.Value}"/>
			</LayoutTransformControl.LayoutTransform>
					
			<Panel>
				<Rectangle Width="50" Height="50" Fill="CornflowerBlue"/>
				<Rectangle Width="5" Height="5" Fill="Red"/>
				<Rectangle Width="0.5" Height="0.5" Fill="Yellow"/>
			</Panel>
					
		</LayoutTransformControl>

	</ScrollViewer>
</Grid>