WPF滚动条样式问题

Question

I have a standard GridView and a standard TreeView , with no style / control templates implemented, just some basic customisation (background, foreground etc). I do, however, have a Scrollbar style that's set to apply to all scroll bars {x:Type ScrollBar} . It works perfectly, but I get a small white box between the scrollbars on both my TreeView and Image on other pages.

They're all hosted in a grid with a border or two - identically as far as I can tell. I've tried setting the border, foreground and background colors for just about every control on the page to no avail. I don't really want to define a TreeView style if possible, especially if that's not going to fix the issue.

Any ideas what I need to do to format that little white box? Code for my Scrollbar is below - it's fairly standard. I'll post the XAML for the windows themselves if necessary.

GridView

TreeView

    <Style x:Key="ScrollBarLineButton"
           TargetType="{x:Type RepeatButton}">
        <Setter Property="SnapsToDevicePixels"
                Value="True" />
        <Setter Property="OverridesDefaultStyle"
                Value="true" />
        <Setter Property="Focusable"
                Value="false" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type RepeatButton}">
                    <Border x:Name="Border"
                            Margin="1"
                            CornerRadius="2"
                            BorderThickness="1"
                            BorderBrush="{StaticResource ControlBorderBrush}"
                            Background="{StaticResource BackgroundBrush}">
                        <Path x:Name="Arrow"
                              HorizontalAlignment="Center"
                              VerticalAlignment="Center"
                              Data="{Binding Content, 
                              RelativeSource={RelativeSource TemplatedParent}}" 
                              Fill="White">
                        </Path>
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    <Style x:Key="ScrollBarPageButton"
           TargetType="{x:Type RepeatButton}">
        <Setter Property="SnapsToDevicePixels"
      Value="True" />
        <Setter Property="OverridesDefaultStyle"
      Value="true" />
        <Setter Property="IsTabStop"
      Value="false" />
        <Setter Property="Focusable"
      Value="false" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type RepeatButton}">
                    <Border Background="Transparent" />
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    <Style x:Key="ScrollBarThumb"
           TargetType="{x:Type Thumb}">
        <Setter Property="SnapsToDevicePixels"
      Value="True" />
        <Setter Property="OverridesDefaultStyle"
      Value="true" />
        <Setter Property="IsTabStop"
      Value="false" />
        <Setter Property="Focusable"
      Value="false" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type Thumb}">
                    <Border CornerRadius="4"
                            Background="{StaticResource ProxyRadial}"
                            BorderThickness="1"
                            BorderBrush="{StaticResource BorderBrush}"/>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    <ControlTemplate x:Key="VerticalScrollBar"
                     TargetType="{x:Type ScrollBar}">
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition MaxHeight="18" />
                <RowDefinition Height="0.00001*" />
                <RowDefinition MaxHeight="18" />
            </Grid.RowDefinitions>
            <Border Grid.RowSpan="3"
                    CornerRadius="2"
                    Background="{StaticResource DarkBackgroundBrush}" />
            <RepeatButton Grid.Row="0"
                          Style="{StaticResource ScrollBarLineButton}"
                          Height="18"
                          Command="ScrollBar.LineUpCommand"
                          Content="M 0 4 L 8 4 L 4 0 Z" />
            <Track x:Name="PART_Track"
                   Grid.Row="1"
                   IsDirectionReversed="true">
                <Track.DecreaseRepeatButton>
                    <RepeatButton Style="{StaticResource ScrollBarPageButton}"
                                  Command="ScrollBar.PageUpCommand" />
                </Track.DecreaseRepeatButton>
                <Track.Thumb>
                    <Thumb Style="{StaticResource ScrollBarThumb}"
                           Margin="2,0"
                           Name="Thumb"/>
                </Track.Thumb>
                <Track.IncreaseRepeatButton>
                    <RepeatButton Style="{StaticResource ScrollBarPageButton}"
                  Command="ScrollBar.PageDownCommand" />
                </Track.IncreaseRepeatButton>
            </Track>
            <RepeatButton Grid.Row="3"
                          Style="{StaticResource ScrollBarLineButton}"
                          Height="18"
                          Command="ScrollBar.LineDownCommand"
                          Content="M 0 0 L 4 4 L 8 0 Z" />
        </Grid>
    </ControlTemplate>

    <ControlTemplate x:Key="HorizontalScrollBar"
                     TargetType="{x:Type ScrollBar}">
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition MaxWidth="18" />
                <ColumnDefinition Width="0.00001*" />
                <ColumnDefinition MaxWidth="18" />
            </Grid.ColumnDefinitions>
            <Border Grid.ColumnSpan="3"
                    CornerRadius="2"
                    Background="{StaticResource DarkBackgroundBrush}" />
            <RepeatButton Grid.Column="0"
              Style="{StaticResource ScrollBarLineButton}"
              Width="18"
              Command="ScrollBar.LineLeftCommand"
              Content="M 4 0 L 4 8 L 0 4 Z" />
            <Track x:Name="PART_Track"
                   Grid.Column="1"
                   IsDirectionReversed="False">
                <Track.DecreaseRepeatButton>
                    <RepeatButton Style="{StaticResource ScrollBarPageButton}"
                                  Command="ScrollBar.PageLeftCommand" />
                </Track.DecreaseRepeatButton>
                <Track.Thumb>
                    <Thumb Style="{StaticResource ScrollBarThumb}"
                           Margin="0,2"/>
                </Track.Thumb>
                <Track.IncreaseRepeatButton>
                    <RepeatButton Style="{StaticResource ScrollBarPageButton}"
                  Command="ScrollBar.PageRightCommand" />
                </Track.IncreaseRepeatButton>
            </Track>
            <RepeatButton Grid.Column="3"
              Style="{StaticResource ScrollBarLineButton}"
              Width="18"
              Command="ScrollBar.LineRightCommand"
              Content="M 0 0 L 4 4 L 0 8 Z" />
        </Grid>
    </ControlTemplate>

    <Style x:Key="{x:Type ScrollBar}"
           TargetType="{x:Type ScrollBar}">
        <Setter Property="SnapsToDevicePixels"
                Value="True" />
        <Setter Property="OverridesDefaultStyle"
                Value="true" />
        <Style.Triggers>
            <Trigger Property="Orientation"
                     Value="Horizontal">
                <Setter Property="Width"
                        Value="Auto" />
                <Setter Property="Height"
                        Value="16" />
                <Setter Property="Template"
                        Value="{StaticResource HorizontalScrollBar}" />
            </Trigger>
            <Trigger Property="Orientation"
         Value="Vertical">
                <Setter Property="Width"
          Value="16" />
                <Setter Property="Height"
          Value="Auto" />
                <Setter Property="Template"
                        Value="{StaticResource VerticalScrollBar}" />
            </Trigger>
        </Style.Triggers>
    </Style>

Answer 1

If you try to copy ScrollViewerTemplate then you'll see this inside

<ControlTemplate x:Key="ScrollViewerControlTemplate1" 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}"/>
            <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>

And attention to this one

<Rectangle x:Name="Corner" Grid.Column="1" Fill="{DynamicResource {x:Static SystemColors.ControlBrushKey}}" Grid.Row="1"/>

Just change its Fill color