Click here to Skip to main content
Click here to Skip to main content

PixelBox: A PictureBox with configurable InterpolationMode

By , 28 Jan 2014
Rate this:
Please Sign up or sign in to vote.

Introduction 

It's not often that we work with extremely low-resolution, or pixelated images, but when we do we may have differing expectations of what that image should look like.

In a recent project I wanted to show the pixelation of the images, but when shown in the default PictureBox, the pixelation could not be seen, because the control was smoothing the pixelation.

This is what I wanted (InterpolationType.NearestNeighbor): 

 

This is what I got (InterpolationType.Default): 



Background 

Windows.Forms.Controls.PictureBox is the standard control that is used to display images within a Windows Forms application. It does a decent job of this and offers some customization options, such as SizeMode, to set how an image should fit in the box.

When displaying an image at any size other than the images original size i.e. pixel-to-pixel, the extra pixels used to turn a low-resolution image into a higher one, and vise-versa have to come from somewhere. This is called interpolation, and it turns out there are many algorithms to accomplish this.

PixelBox is a custom control that is derived from PictureBox. It adds the InterpolationMode property, which has the effect of setting the GDI+ interpolation mode before the image is drawn onto the control's surface. The property is a value from the InterpolationMode enumeration.

The code 

The changes to PictureBox are quite simple. The entire class is shown below: 

using System.ComponentModel;
using System.Drawing.Drawing2D;
using System.Windows.Forms;
 
namespace RedCell.UI.Controls
{
    /// <summary>
    /// A PictureBox with configurable interpolation mode.
    /// </summary>
    public class PixelBox : PictureBox
    {
        #region Initialization
        /// <summary>
        /// Initializes a new instance of the <see cref="PixelBox"> class.
        /// </see></summary>
        public PixelBox ()
        {
            // Set default.
            InterpolationMode = InterpolationMode.Default;
        }
        #endregion
 
        #region Properties
        /// <summary>
        /// Gets or sets the interpolation mode.
        /// </summary>
        /// <value>The interpolation mode.</value>
        [Category("Behavior")]
        [DefaultValue(InterpolationMode.Default)]
        public InterpolationMode InterpolationMode { get; set; }
        #endregion
 
        #region Overrides of PictureBox
        /// <summary>
        /// Raises the <see cref="E:System.Windows.Forms.Control.Paint"> event.
        /// </see></summary>
        /// <param name="pe" />A <see cref="T:System.Windows.Forms.PaintEventArgs"> that contains the event data. 
        protected override void OnPaint (PaintEventArgs pe)
        {
            pe.Graphics.InterpolationMode = InterpolationMode;
            base.OnPaint(pe);
        }
        #endregion
    }
}
</see>

Demonstration

The demonstration application demonstrates any of the interpolation modes on a pixelated image. In addition to those shown above, here are the other modes for comparison:

InterpolationMode.Low 

InterpolationMode.High 

InterpolationMode.Bilinear 

InterpolationMode.Bicubic 

InterpolationMode.HighQualityBilinear 

InterpolationMode.HighQualityBicubic 

Conclusion

By subclassing PictureBox and overriding its OnPaint method we can set the GDI+ InterpolationMode property, giving us greater control over the algorithm, quality, and speed of rendering.   

History

January 28, 2014

Initial publication.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

About the Author

Yvan Rodrigues
President Red Cell Innovation Inc.
Canada Canada
Yvan Rodrigues has 25 years of experience in information systems and software development for the manufacturing sector. He runs Red Cell Innovation Inc./L'innovation de Globules Rouges, a consulting company focusing on efficiency and automation of manufacturing and business processes for small businesses, healthcare, and the public sector. He is a Certified Technician (C.Tech.), a professional designation granted by the Institute of Engineering Technology of Ontario (IETO).
 
Yvan draws on experience at Mabel's Labels Inc. as Manager of Systems and Development, and the University of Waterloo as Information Systems Manager.
 
Yvan supports open-source software. He is a committer for SharpKit (C# to Javascript cross-compiler) and WebIssues (Issue/Ticket Management System), and contributes to MySQL, Ghostscript, iTextSharp, Bacula, FreeBSD, MonoTouch, and Mono for Android.
 
Yvan's consumer-focused apps can be found in the Windows Store, Apple App Store, and Google Play marketplace.
Follow on   Google+   LinkedIn

Comments and Discussions

 
QuestionVery interesting article about the pixelation of the images PinprofessionalVolynsky Alex29-Jan-14 10:10 
AnswerRe: Very interesting article about the pixelation of the images PinprofessionalYvan Rodrigues29-Jan-14 10:14 
GeneralRe: Very interesting article about the pixelation of the images PinprofessionalVolynsky Alex29-Jan-14 10:17 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Mobile
Web04 | 2.8.140415.2 | Last Updated 28 Jan 2014
Article Copyright 2014 by Yvan Rodrigues
Everything else Copyright © CodeProject, 1999-2014
Terms of Use
Layout: fixed | fluid