HypernovaDesktop Components · docs
Binarymission
WPF › Extended Scroll Viewer › ExtendedScrollViewer

ExtendedScrollViewer

class.NET 6 / 8 / 10.NET Framework 4.8Binarymission.WPF.Controls.Scrollers

A scroll viewer with slim, rounded, fully colourable scroll bars that can sit beside the content or float over it, in the manner of a touch or mobile interface.

public class ExtendedScrollViewer : ScrollViewer

Inherits from / implements: ScrollViewer

Remarks

Use it in place of a ScrollViewer wherever the standard Windows scroll bars look heavy against the rest of the design: a dashboard, a chat or activity feed, a side panel, a touch-screen list. Everything a ScrollViewer does – scrolling with the wheel, the keyboard and touch, ScrollViewer.ScrollToTop and the other methods, ScrollViewer.VerticalScrollBarVisibility, ScrollViewer.CanContentScroll - works unchanged.

Size and layout

VerticalScrollBarWidth and HorizontalScrollBarHeight set the thickness of the bars, and ThumbCornerRadius rounds the thumb. With ShouldOverlayContent on, the bars float over the content instead of taking room beside it, so the content uses the full width and height of the viewer.

Line buttons

By default the bars have no arrow buttons at their ends – only a track and a thumb. Turn them on with IsVerticalLineScrollerVisualsAvailable and IsHorizontalLineScrollerVisualsAvailable; they are square, as wide as the bar, and have colours of their own for the normal, hover and pressed states.

Colours

The track, the thumb (at rest, under the pointer and while dragged) and the line buttons each have a brush. The defaults given on each property are the ones used when no Binarymission skin is in force; with a skin (BinarySkinManager) the colours come from the skin, and any brush you set on the control wins over both.

Defaults

The default style gives 18-pixel bars that appear only when the content overflows (Auto both ways), a fully rounded thumb, no line buttons, a FrameworkElement.Margin of 8 logical pixels and content aligned to the top left.

Examples

An activity feed with thin overlay scroll bars and a dark thumb.

<Window x:Class="Crm.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:sv="clr-namespace:Binarymission.WPF.Controls.Scrollers;assembly=Binarymission.WPF.Controls.ExtendedScrollViewer"
        Title="Account activity" Width="420" Height="520">

    <sv:ExtendedScrollViewer ShouldOverlayContent="True"
                             VerticalScrollBarWidth="8"
                             HorizontalScrollBarVisibility="Disabled"
                             ThumbCornerRadius="4"
                             TrackBackgroundBrush="Transparent"
                             ThumbOnNormalFillBrush="#88505A66"
                             ThumbOnMouseOverBackgroundBrush="#CC505A66"
                             ThumbOnPressedBackgroundBrush="#FF2F3740">
        <ItemsControl ItemsSource="{Binding Activities}">
            <ItemsControl.ItemTemplate>
                <DataTemplate>
                    <StackPanel Margin="12,8">
                        <TextBlock FontWeight="SemiBold" Text="{Binding Title}" />
                        <TextBlock Foreground="Gray" Text="{Binding When, StringFormat=g}" />
                    </StackPanel>
                </DataTemplate>
            </ItemsControl.ItemTemplate>
        </ItemsControl>
    </sv:ExtendedScrollViewer>
</Window>

A viewer for a large diagram, with arrow buttons on both bars, built in code.

using System;
using System.Windows.Controls;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using Binarymission.WPF.Controls.Scrollers;

ExtendedScrollViewer viewer = new ExtendedScrollViewer
{
    VerticalScrollBarWidth = 14,
    HorizontalScrollBarHeight = 14,
    IsVerticalLineScrollerVisualsAvailable = true,
    IsHorizontalLineScrollerVisualsAvailable = true,
    HorizontalScrollBarVisibility = ScrollBarVisibility.Auto,
    LineScrollerOnNormalBackgroundBrush = Brushes.SteelBlue,
    LineScrollerOnMouseOverBackgroundBrush = Brushes.DodgerBlue,
    Content = new Image { Source = new BitmapImage(new Uri("pack://application:,,,/Images/site-plan.png")) }
};

