如何仅使用xaml在scrollviewer中设置滚动条的边距

Question

我需要在滚动查看器中设置滚动条的边距。 我尝试在默认的scrollviewer样式中重写滚动条边距。 只需修改样式中的边距，滚动条magin设置正确的值。 但滚动条移动时，scrollviewer中的内容会保持静态。 我该如何修复它还是有另一种方法来设置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

我为垂直ScrollBar制作了Margin="10,20,10,20" ，它工作得很好。 ScrollViewer包含一个用于测试目的的DataGrid 。

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>