Annoying Square Where Scrollbars Meet

I have a custom control that needs the ViewportWidth and ViewportHeight of ScrollViewer. But the answered overrided style broke that part.

So maybe an easy way.

<Style TargetType="{x:Type ScrollViewer}">
        <Style.Resources>
            <SolidColorBrush x:Key="{x:Static SystemColors.ControlBrushKey}" Color="Transparent" />
        </Style.Resources>
</Style>

The Rectangle Fill property is set to SystemColors.ControlBrushKey in the default Template

I was just having the exact same problem, but found this answer here on Stack to solve it for me:

Can't fully style a ListBox/Scrollviewer in WPF

Although that solution does put something in place of the square, it's done in the ControlTemplate (of the ScrollViewer, not the ScrollBar) rather than via some bubble-gum-patching approach of putting something on top of the ScrollViewer control.

However, I found that by just omitting the Rectangle definition from that template altogether, the annoying corner square just goes away - i.e. that area takes on whatever the background color of the ScrollViewer is (which, in the example given, is transparent - and that suits me fine. If you want to set the color of the ScrollViewer background, just set the Background property of the Grid).

So try adding this to your Resource:

<Style TargetType="{x:Type ScrollViewer}">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type ScrollViewer}">
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition/>
                        <ColumnDefinition Width="Auto"/>
                    </Grid.ColumnDefinitions>
                    <Grid.RowDefinitions>
                        <RowDefinition/>
                        <RowDefinition Height="Auto"/>
                    </Grid.RowDefinitions>
                    <ScrollContentPresenter Grid.Column="0" />
                    <ScrollBar x:Name="PART_VerticalScrollBar" Grid.Row="0" Grid.Column="1" Value="{TemplateBinding VerticalOffset}" Maximum="{TemplateBinding ScrollableHeight}" ViewportSize="{TemplateBinding ViewportHeight}" Visibility="{TemplateBinding ComputedVerticalScrollBarVisibility}"/>
                    <ScrollBar x:Name="PART_HorizontalScrollBar" Orientation="Horizontal" Grid.Row="1" Grid.Column="0" Value="{TemplateBinding HorizontalOffset}" Maximum="{TemplateBinding ScrollableWidth}" ViewportSize="{TemplateBinding ViewportWidth}" Visibility="{TemplateBinding ComputedHorizontalScrollBarVisibility}"/>
                    <!--<Rectangle Grid.Row="1" Grid.Column="1" Fill="Red"/>-->
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>