WPF scrollbar style

Question

I'm using the following style for an apple like scrollbar:

                    <Track x:Name="PART_Track" Grid.Row="0" IsDirectionReversed="true" Focusable="false">
                        <Track.Thumb>
                            <Thumb x:Name="Thumb" Background="{TemplateBinding Foreground}" Style="{DynamicResource ScrollThumbs}" />
                        </Track.Thumb>
                        <Track.IncreaseRepeatButton>
                            <RepeatButton x:Name="PageUp" Command="ScrollBar.PageDownCommand" Opacity="0" Focusable="false" />
                        </Track.IncreaseRepeatButton>
                        <Track.DecreaseRepeatButton>
                            <RepeatButton x:Name="PageDown" Command="ScrollBar.PageUpCommand" Opacity="0" Focusable="false" />
                        </Track.DecreaseRepeatButton>
                    </Track>
                </Grid>

                <ControlTemplate.Triggers>
                    <Trigger SourceName="Thumb" Property="IsMouseOver" Value="true">
                        <Setter Value="{DynamicResource ButtonSelectBrush}" TargetName="Thumb" Property="Background" />
                    </Trigger>
                    <Trigger SourceName="Thumb" Property="IsDragging" Value="true">
                        <Setter Value="{DynamicResource DarkBrush}" TargetName="Thumb" Property="Background" />
                    </Trigger>

                    <Trigger Property="IsEnabled" Value="false">
                        <Setter TargetName="Thumb" Property="Visibility" Value="Collapsed" />
                    </Trigger>
                    <Trigger Property="Orientation" Value="Horizontal">
                        <Setter TargetName="GridRoot" Property="LayoutTransform">
                            <Setter.Value>
                                <RotateTransform Angle="-90" />
                            </Setter.Value>
                        </Setter>
                        <Setter TargetName="PART_Track" Property="LayoutTransform">
                            <Setter.Value>
                                <RotateTransform Angle="-90" />
                            </Setter.Value>
                        </Setter>
                        <Setter Property="Width" Value="Auto" />
                        <Setter Property="Height" Value="8" />
                        <Setter TargetName="Thumb" Property="Tag" Value="Horizontal" />
                        <Setter TargetName="PageDown" Property="Command" Value="ScrollBar.PageLeftCommand" />
                        <Setter TargetName="PageUp" Property="Command" Value="ScrollBar.PageRightCommand" />
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

It looks great, only problem being when both scrollbars are in action, there is a rectangular spot that doesn't go with the rest of the design. I'm not sure where that is coming from or what style changes i need to do. As you can see below:

There is a white rectangle at the corner where two scrollbars meet...I dont want that or at least want to be able to control how that rectangle looks like. What style changes should i be making?

Have you tried setting the `Background` color of the element containing your `ScrollBar`s to the same color as the `ScrollBar.Background`? — Meloviz, Jul 25 '16 at 13:57
A `ScrollViewer`'s `ScrollBar`s dimensions are set in their templates to the respective `Viewport` sizes (e.g. `ViewportHeight` for the vertical one). That size subtracts the width or height of the other `ScrollBar`, so you will always be left with a little square in that corner. — Meloviz, Jul 25 '16 at 15:01

score 0 · Answer 1 · edited May 23 '17 at 12:32

Using this answer from @Anonymous Coward, you can look at the template yourself of a ScrollViewer and see what I've said in my comments. Just do something like:

using(FileStream stream = new FileStream("ScrollViewerTemplate.xml"))
using(StreamWriter writer = new StreamWriter(stream))
{
    writer.WriteLine(System.Windows.Markup.XamlWriter.Save(
        new ScrollViewer() {Content = new TextBlock() {Text = "Template"}}));
}

You may have to do a little editing (add in the newlines), but you'll get the gist. That will show you that ScrollBars are template-bound to the ScrollViewer's ViewportHeight/ViewportWidth, which, as you can deduce, is the size of the visible content that does not include any ScrollBars.

So, given all of that, I would suggest that to keep that block inline with your design, just change the containing element's (maybe it's a ScrollViewer?) Background to that of the ScrollBar's backgrounds.

WPF scrollbar style

1 Answers1