View thumbnails in WPF

In This Topic

WpfThumbnailViewer is a WPF control designed to display thumbnails of associated image collection.

WpfThumbnailViewer can work separately

WpfThumbnailViewer creates own image collection
associated image collection can be accessed with the WpfImageViewerBase.Images property
image collection can be navigated with the WpfImageViewerBase.FocusedIndex property
thumbnail is added/updated/removed if image is added/updated/removed from associated image collection

WpfThumbnailViewer can work as a slave viewer of another WpfImageViewer or WpfThumbnailViewer

link between viewers can be set with the WpfImageViewerBase.MasterViewer property of the slave viewer
slave viewer uses image collection of the master viewer
shared image collection can be accessed with the WpfImageViewerBase.Images property of master or slave viewer
image collection can be navigated with the WpfImageViewerBase.FocusedIndex property of master or slave viewer
WpfImageViewerBase.FocusedIndex properties of master and slave viewer are changed synchronously
image is added/updated/removed in image viewer if image is added/updated/removed from associated image collection

Here is C#/VB.NET code that shows how to load images to ImageViewer, link ImageViewer with ThumbnailViewer and invert the first image in the image collection - the image in ImageViewer and the thumbnail in ThumbnailViewer will be inverted:

wpfImageViewer1.Images.Add("myimages.tif");
wpfThumbnailViewer1.MasterViewer = wpfImageViewer1;
wpfImageViewer1.Images[0].Invert();

VB.NET

wpfImageViewer1.Images.Add("myimages.tif")
wpfThumbnailViewer1.MasterViewer = wpfImageViewer1
wpfImageViewer1.Images(0).Invert()

Thumbnail size

Thumbnails have 2 sizes:

physical size - size of bitmap associated with thumbnail
visible size - size of bitmap associated with thumbnail after scaling

Physical size of thumbnails can be set with the WpfThumbnailViewer.ThumbnailSize property. The minimal physical size of thumbnail is 32x32 pixels, the maximal physical size of thumbnail is 1024x1024 pixels.

Visible size of thumbnails can be set with the WpfThumbnailViewer.ThumbnailScale property. Visible size is calculated as multiplication of physical size and scaling factor.
Here is a list of scaling factors:

Smallest - visible size is 0.5 of the physical size
Small - visible size is 0.75 of the physical size
Normal - visible size is equal to the physical size
Large - visible size is 1.5 of the physical size

Two blocks of memory can be allocated for thumbnails:

Memory for original thumbnails is a memory block for thumbnails with WpfThumbnailViewer.ThumbnailSize
Memory for scaled thumbnails is a memory for scaled thumbnails if WpfThumbnailViewer.ThumbnailScale is not equal Normal

Thumbnails are created anew and memory for original thumbnails is allocated anew when WpfThumbnailViewer.ThumbnailSize is changed.

Existing thumbnails are scaled when WpfThumbnailViewer.ThumbnailScale is changed, memory for scaled thumbnails is allocated if WpfThumbnailViewer.ThumbnailScale is not equal Normal.

Important: Do not use large size of thumbnails if this is not necessary.

Thumbnail appearance and caption

Define thumbnail appearance using properties

Appearance of thumbnails in WpfThumbnailViewer can be changed with WPF style.

WpfThumbnailViewer.ThumbnailContainerStyle property allows to get/set the current thumbnails style used in WpfThumbnailViewer.

Standard thumbnails style is defined in ThumbnailImageItemStyle class.

Define thumbnail caption using properties

The ThumbnailImageItemCaption class allows to define the thumbnail caption: caption format, padding, anchor, text font, text color.

The WpfThumbnailViewer.ThumbnailCaption property allows to get or set caption of thumbnail in thumbnail viewer.

Examples

Main window of WpfImagingDemo (MainWindow.xaml file) contains a XAML code that shows how to create a custom style for thumbnails of WpfThumbnailViewer.

Tooltip of thumbnails

WpfThumbnailViewer allows to show tooltips for thumbnails.

Tooltip of thumbnail can be set with the ThumbnailImageItem.ToolTip property.

Thumbnail viewer events

WpfThumbnailViewer can raise the following events:

WpfThumbnailViewer.ThumbnailsLoadingProgress event occurs when the loading progress of thumbnails is changed
WpfThumbnailViewer.ThumbnailLoading event occurs when thumbnail is loading
WpfThumbnailViewer.ThumbnailLoaded event occurs when thumbnail is loaded
WpfThumbnailViewer.ThumbnailLoadingException event occurs when thumbnail is not loaded because of error
WpfThumbnailViewer.ThumbnailAdded event occurs when thumbnail is added to thumbnail viewer
WpfThumbnailViewer.ThumbnailsLoaded event occurs when the thumbnails are loaded

Thumbnail rendering

WpfThumbnailViewer renders thumbnails in a separate threads, number of threads for thumbnail rendering can be set with the WpfThumbnailViewer.ThumbnailRenderingThreadCount property.

All thumbnails are generated by default. WpfThumbnailViewer.GenerateOnlyVisibleThumbnails property allows to generate only visible thumbnails, this can be necessary for slow computers.

Context menu of thumbnail viewer

WpfThumbnailViewer can have standard WPF context menu as any WPF control.

Hot keys of thumbnail viewer

WpfThumbnailViewer has hot keys:

Ctrl+C - copies image of selected thumbnail to clipboard
Ctrl+X - copies image of selected thumbnail to clipboard and removes image from associated image collection
Ctrl+V - inserts image from clipboard as image of selected thumbnail
Del - deletes selected thumbnails and images from associated image collection
Ctrl+A - selects all thumbnails

Hot keys can be enabled/disabled with the WpfImageViewerBase.InputGestureCopy, WpfImageViewerBase.InputGestureCut, WpfImageViewerBase.InputGestureInsert, WpfImageViewerBase.InputGestureDelete, WpfThumbnailViewer.InputGestureSelectAll properties.
Behaviour of hot keys can be overriden with the WpfImageViewerBase.GetCopyCommand, WpfImageViewerBase.GetCutCommand, WpfImageViewerBase.GetInsertCommand, WpfImageViewerBase.GetDeleteCommand methods.

Select multiple thumbnail in thumbnail viewer

WpfThumbnailViewer allows to select thumbnails, selected thumbnails can be accessed with the WpfThumbnailViewer.SelectedThumbnails property.

WpfThumbnailViewer.MultiSelect property allows to specify that multiple thumbnails can be selected.

Drag-and-drop thumbnails in thumbnail viewer

WpfThumbnailViewer allows drag-and-drop thumbnails. In order to drag the thumbnail, just hover your cursor on it, hold left mouse button and pull the cursor to the desired position.

Drag-and-drop feature can be enabled/disabled with the WpfThumbnailViewer.AllowDrop or WpfThumbnailViewer.AllowDrag properties.

Send Feedback