See also

Members at a glance

Properties
HorizontalScrollBarHeightGets or sets the thickness of the horizontal scroll bar.
HorizontalScrollBarMinHeightGets or sets a height the horizontal scroll bar is never made thinner than.
IsHorizontalLineScrollerVisualsAvailableGets or sets whether the horizontal scroll bar has arrow buttons at its ends that scroll a little way left or right at each click.
IsVerticalLineScrollerVisualsAvailableGets or sets whether the vertical scroll bar has arrow buttons at its ends that scroll a little way up or down at each click.
LineScrollerArrowFillBrushGets or sets the colour of the small triangle drawn on each arrow button.
LineScrollerOnMouseOverBackgroundBrushGets or sets the fill of an arrow button while the pointer is over it.
LineScrollerOnMouseOverBorderBrushGets or sets the colour of the outline round an arrow button while the pointer is over it.
LineScrollerOnNormalBackgroundBrushGets or sets the fill of each arrow button while the pointer is not over it.
LineScrollerOnNormalBorderBrushGets or sets the colour of the one-pixel outline round each arrow button while the pointer is not over it.
LineScrollerOnPressedBackgroundBrushGets or sets the fill of an arrow button while it is held down.
LineScrollerOnPressedBorderBrushGets or sets the colour of the outline round an arrow button while it is held down.
ShouldOverlayContentGets or sets whether the scroll bars float over the content rather than taking room of their own beside it.
ThumbCornerRadiusGets or sets how far the corners of the scroll bars' thumbs are rounded.
ThumbOnMouseOverBackgroundBrushGets or sets the colour of a scroll bar's thumb while the pointer is over it.
ThumbOnNormalFillBrushGets or sets the colour of the scroll bars' thumbs while the pointer is not over them.
ThumbOnPressedBackgroundBrushGets or sets the colour of a scroll bar's thumb while it is being dragged.
TrackBackgroundBrushGets or sets the colour of the scroll bars' tracks – the channel the thumb slides along.
VerticalScrollBarMinWidthGets or sets a width the vertical scroll bar is never made thinner than.
VerticalScrollBarWidthGets or sets the thickness of the vertical scroll bar.
Fields
HorizontalScrollBarHeightPropertyIdentifies the HorizontalScrollBarHeight dependency property.
HorizontalScrollBarMinHeightPropertyIdentifies the HorizontalScrollBarMinHeight dependency property.
IsHorizontalLineScrollerVisualsAvailablePropertyIdentifies the IsHorizontalLineScrollerVisualsAvailable dependency property.
IsVerticalLineScrollerVisualsAvailablePropertyIdentifies the IsVerticalLineScrollerVisualsAvailable dependency property.
LineScrollerArrowFillBrushPropertyIdentifies the LineScrollerArrowFillBrush dependency property.
LineScrollerOnMouseOverBackgroundBrushPropertyIdentifies the LineScrollerOnMouseOverBackgroundBrush dependency property.
LineScrollerOnMouseOverBorderBrushPropertyIdentifies the LineScrollerOnMouseOverBorderBrush dependency property.
LineScrollerOnNormalBackgroundBrushPropertyIdentifies the LineScrollerOnNormalBackgroundBrush dependency property.
LineScrollerOnNormalBorderBrushPropertyIdentifies the LineScrollerOnNormalBorderBrush dependency property.
LineScrollerOnPressedBackgroundBrushPropertyIdentifies the LineScrollerOnPressedBackgroundBrush dependency property.
LineScrollerOnPressedBorderBrushPropertyIdentifies the LineScrollerOnPressedBorderBrush dependency property.
ShouldOverlayContentPropertyIdentifies the ShouldOverlayContent dependency property.
ThumbCornerRadiusPropertyIdentifies the ThumbCornerRadius dependency property.
ThumbOnMouseOverBackgroundBrushPropertyIdentifies the ThumbOnMouseOverBackgroundBrush dependency property.
ThumbOnNormalFillBrushPropertyIdentifies the ThumbOnNormalFillBrush dependency property.
ThumbOnPressedBackgroundBrushPropertyIdentifies the ThumbOnPressedBackgroundBrush dependency property.
TrackBackgroundBrushPropertyIdentifies the TrackBackgroundBrush dependency property.
VerticalScrollBarMinWidthPropertyIdentifies the VerticalScrollBarMinWidth dependency property.
VerticalScrollBarWidthPropertyIdentifies the VerticalScrollBarWidth dependency property.

