Reserve Space for ScrollViewer
here is a sample
this will reserve the scroll bar space when it is not visible by using a border as placeholder
<ScrollViewer VerticalScrollBarVisibility="auto" x:Name="scroll">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition Width="auto" />
</Grid.ColumnDefinitions>
<Border Background="LightGoldenrodYellow"
Height="300" />
<Border Grid.Column="1"
Width="{x:Static SystemParameters.VerticalScrollBarWidth}">
<Border.Style>
<Style TargetType="Border">
<Style.Triggers>
<DataTrigger Binding="{Binding ComputedVerticalScrollBarVisibility, ElementName=scroll}"
Value="Visible">
<Setter Property="Visibility"
Value="Collapsed" />
</DataTrigger>
</Style.Triggers>
</Style>
</Border.Style>
</Border>
</Grid>
</ScrollViewer>
the first border is the content and the second border is the placeholder for reserving the space for scrollbar. you can choose to replace with element of your choice
Define as a reusable template
<Grid>
<Grid.Resources>
<ControlTemplate x:Key="ReservedSpaceScroller" TargetType="ContentControl">
<ScrollViewer VerticalScrollBarVisibility="auto"
x:Name="scroll">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition Width="auto" />
</Grid.ColumnDefinitions>
<ContentPresenter />
<Border Width="{x:Static SystemParameters.VerticalScrollBarWidth}"
x:Name="placeholder" Grid.Column="1" />
</Grid>
</ScrollViewer>
<ControlTemplate.Triggers>
<DataTrigger Binding="{Binding ComputedVerticalScrollBarVisibility, ElementName=scroll}"
Value="Visible">
<Setter TargetName="placeholder"
Property="Visibility"
Value="Collapsed" />
</DataTrigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Grid.Resources>
<ContentControl Template="{StaticResource ReservedSpaceScroller}">
<Border Background="LightGoldenrodYellow"
Height="300" />
</ContentControl>
</Grid>
result