Skip to main content

SIV

Scrollable Image Viewer Control

The .NET Base Class Library comes with a PictureBox control that is used for displaying images. Although it offers a few scaling modes, unfortunately, it does not provide a scrolling facility. This article presents a picture box like control [Scrollable Image Viewer Control or SIV Control] that is used to display images in one of two modes:-

Full Image Mode: In this mode, the entire view of the image can be seen. The image is fit to the ScrollableImageViewer control window. It is like the world view we see in maps.

Blown-up Image Mode: In this mode, the image is not scaled, but is displayed with its original dimensions. So, if any dimension (width or height) of the image is larger than the size of the display area, then (horizontal or vertical or both) scroll bars appear, which can be used to scroll and view the image.


Blown-up Image Mode


Full Image Mode

Background

So, why do we need such a control? In applications where a live image display is required, a control that shows the image in one of the above two modes is desperately wanted. It is really sad that .NET BCL does not provide one. And in my experience, I have not used, and have not seen programmers using, many of the scaling modes provided by the PictureBox, except the Stretch and Normal modes. Pardon me, I may be unaware.

Control Basics

I would say this is the easiest part of the article. Our control here is is a UserControl. It has a picture box docked to fill the area of the UserControl, and (horizontal and vertical) scrollbars docked to the edges (bottom and right). The display and value range of the scrollbars are controlled by the image chosen for display. The code snippet below shows the typical way of creating the control:-

ScrollableImageViewer siViewer = new ScrollableImageViewer();
// ScrollableImageViewer siViewer = new ScrollableImageViewer(@”C:\SomeImage.bmp”);
 
this.siViewer.Name = "siViewer";
this.siViewer.Dock = DockStyle.Fill;
this.siViewer.ShowFullImage = true; // Shows the full image
this.Controls.Add(this.siViewer);

Drawing the Image

This is the IP that you have to maintain secrecy about. The DrawImage is responsible for drawing the image based on the scroll position. When the scrollbars are dragged, the image is drawn, with the offsets borrowed from the scrollbar positions so that we see the image scrolled.

private void DrawImage(int startX, int startY)
{
    if (this.pbImage == null)
    {
        return;
    }
    
    Graphics pbGraphics = this.pictureBox.CreateGraphics();
    BufferedGraphicsContext currentGraphicsContext = BufferedGraphicsManager.Current;
    
    Rectangle targetRect = new Rectangle(0, 0,
    Math.Min(this.pictureBox.DisplayRectangle.Width, this.pbImage.Width),
    Math.Min(this.pictureBox.DisplayRectangle.Height, this.pbImage.Height));
    
    using (BufferedGraphics pbGDIBuffer = 
    currentGraphicsContext.Allocate(pbGraphics, targetRect))
    {
        Rectangle drawRect = new Rectangle(startX,
        startY,
        this.pbImage.Width,
        this.pbImage.Height); 
        
        pbGDIBuffer.Graphics.DrawImageUnscaledAndClipped(this.pbImage, drawRect);
        
        pbGDIBuffer.Render();
    }
}

Points of Interest

Since double buffering is being used, the drawing of the image even during scrolling is flicker-free, and is also good to use for large images. Besides that, the control is tolerant to size changes. The scroll bars and the image get automatically adjusted when the control size changes. You can make the display void by setting the Picture property on the control to null. For an image which shows up the scroll bars, a large change of the value of the scroll bar is assumed as 10% of the scrollbar maximum value. That means, it is kind of hard-coded. I hope this must not be an issue. But, for cases that require this value to be changeable at runtime, a little tweak would do – take the percentage of the maximum value that the large change value has to assume.

Popular posts from this blog

Extension Methods - A Polished C++ Feature !!!

Extension Method is an excellent feature in C# 3.0. It is a mechanism by which new methods can be exposed from an existing type (interface or class) without directly adding the method to the type. Why do we need extension methods anyway ? Ok, that is the big story of lamba and LINQ. But from a conceptual standpoint, the extension methods establish a mechanism to extend the public interface of a type. The compiler is smart enough to make the method a part of the public interface of the type. Yeah, that is what it does, and the intellisense is very cool in making us believe that. It is cleaner and easier (for the library developers and for us programmers even) to add extra functionality (methods) not provided in the type. That is the intent. And we know that was exercised extravagantly in LINQ. The IEnumerable was extended with a whole lot set of methods to aid the LINQ design. Remember the Where, Select etc methods on IEnumerable. An example code snippet is worth a thousand
7 comments
Read more

Implementing COM OutOfProc Servers in C# .NET !!!

Had to implement our COM OOP Server project in .NET, and I found this solution from the internet after a great deal of search, but unfortunately the whole idea was ruled out, and we wrapped it as a .NET assembly. This is worth knowing. Step 1: Implement IClassFactory in a class in .NET. Use the following definition for IClassFactory. namespace COM { static class Guids { public const string IClassFactory = "00000001-0000-0000-C000-000000000046"; public const string IUnknown = "00000000-0000-0000-C000-000000000046"; } /// /// IClassFactory declaration /// [ComImport(), InterfaceType(ComInterfaceType.InterfaceIsIUnknown), Guid(COM.Guids.IClassFactory)] internal interface IClassFactory { [PreserveSig] int CreateInstance(IntPtr pUnkOuter, ref Guid riid, out IntPtr ppvObject); [PreserveSig] int LockServer(bool fLock); } } Step 2: [DllImport("ole32.dll")] private static extern int CoR
3 comments
Read more

sizeof vs Marshal.SizeOf !!!

There are two facilities in C# to determine the size of a type - sizeof operator and Marshal.SizeOf method. Let me discuss what they offer and how they differ. Pardon me if I happen to ramble a bit. Before we settle the difference between sizeof and Marshal.SizeOf , let us discuss why would we want to compute the size of a variable or type. Other than academic, one typical reason to know the size of a type (in a production code) would be allocate memory for an array of items; typically done while using malloc . Unlike in C++ (or unmanaged world), computing the size of a type definitely has no such use in C# (managed world). Within the managed application, size does not matter; since there are types provided by the CLR for creating\managing fixed size and variable size (typed) arrays. And as per MSDN, the size cannot be computed accurately. Does that mean we don't need to compute the size of a type at all when working in the CLR world? Obviously no, else I would
Post a Comment
Read more