Properties

HorizontalScrollBarHeight

public int HorizontalScrollBarHeight

Gets or sets the thickness of the horizontal scroll bar.

Value
The height of the bar in whole logical pixels (1/96 inch). The default style sets 18; the value registered on the property is 42.
Remarks

The thumb is as tall as the bar, and the arrow buttons, when shown, are square at this size. HorizontalScrollBarMinHeight overrides it when larger.

See also

HorizontalScrollBarMinHeight

public int HorizontalScrollBarMinHeight

Gets or sets a height the horizontal scroll bar is never made thinner than.

Value
A height in whole logical pixels (1/96 inch). The default is 0: no minimum, so HorizontalScrollBarHeight alone decides the thickness.
Remarks

When larger than HorizontalScrollBarHeight it wins. It is useful where the height is bound to something that can shrink – a zoom level or a density setting – and the bar must stay large enough to grab.

IsHorizontalLineScrollerVisualsAvailable

public bool IsHorizontalLineScrollerVisualsAvailable

Gets or sets whether the horizontal scroll bar has arrow buttons at its ends that scroll a little way left or right at each click.

Value
true to show the buttons. The default is false: the bar has only a track and a thumb.
Remarks

The buttons are square, each as wide as HorizontalScrollBarHeight, and repeat while held down. Their colours are the LineScroller* brushes, such as LineScrollerOnNormalBackgroundBrush and LineScrollerArrowFillBrush.

See also

IsVerticalLineScrollerVisualsAvailable

public bool IsVerticalLineScrollerVisualsAvailable

Gets or sets whether the vertical scroll bar has arrow buttons at its ends that scroll a little way up or down at each click.

Value
true to show the buttons. The default is false: the bar has only a track and a thumb.
Remarks

The buttons are square, each as tall as VerticalScrollBarWidth, and repeat while held down. Their colours are the LineScroller* brushes, such as LineScrollerOnNormalBackgroundBrush and LineScrollerArrowFillBrush.

See also

LineScrollerArrowFillBrush

public Brush LineScrollerArrowFillBrush

Gets or sets the colour of the small triangle drawn on each arrow button.

Value
The default is Brushes.White.
Remarks

The same colour is used in every state, so pick one that reads against all three button fills.

See also

LineScrollerOnMouseOverBackgroundBrush

public Brush LineScrollerOnMouseOverBackgroundBrush

Gets or sets the fill of an arrow button while the pointer is over it.

Value
The default is Brushes.Red.
See also

LineScrollerOnMouseOverBorderBrush

public Brush LineScrollerOnMouseOverBorderBrush

Gets or sets the colour of the outline round an arrow button while the pointer is over it.

Value
The default is Brushes.Orange.
See also

LineScrollerOnNormalBackgroundBrush

public Brush LineScrollerOnNormalBackgroundBrush

Gets or sets the fill of each arrow button while the pointer is not over it.

Value
The default is Brushes.Green.
Remarks

The arrow itself is drawn with LineScrollerArrowFillBrush. Arrow buttons are shown only when IsVerticalLineScrollerVisualsAvailable or IsHorizontalLineScrollerVisualsAvailable is on.

See also

LineScrollerOnNormalBorderBrush

public Brush LineScrollerOnNormalBorderBrush

Gets or sets the colour of the one-pixel outline round each arrow button while the pointer is not over it.

