Can't fully style a ListBox/Scrollviewer in WPF

Question

I'm using custom Scrollbars we created using standard ControlTemplates, however when I apply them to a ListBox there is a corner in the bottom right which I am unable to find any way to override.

Unfortunately I can't post a picture until I get more points. But the corner I'm referring to is when both a vertical and horizontal scrollbar appear, there is a space in the bottom right that is filled with an off-white color that I am unable to ovrerride

Answer 1

Another two solutions work.

1) The rectangle colour's is dynamic, with the key "SystemColors.ControlBrushKey". You can override this key in a custom style, or the resources of the ScrollViewer control (or one of its ancestors). Source: this question on MSDN.

Example :

<!-- In a style -->
<Style x:Key="MyCustomScrollViewer" TargetType="{x:Type ScrollViewer}">
    <Style.Resources>
        <SolidColorBrush x:Key="{x:Static SystemColors.ControlBrushKey}" Color="Transparent"/>
    </Style.Resources>
</Style>

<!-- Or in the control -->
<ScrollViewer>
    <ScrollViewer.Resources>
        <SolidColorBrush x:Key="{x:Static SystemColors.ControlBrushKey}" Color="Transparent"/>
    </ScrollViewer.Resources>
</ScrollViewer>

2) Set (same places as above) the style of Rectangle with a "Hidden" visibility. Warning: this will have side-effetcs if rectangles are contained within the control's descendants.

<Style x:Key="MyCustomScrollViewer" TargetType="{x:Type ScrollViewer}">
    <Style.Resources>
        <!-- 'BasedOn' can be omitted -->
        <Style TargetType="Rectangle" BasedOn="{StaticResource {x:Type Rectangle}}">
            <Setter Property="Visibility" Value="Hidden"/>
        </Style>
    </Style.Resources>
</Style>

Answer 2

this is the part of the template code i got for ScrollViewer using Blend. I added a Rectangle in the bottom right corner and set the Fill to Red. You can style it in the same way or you can expand one of the ScrollBar to cover the space using Grid.RowSpan="2" for VerticalScrollBar(first one) or Grid.ColumnSpan="2" for HorizontalScrollBar(second one).

<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 Name="PART_VerticalScrollBar" Grid.Row="0" Grid.Column="1" Value="{TemplateBinding VerticalOffset}" Maximum="{TemplateBinding ScrollableHeight}" ViewportSize="{TemplateBinding ViewportHeight}" Visibility="{TemplateBinding ComputedVerticalScrollBarVisibility}"/>
                    <ScrollBar 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>