Custom ScrollBar styling artifact?

Question

What is this rectangle and how to get rid of it?

I am only templating scrollbars:

<Style TargetType="ScrollBar">
    <Setter Property="Background" Value="#FF07468B"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="ScrollBar">
                <Grid x:Name="GridRoot" Width="5" Background="{TemplateBinding Background}">
                    <Track x:Name="PART_Track" Grid.Row="0" IsDirectionReversed="true" Focusable="false">
                        <Track.Thumb>
                            <!-- thumb is defined somewhere -->
                            <Thumb x:Name="Thumb" Style="{StaticResource ScrollBarThumb}"/>
                        </Track.Thumb>
                        <Track.IncreaseRepeatButton>
                            <RepeatButton Command="ScrollBar.PageDownCommand" Opacity="0" Focusable="false"/>
                        </Track.IncreaseRepeatButton>
                        <Track.DecreaseRepeatButton>
                             <RepeatButton Command="ScrollBar.PageUpCommand" Opacity="0" Focusable="false"/>
                        </Track.DecreaseRepeatButton>
                    </Track>
                </Grid>
                <!-- removed triggers -->
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

I doubt if it's a ScrollBar, more like ListBox itself. The problem only appears when horizontal scrollbar is visible.

---

To example, here guy templating ScrollViewer and as you can see image is without artefact or intersection (or resizegrip, or whatever).

Do I need to do something to ListBox when only templating scrollbars? And what exactly it will be?

---

Making ListBox background Red will produce following:

So this rectangle is something LightGray, but from where it comes from?

Answer 1

The style of a "normal" scrollBar in a listBox or in a window is generic.

You cannot change the style as you want! This is a small detail that probably nobody thought about it.

Why do you see that rectangle?

Well, I guess the guys from Microsoft had this three possibilities:

1. Horizontal bar fills the intersection.

2. Vertical bar fills the intersection

3. Or there is a solid rectangle which has the same color as the proper scrollBar.

So, they decided to use the 3rd option. And also as I said, without changing the whole style of a scrollBar you cannot change that small detail. Maybe you can change with this style : http://www.nullskull.com/a/1525/styling-the-wpf-scrollviewer.aspx ?:D