Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Custom ScrollBar styling artifact?

Tags:

c#

wpf

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

enter image description here

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?

enter image description here


Making ListBox background Red will produce following:

enter image description here

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

like image 395
Sinatr Avatar asked Sep 02 '25 16:09

Sinatr


1 Answers

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.

enter image description here

2. Vertical bar fills the intersection

enter image description here

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

enter image description here

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

like image 56
Shmwel Avatar answered Sep 05 '25 05:09

Shmwel