Come impostare il margine per la barra di scorrimento in scrollviewer usando solo xaml

Question

Ho bisogno di impostare il margine della barra di scorrimento in uno scrollviewer. Provo a riscrivere il margine della barra di scorrimento nello stile di default dello scrollviewer. basta modificare il margine nello stile e la barra di scorrimento magin imposta il giusto valore. Ma il contenuto in scrollviewer rimane statico quando si sposta la barra di scorrimento. Come posso ripararlo o esiste un altro modo per impostare più facilmente il margine per la barra di scorrimento in scrollviewer?

<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

Ho fatto Margin="10,20,10,20" per la verticale ScrollBar e ha funzionato bene. Il ScrollViewer contiene uno DataGrid a scopo di test.

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>