So legen Sie den Rand für Bildlaufleiste in Scrollviewer nur mit Xaml

Question

Ich muss den Rand der Bildlaufleiste in einem Scrollviewer festlegen. Ich versuche den Scrollbar-Rand im Standard-Scrollviewer-Stil zu schreiben. Ändern Sie einfach den Rand im Stil, und die Bildlaufleiste legt den richtigen Wert fest. Der Inhalt im Scrollviewer bleibt jedoch nur statisch, wenn die Bildlaufleiste verschoben wird. Wie kann ich das Problem beheben oder gibt es eine andere Möglichkeit, den Rand für die Bildlaufleiste im Scrollviewer einfacher einzustellen?

<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

Ich habe Margin="10,20,10,20" für die vertikale ScrollBar und es funktionierte gut. Die ScrollViewer enthält eine DataGrid für Testzwecke.

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>