Scrollable Picture

What it is for

Use it to show an image at its own pixel size when it does not fit: a scanned delivery note, a site plan, a large chart. Assign Image; the control shows its VerticalScrollBar when the image is taller than the control and its HorizontalScrollBar when it is wider.

How it scrolls

The image is drawn from its top-left corner, unscaled. Scrolling shifts the pixels already on screen and draws only the strip that comes into view, so a large image scrolls smoothly. One arrow click, arrow key or wheel notch moves by ScrollSize, a page by the visible size. Whenever the image or the control is resized the bars are recalculated and their thumbs return to the start.

Keyboard and mouse

A click gives the control the focus. With the focus, Up / Down / Left / Right scroll by ScrollSize and Page Up / Page Down by a page; the wheel scrolls vertically, and horizontally with Shift.

Appearance

The area the image does not cover is filled in the system control colour. Theme the bars through VerticalScrollBar and HorizontalScrollBar; their thickness is in device pixels and follows the system scroll bar size (see ScrollBarBase). The bars have no right-click menu unless you turn it on.

using Binarymission.WinForms.Controls.Containers;
using Binarymission.WinForms.Controls.ScrollBars;

var sitePlan = new ScrollablePicture
{
    Dock = DockStyle.Fill,
    ScrollSize = new Size(32, 32),
    Image = new Bitmap(@"C:\Plans\Warehouse-Level2.png"),
};

sitePlan.VerticalScrollBar.ScrollBarRenderingConfigurator.ColorTheme = ColorTheme.OfficeSilver;
sitePlan.HorizontalScrollBar.ScrollBarRenderingConfigurator.ColorTheme = ColorTheme.OfficeSilver;
sitePlan.VerticalScrollBar.IsDefaultScrollContextMenuEnabled = true;

Controls.Add(sitePlan);