Click here to Skip to main content
15,867,851 members
Articles / Programming Languages / C#

Fading an Image Away

Rate me:
Please Sign up or sign in to vote.
4.31/5 (11 votes)
12 Oct 2003MIT1 min read 87.9K   979   41   5
How to fade an Image Away
A neat trick to use double buffering to draw the visible part of the control to bitmap and then fade it proportional to the distance from the center

Image 1

Introduction

While working on my new project (chronology control), I needed the ability to differentiate between more and less important parts of data. My idea was to put more important parts of data to the center of screen and have less important parts fade away.

Image 2

Using double buffering, I would draw the visible part of the control to bitmap and then fade it proportional to the distance from the center.

Surprisingly enough, I didn't find a quick and simple solution to the problem of gradually fading away the bitmap, anywhere on the net. Thus disregarding the danger of my short-n-cute article being stigmatized as "yet another LinearGradientBrush derivate", I decided to share this neat trick with you.

How to Fade an Image Away

The solution to this problem is painting a simple transparent gradient over the image. I use linear gradient in the demo, but you could use path gradient to achieve more spectacular results. This gradient must progress from completely transparent black color - this will give the important part of your picture less vague appearance with natural colors - towards less transparent color of the background.

Technically, from alpha 0 and RGB(0,0,0) to alpha 255 and the background color.

The following code does it all:

C#
// Preconditions: image, graphics and backColor initialized
Rectangle imageRect=new Rectangle(0,0,image.Width,image.Height);
// Place it on the window.
graphics.DrawImage(image,imageRect);
// Create gradient brush from black to window's back color.
LinearGradientBrush brush=new
LinearGradientBrush(new Rectangle(0,0,image.Width,image.Height),
    Color.FromArgb(0,0,0,0),
    backColor,
    0,false);
// And paint it over image...
e.Graphics.FillRectangle(brush,imageRect);
// ...voila!

History

  • 13th October, 2003: Initial version

License

This article, along with any associated source code and files, is licensed under The MIT License


Written By
Founder Wischner Ltd
United Kingdom United Kingdom
Writing code since 1982 and still enjoying it.

Comments and Discussions

 
Generalrecognition Pin
amir mortazavi26-Jan-05 18:37
amir mortazavi26-Jan-05 18:37 
Generalconver to c++ Pin
Lior Shoval18-Oct-03 6:21
Lior Shoval18-Oct-03 6:21 
GeneralRe: conver to c++ Pin
Tomaž Štih22-Oct-03 1:09
Tomaž Štih22-Oct-03 1:09 
Generalnew interesting job Pin
Egidio13-Oct-03 0:48
Egidio13-Oct-03 0:48 
GeneralRe: new interesting job Pin
thebeekeeper21-Feb-07 13:00
thebeekeeper21-Feb-07 13:00 

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.