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 an ImageViewer with ThumbnailViewer, 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.ThumbnailSizeproperty. 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 withWpfThumbnailViewer.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 or custom text, padding, anchor, text font, text color.
Here is C#/VB.NET code that shows how to customize the thumbnail caption using ThumbnailImageItemCaption.CaptionFormatted event:

/// <summary>
/// Sets the custom thumbnail caption.
/// </summary>
/// <param name="thumbnailViewer">The thumbnail viewer.</param>
public static void SetCustomThumbnailCaption(Vintasoft.Imaging.Wpf.UI.WpfThumbnailViewer thumbnailViewer)
{
    thumbnailViewer.ThumbnailCaption.CaptionFormatted += ThumbnailCaption_CaptionFormatted;
    thumbnailViewer.ThumbnailCaption.IsVisible = true;
}

/// <summary>
/// Handles the CaptionFormatted event of the ThumbnailCaption.
/// </summary>
/// <param name="sender">The source of the event.</param>
/// <param name="e">The <see cref="Vintasoft.Imaging.Wpf.UI.ThumbnailImageItemCaptionFormattedEventArgs"/> instance containing the event data.</param>
private static void ThumbnailCaption_CaptionFormatted(object sender, Vintasoft.Imaging.Wpf.UI.ThumbnailImageItemCaptionFormattedEventArgs e)
{
    Vintasoft.Imaging.VintasoftImage image = e.Thumbnail.Source;
    int imageIndex = e.ThumbnailViewer.Images.IndexOf(image);
    if (e.ThumbnailViewer.SelectedThumbnails.Contains(e.Thumbnail))
    {
        e.Caption = "Selected";
    }
    else
    {
        e.Caption = string.Format("{0}, page {1}", System.IO.Path.GetFileName(image.SourceInfo.Filename), image.SourceInfo.PageIndex + 1);
    }
}

VB.NET

''' <summary>
''' Sets the custom thumbnail caption.
''' </summary>
''' <param name="thumbnailViewer">The thumbnail viewer.</param>
Public Shared Sub SetCustomThumbnailCaption(thumbnailViewer As Vintasoft.Imaging.Wpf.UI.WpfThumbnailViewer)
    AddHandler thumbnailViewer.ThumbnailCaption.CaptionFormatted, AddressOf ThumbnailCaption_CaptionFormatted
    thumbnailViewer.ThumbnailCaption.IsVisible = True
End Sub

''' <summary>
''' Handles the CaptionFormatted event of the ThumbnailCaption.
''' </summary>
''' <param name="sender">The source of the event.</param>
''' <param name="e">The <see cref="Vintasoft.Imaging.Wpf.UI.ThumbnailImageItemCaptionFormattedEventArgs"/> instance containing the event data.</param>
Private Shared Sub ThumbnailCaption_CaptionFormatted(sender As Object, e As Vintasoft.Imaging.Wpf.UI.ThumbnailImageItemCaptionFormattedEventArgs)
    Dim image As Vintasoft.Imaging.VintasoftImage = e.Thumbnail.Source
    Dim imageIndex As Integer = e.ThumbnailViewer.Images.IndexOf(image)
    If e.ThumbnailViewer.SelectedThumbnails.Contains(e.Thumbnail) Then
        e.Caption = "Selected"
    Else
        e.Caption = String.Format("{0}, page {1}", System.IO.Path.GetFileName(image.SourceInfo.Filename), image.SourceInfo.PageIndex + 1)
    End If
End Sub

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