Value
The default is Brushes.LightGreen.
Remarks

Arrow buttons are shown only when IsVerticalLineScrollerVisualsAvailable or IsHorizontalLineScrollerVisualsAvailable is on.

See also

LineScrollerOnPressedBackgroundBrush

public Brush LineScrollerOnPressedBackgroundBrush

Gets or sets the fill of an arrow button while it is held down.

Value
The default is Brushes.White.
Remarks

Choose a colour that the arrow (LineScrollerArrowFillBrush) still shows against: with the defaults, a white arrow on this white fill disappears while the button is held.

See also

LineScrollerOnPressedBorderBrush

public Brush LineScrollerOnPressedBorderBrush

Gets or sets the colour of the outline round an arrow button while it is held down.

Value
The default is Brushes.Black.
See also

ShouldOverlayContent

public bool ShouldOverlayContent

Gets or sets whether the scroll bars float over the content rather than taking room of their own beside it.

Value
true to draw the bars over the content. The default is false: the bars sit in a column and a row of their own, as in a standard ScrollViewer.
Remarks

Overlaid, the content keeps the full width and height of the viewer, so it does not reflow when a bar appears or disappears. Use thin bars (see VerticalScrollBarWidth) and a transparent TrackBackgroundBrush so the content shows round the thumb, and leave some padding at the right of the content so that the bar does not cover text.

Example
<sv:ExtendedScrollViewer ShouldOverlayContent="True"
                         VerticalScrollBarWidth="6"
                         TrackBackgroundBrush="Transparent" />

ThumbCornerRadius

public CornerRadius ThumbCornerRadius

Gets or sets how far the corners of the scroll bars' thumbs are rounded.

Value
The radius of each corner in logical pixels (1/96 inch). The default is 50 on every corner, which rounds any thumb thinner than 100 pixels into a pill.
Remarks

A radius larger than half the thumb's thickness gives fully rounded ends. Use 0 for square thumbs, or a radius of about a quarter of the bar's thickness for slightly softened corners.

ThumbOnMouseOverBackgroundBrush

public Brush ThumbOnMouseOverBackgroundBrush

Gets or sets the colour of a scroll bar's thumb while the pointer is over it.

Value
The default is Brushes.Red.
See also

ThumbOnNormalFillBrush

public Brush ThumbOnNormalFillBrush

Gets or sets the colour of the scroll bars' thumbs while the pointer is not over them.

Value
The default is Brushes.LightBlue.
See also

ThumbOnPressedBackgroundBrush

public Brush ThumbOnPressedBackgroundBrush

Gets or sets the colour of a scroll bar's thumb while it is being dragged.

Value
The default is Brushes.White.
See also

TrackBackgroundBrush

public Brush TrackBackgroundBrush

Gets or sets the colour of the scroll bars' tracks – the channel the thumb slides along.

