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

Question

我需要在滚动查看器中设置滚动条的边距。我尝试以默认的滚动查看器样式重写滚动条边距。只需修改样式中的边距，并将滚动条magin设置为正确的值。但是当滚动条移动时，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>