This is the first part in a series of articles that will result in a component for viewing an image. The final component will support zooming and scrolling.
In this first part, we're going to create a basic image viewer, without the scrolling and zooming. Rather than having a plain background however, we're going to create a two tone checker box effect which is often used for showing transparent images. We'll also allow this to be disabled and a solid colour used instead.
The component inherits from
Control rather than something
Panel as we want to provide a lot of
our own behaviour.
The first thing we'll do is override some properties - to hide
the ones we won't be using such as
Font, and to
modify others, such as making
AutoSize visible, and changing
the default value of
Next is to add some new properties. We'll create the following properties and respective change events:
BorderStyle- A standard border style.
GridCellSize- The basic cell size.
GridColorAlternate- The colors used to create the checkerboard style background.
GridScale- A property for scaling the
GridCellSizefor user interface options.
Image- The image to be displayed.
ShowGrid- Flag to determine if the checkerboard background should be displayed.
As we are offering auto size support, we also override some existing events so we can resize when certain actions occur, such as changing the control's padding or parent.
As well as setting up default property values, the component's constructor also adjusts several control styles.
AllPaintingInWmPaint- We don't need a separate
OnPaintwill do fine.
UserPaint- As we are doing entirely our own painting, we disable the base Control's painting.
OptimizedDoubleBuffer- Double buffering means the painting will occur in a memory buffer before being transferred to the screen, reducing flicker.
ResizeRedraw- Automatically redraw the component if it is resized.
Selectable- We disable this flag as we don't want the control to be receiving focus.
CreateGridTileImage method creates a tile of a 2x2 grid
using many of the properties listed above which is then tiled
across the background of the control.
As described above, we've disabled all default painting, so we
simply need to override
OnPaint and do our custom painting
First, we either draw a solid background using the
false, otherwise we tile the grid
image created earlier.
Next we draw the actual image, if one has been set. The image is offset based on the border style and padding.
Finally we draw the border style to ensure it appears on top of the image if autosize is disabled and the control is too small.
You can download the first sample project from the links below. The next article in the series will look at implementing scrolling for when the image is larger than the display area of the control.
- 2010-08-12 - First published
- 2020-11-21 - Updated formatting
Like what you're reading? Perhaps you like to buy us a coffee?
- Displaying multi-page tiff files using the ImageBox control and C#
- Adding drag handles to an ImageBox to allow resizing of selection regions
- ImageBox 184.108.40.206 update
- ImageBox and TabList update's - virtual mode, pixel grid, bug fixes and more!
- ImageBox update, version 220.127.116.11
- Zooming to fit a region in a ScrollableControl
- Zooming into a fixed point on a ScrollableControl
- Creating an image viewer in C# Part 5: Selecting part of an image
- Extending the ImageBox component to display the contents of a PDF file using C#
- Creating a scrollable and zoomable image viewer in C# Part 4
- Creating a scrollable and zoomable image viewer in C# Part 3
- Creating a scrollable and zoomable image viewer in C# Part 2
- Creating a scrollable and zoomable image viewer in C# Part 1