Value
The default is a half-transparent silver (#7FBFBFBF), so the content behind shows faintly when the bars float over it.
Remarks

Set it to Brushes.Transparent for bars that are only a thumb, which suits ShouldOverlayContent. The track still answers clicks, which page through the content.

VerticalScrollBarMinWidth

public int VerticalScrollBarMinWidth

Gets or sets a width the vertical scroll bar is never made thinner than.

Value
A width in whole logical pixels (1/96 inch). The default is 0: no minimum, so VerticalScrollBarWidth alone decides the thickness.
Remarks

When larger than VerticalScrollBarWidth it wins. It is useful where the width is bound to something that can shrink – a zoom level or a density setting – and the bar must stay large enough to grab.

VerticalScrollBarWidth

public int VerticalScrollBarWidth

Gets or sets the thickness of the vertical scroll bar.

Value
The width of the bar in whole logical pixels (1/96 inch). The default style sets 18; the value registered on the property is 42.
Remarks

The thumb is as wide as the bar, and the arrow buttons, when shown, are square at this size. Thin bars of 6 to 10 pixels suit ShouldOverlayContent; 30 pixels or more suit a touch screen. VerticalScrollBarMinWidth overrides it when larger.

See also

Fields

HorizontalScrollBarHeightProperty static

public static readonly DependencyProperty HorizontalScrollBarHeightProperty

Identifies the HorizontalScrollBarHeight dependency property.

HorizontalScrollBarMinHeightProperty static

public static readonly DependencyProperty HorizontalScrollBarMinHeightProperty

Identifies the HorizontalScrollBarMinHeight dependency property.

IsHorizontalLineScrollerVisualsAvailableProperty static

public static readonly DependencyProperty IsHorizontalLineScrollerVisualsAvailableProperty

Identifies the IsHorizontalLineScrollerVisualsAvailable dependency property.

IsVerticalLineScrollerVisualsAvailableProperty static

public static readonly DependencyProperty IsVerticalLineScrollerVisualsAvailableProperty

Identifies the IsVerticalLineScrollerVisualsAvailable dependency property.

LineScrollerArrowFillBrushProperty static

public static readonly DependencyProperty LineScrollerArrowFillBrushProperty

Identifies the LineScrollerArrowFillBrush dependency property.

LineScrollerOnMouseOverBackgroundBrushProperty static

public static readonly DependencyProperty LineScrollerOnMouseOverBackgroundBrushProperty

Identifies the LineScrollerOnMouseOverBackgroundBrush dependency property.

LineScrollerOnMouseOverBorderBrushProperty static

public static readonly DependencyProperty LineScrollerOnMouseOverBorderBrushProperty

Identifies the LineScrollerOnMouseOverBorderBrush dependency property.

LineScrollerOnNormalBackgroundBrushProperty static

public static readonly DependencyProperty LineScrollerOnNormalBackgroundBrushProperty

Identifies the LineScrollerOnNormalBackgroundBrush dependency property.

LineScrollerOnNormalBorderBrushProperty static

public static readonly DependencyProperty LineScrollerOnNormalBorderBrushProperty

Identifies the LineScrollerOnNormalBorderBrush dependency property.

LineScrollerOnPressedBackgroundBrushProperty static

public static readonly DependencyProperty LineScrollerOnPressedBackgroundBrushProperty

Identifies the LineScrollerOnPressedBackgroundBrush dependency property.

LineScrollerOnPressedBorderBrushProperty static

public static readonly DependencyProperty LineScrollerOnPressedBorderBrushProperty

Identifies the LineScrollerOnPressedBorderBrush dependency property.

ShouldOverlayContentProperty static

public static readonly DependencyProperty ShouldOverlayContentProperty

Identifies the ShouldOverlayContent dependency property.

ThumbCornerRadiusProperty static

public static readonly DependencyProperty ThumbCornerRadiusProperty

Identifies the ThumbCornerRadius dependency property.

ThumbOnMouseOverBackgroundBrushProperty static

public static readonly DependencyProperty ThumbOnMouseOverBackgroundBrushProperty

Identifies the ThumbOnMouseOverBackgroundBrush dependency property.

ThumbOnNormalFillBrushProperty static

public static readonly DependencyProperty ThumbOnNormalFillBrushProperty

Identifies the ThumbOnNormalFillBrush dependency property.

ThumbOnPressedBackgroundBrushProperty static

public static readonly DependencyProperty ThumbOnPressedBackgroundBrushProperty

Identifies the ThumbOnPressedBackgroundBrush dependency property.

TrackBackgroundBrushProperty static

public static readonly DependencyProperty TrackBackgroundBrushProperty

Identifies the TrackBackgroundBrush dependency property.

VerticalScrollBarMinWidthProperty static

public static readonly DependencyProperty VerticalScrollBarMinWidthProperty

Identifies the VerticalScrollBarMinWidth dependency property.

VerticalScrollBarWidthProperty static

public static readonly DependencyProperty VerticalScrollBarWidthProperty

Identifies the VerticalScrollBarWidth dependency property.