View thumbnails in WinForms
In This Topic
ThumbnailViewer is a WinForms control designed to display thumbnails of associated image collection.
ThumbnailViewer
can work separately
ThumbnailViewer
can work as a
slave viewer of another
ImageViewer or
ThumbnailViewer
- link between viewers can be set with the ImageViewerBase.MasterViewer property of the slave viewer
- slave viewer uses image collection of the master viewer
- shared image collection can be accessed with the ImageViewerBase.Images property of master or slave viewer
- image collection can be navigated with the ImageViewerBase.FocusedIndex property of master or slave viewer
- ImageViewerBase.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 an example 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:
imageViewer1.Images.Add("myimages.tif");
thumbnailViewer1.MasterViewer = imageViewer1;
imageViewer1.Images[0].Invert();
imageViewer1.Images.Add("myimages.tif")
thumbnailViewer1.MasterViewer = imageViewer1
imageViewer1.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
ThumbnailViewer.ThumbnailSize property.
The minimum
physical size of thumbnail is 32x32 pixels, the maximum
physical
size of thumbnail is 1024x1024 pixels.
Visible size of thumbnails can be set with the
ThumbnailViewer.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
2 blocks of memory can be allocated for thumbnails:
Old thumbnails will be destroyed (used memory will be freed) and
new thumbnails will be created (new
memory for original thumbnails will be allocated) when
ThumbnailViewer.ThumbnailSize is changed.
Existing thumbnails are scaled when
ThumbnailViewer.ThumbnailScale is changed,
memory for scaled thumbnails is allocated if
ThumbnailViewer.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
The
ThumbnailAppearance class allows to define the thumbnail appearance using the properties:
back color, border color, border style and border width of thumbnail.
ThumbnailViewer has properties, which allow to define the "standard" thumbnail appearances:
Also
ThumbnailViewer allows to set the thumbnail appearance on the fly.
For doing this is necessary to subscribe to the
ThumbnailViewer.ThumbnailAppearanceSelected event
and change the thumbnail appearance in the event handler.
Define thumbnail caption using properties
The
ThumbnailCaption class allows to define the thumbnail caption: caption format, padding, anchor, text font, text color.
The
ThumbnailViewer.ThumbnailCaption property allows to get or set caption of thumbnail in thumbnail viewer.
Draw the thumbnail in thumbnail viewer
If you cannot define the thumbnail appearance or caption using properties,
you can use the low-level functionality -
the
ThumbnailViewer.ThumbnailPainting and
ThumbnailViewer.ThumbnailPainted events,
i.e. draw graphics under thumbnail in handler of
ThumbnailViewer.ThumbnailPainting event and/or
draw graphics over thumbnail in handler of
ThumbnailViewer.ThumbnailPainted event.
Examples
Thumbnail Viewer Demo and
Simple Demos projects show how to create thumbnail viewers with custom appearances.
Tooltip of thumbnails
ThumbnailViewer allows to show tooltips for thumbnails.
Tooltips can be generated automatically
or specified manually
Thumbnail viewer events
ThumbnailViewer can raise the following events:
Thumbnail rendering
ThumbnailViewer can render thumbnails in multiple threads.
Count of rendering threads can be get/set using the
ThumbnailViewer.ThumbnailRenderingThreadCount property.
By default
ThumbnailViewer renders thumbnails in a single thread.
All thumbnails are generated by default.
ThumbnailViewer.GenerateOnlyVisibleThumbnails property allows to generate only visible thumbnails,
this can be necessary for slow computers.
Context menus of thumbnail viewer
The ThumbnailViewer.ContextMenuStrip property allows to set the context menu, which is associated with the thumbnail viewer.
The
ThumbnailViewer.ThumbnailContextMenuStrip property allows to set the context menu, which is associated with a single thumbnail.
The
ThumbnailViewer.DisableThumbnailContextMenu property allows to disable the context menu for a single thumbnail.
Hot keys of thumbnail viewer
ThumbnailViewer 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
ImageViewerBase.ShortcutCopy,
ImageViewerBase.ShortcutCut,
ImageViewerBase.ShortcutInsert,
ImageViewerBase.ShortcutDelete,
ImageViewerBase.ShortcutSelectAll properties.
Behaviour of hot keys can be overriden with the
ImageViewerBase.DoCopy,
ImageViewerBase.DoCut,
ImageViewerBase.DoInsert,
ImageViewerBase.DoDelete,
ImageViewerBase.DoSelectAll methods.
Select multiple thumbnail in thumbnail viewer
ThumbnailViewer
allows to select several thumbnails at the same time, indices of selected thumbnails can
be accessed with the
ThumbnailViewer.SelectedIndices property.
ThumbnailViewer.SelectedIndices is a "snapshot" of indices collection (read only)
of allocated thumbnails. If you work with a copy of the collection,
you must note that the
ThumbnailViewer.SelectedIndices
property could be changed depending on the user's actions and your copy
may become irrelevant.
Drag-and-drop thumbnails in thumbnail viewer
ThumbnailViewer
allows to 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. Thumbnails drag-and-drop process changes
their indexes in the
ImageViewerBase.Images collection, which means that indexes in the
ThumbnailViewer.SelectedIndices collection will change too. That's why we do not recommend using
a copy of this collection.
Drag-and-drop feature can be enabled/disabled with the
ThumbnailViewer.AllowDrop or
ThumbnailViewer.AllowDrag properties.