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

Was it helpful?

Solution

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>

OTHER TIPS

Two things that might help:

1) Use Snoop to explore the element tree of your application, this might help in finding the problem.

2) Depending on how you started your control, you might consider starting from a copy of the standard ListBox. I've found problems with certain controls when I start styling from an empty or partial template.

hope that helps

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>
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top