Click here to Skip to main content
15,615,155 members
Articles / Programming Languages / C#
Posted 22 Oct 2022

Tagged as


13 bookmarked

DrawingView: Simple Generic Winform 2D Drawing Component

Rate me:
Please Sign up or sign in to vote.
4.75/5 (6 votes)
22 Oct 2022CPOL2 min read
2D Drawing component with Scaling, Zooming, Scrolling, Centering and Resizing capabilities
Simple 2D Drawing Component that can be used in a WinForm applications. It allows you to create a simple 2D Drawing with scaling, zooming, scrolling, centering and resizing in your application. You can also save your drawing as an image or print it.

Image 1


Simple generic WinForm 2D drawing components with scaling, zooming, scrolling, centering and resizing is not so easy to find. In CodeProject, there are a lot of publications relative to this subject but they are all specific to projects, coded for WPF or in C++. Many are for Picture resizing and zooming, but few for simple WinForm 2D drawing. This project uses a simple PictureBox to manage the drawing, so it is not necessary to have a lot of code behind.

How It Works

The DrawingWindow component is a simple UserControl with a PictureBox inside. The PictureBox contains a bitmap which is filled with a user drawing callback event. The size of the bitmap, the background color, scale, zoom factor and margins are all properties of the control. The coordinate system is referenced at the lower-left corner taking account of the margins. The bitmap is positioned in the control according to scale, zoom factor and scrolling position.

Image 2

Using the Code

To use the DrawingWindow UserControl, simply put it inside a Form or another UserControl, set the properties and connect the events.

The Properties

Image 3

In this example, the DrawingSize is A4 format, 210 mm x 297 mm. The initial ZoomFactor is set to 2.
To Zoom In or Out, simply set the ZoomFactor to another value like this.
DrawClientCenterPoint property is used for debugging only!

/// Zoom In
drawingWindow.ZoomFactor *= 2;

/// Zoom Out
drawingWindow.ZoomFactor /= 2;

The Events

/// This is called to paint the drawing
public EventHandler<PaintEventArgs> DrawingPaint;

/// This is called when the mouse moves over the drawing
public EventHandler<MouseEventArgs> DrawingMouseMove;

The DrawingPaint event is the callback to draw. The PaintEventArgs is the same as standard paint events. It contains the Graphics object sets with a matrix translation according to the rectangle you define, i.e., (210;297) in this example.

The Methods

/// Redraw the drawing
public void Redraw();

/// Center the drawing into the client rectangle
public void Center();

/// Resize the drawing according to the client rectangle
public void ResizeDrawing(bool resize);

/// Get the image with a defined zoom factor (to save or print)
public Image GetImage(float zoomFactor, Rectangle bounce);

The ResizeDrawing function has a parameter resize (true/false) telling the component to resize always when the client rectangle is resizing.


  • 21st October, 2022: Initial version


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

Written By
Switzerland Switzerland
This member has not yet provided a Biography. Assume it's interesting and varied, and probably something to do with programming.

Comments and Discussions

Praiseuseful Pin
Southmountain24-Oct-22 17:37
Southmountain24-Oct-22 17:37 

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

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