Extended Scroll Viewer

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.

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")) }
};