How to set margin for scrollbar in scrollviewer using xaml only

Question

I need set the scrollbar's margin in a scrollviewer. I try to rewrite scrollbar margin in default scrollviewer style. just modify the margin in the style, and the scrollbar magin set the right value. But the content in scrollviewer just stay static when the scrollbar move. How can I fixed it or is there another way to set the margin for scrollbar in scrollviewer easier?

<Style TargetType="ScrollViewer">
  <Setter Property="HorizontalContentAlignment" Value="Left" />
  <Setter Property="VerticalContentAlignment" Value="Top" />
  <Setter Property="VerticalScrollBarVisibility" Value="Visible" />
  <Setter Property="Padding" Value="4"/>
  <Setter Property="BorderThickness" Value="1"/>
  <Setter Property="BorderBrush">
      <Setter.Value>
          <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
              <GradientStop Color="#FFA3AEB9" Offset="0"/>
              <GradientStop Color="#FF8399A9" Offset="0.375"/>
              <GradientStop Color="#FF718597" Offset="0.375"/>
              <GradientStop Color="#FF617584" Offset="1"/>
          </LinearGradientBrush>
      </Setter.Value>
  </Setter>
  <Setter Property="Template">
      <Setter.Value>
          <ControlTemplate TargetType="ScrollViewer">
              <Border CornerRadius="2" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}">
                  <Grid Background="{TemplateBinding Background}">
                      <Grid.RowDefinitions>
                          <RowDefinition Height="*"/>
                          <RowDefinition Height="Auto"/>
                      </Grid.RowDefinitions>
                      <Grid.ColumnDefinitions>
                          <ColumnDefinition Width="*"/>
                          <ColumnDefinition Width="Auto"/>
                      </Grid.ColumnDefinitions>

                      <ScrollContentPresenter x:Name="ScrollContentPresenter"
                                              Cursor="{TemplateBinding Cursor}"
                                              Margin="{TemplateBinding Padding}"
                                              ContentTemplate="{TemplateBinding ContentTemplate}"/>

                      <Rectangle Grid.Column="1" Grid.Row="1" Fill="#FFE9EEF4"/>

                      <ScrollBar x:Name="VerticalScrollBar" Width="18"
                                 IsTabStop="False"
                                 Visibility="{TemplateBinding ComputedVerticalScrollBarVisibility}"
                                 Grid.Column="1" Grid.Row="0" Orientation="Vertical"
                                 ViewportSize="{TemplateBinding ViewportHeight}"
                        `enter code here`         Maximum="{TemplateBinding ScrollableHeight}"
                                 Minimum="0"
                                 Value="{TemplateBinding VerticalOffset}"
                                 Margin="0,20,0,0"/>

                      <ScrollBar x:Name="HorizontalScrollBar" Height="18"
                                 IsTabStop="False"
                                 Visibility="{TemplateBinding ComputedHorizontalScrollBarVisibility}"
                                 Grid.Column="0" Grid.Row="1" Orientation="Horizontal"
                                 ViewportSize="{TemplateBinding ViewportWidth}"
                                 Maximum="{TemplateBinding ScrollableWidth}"
                                 Minimum="0"
                                 Value="{TemplateBinding HorizontalOffset}"
                                 Margin="-1,0,-1,-1"/>

                  </Grid>
              </Border>
          </ControlTemplate>
      </Setter.Value>
  </Setter>

Answer 1

I made Margin="10,20,10,20" for the vertical ScrollBar and it worked just fine. The ScrollViewer contains a DataGrid for testing purposes.

XAML:

        <ScrollViewer HorizontalAlignment="Left" Height="152" Margin="25,42,0,0" VerticalAlignment="Top" Width="449">
        <ScrollViewer.Template>
            <ControlTemplate TargetType="{x:Type ScrollViewer}">
                <Grid x:Name="Grid" Background="{TemplateBinding Background}">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="*"/>
                        <ColumnDefinition Width="Auto"/>
                    </Grid.ColumnDefinitions>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="*"/>
                        <RowDefinition Height="Auto"/>
                    </Grid.RowDefinitions>
                    <Rectangle x:Name="Corner" Grid.Column="1" Fill="{DynamicResource {x:Static SystemColors.ControlBrushKey}}" Grid.Row="1"/>
                    <ScrollContentPresenter x:Name="PART_ScrollContentPresenter" CanContentScroll="{TemplateBinding CanContentScroll}" CanHorizontallyScroll="False" CanVerticallyScroll="False" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" Grid.Column="0" Margin="{TemplateBinding Padding}" Grid.Row="0"/>
                    <ScrollBar x:Name="PART_VerticalScrollBar" AutomationProperties.AutomationId="VerticalScrollBar" Cursor="Arrow" Grid.Column="1" Maximum="{TemplateBinding ScrollableHeight}" Minimum="0" Grid.Row="0" Visibility="{TemplateBinding ComputedVerticalScrollBarVisibility}" Value="{Binding VerticalOffset, Mode=OneWay, RelativeSource={RelativeSource TemplatedParent}}" ViewportSize="{TemplateBinding ViewportHeight}" Margin="10,20,10,20"/>
                    <ScrollBar x:Name="PART_HorizontalScrollBar" AutomationProperties.AutomationId="HorizontalScrollBar" Cursor="Arrow" Grid.Column="0" Maximum="{TemplateBinding ScrollableWidth}" Minimum="0" Orientation="Horizontal" Grid.Row="1" Visibility="{TemplateBinding ComputedHorizontalScrollBarVisibility}" Value="{Binding HorizontalOffset, Mode=OneWay, RelativeSource={RelativeSource TemplatedParent}}" ViewportSize="{TemplateBinding ViewportWidth}"/>
                </Grid>
            </ControlTemplate>
        </ScrollViewer.Template>
        <DataGrid x:Name="dataGrid" ItemsSource="{Binding Mode=OneWay}">
            <DataGrid.DataContext>
                <local:MyDataCollection/>
            </DataGrid.DataContext>
        </DataGrid>
    </ScrollViewer>