Click here to Skip to main content
15,889,874 members
Articles / Desktop Programming / Windows Forms
Article

A modal dialog that fades the background to gray-scale imitating the XP shutdown screen

Rate me:
Please Sign up or sign in to vote.
4.49/5 (28 votes)
23 Feb 2006CDDL2 min read 192.2K   2.5K   81   42
DimmerDialog is a .NET class that shows a modal dialog which grays out the rest of the background, just like the Windows XP Shutdown dialog. This can be used when your application needs to show a very important message box or form that requires immediate user attention.

Image 1

Image 2

Introduction

DimmerDialog is a .NET class that shows a modal dialog which grays out the rest of the background, just like the Windows XP Shutdown dialog. This can be used when your application needs to show a very important message box or form that requires immediate user attention. The class allows you to show either a message box (where you can set the text, title and icon), or a Form instance.

How the class works

The XP Shutdown dialog shows a modal form, while the background fades to gray-scale. I've tried to simulate this, though my fading is not as smooth or impressive (I've used regular GDI stuff whereas the XP Shutdown dialog may have used more powerful techniques like DirectX). I create a new desktop (named with a GUID), switch to this desktop, show the background, fade it using a timer, and all this while the modal form or message box is kept on top. Here's an animated gif that shows the fading effect (quality is poor due to GIF color depth limitations).

Image 3

Using the class

Here's some sample code that shows how you can show a message-box.

C#
private void button2_Click(object sender, EventArgs e)
{
    DimmerDialog dimmer = new DimmerDialog();
    dimmer.ShowMessageBox(
        "You can show either a Form or a MessageBox here.", 
        "Fatal Error has occurred", MessageBoxIcon.Stop);
}

And here's some code that shows how to show a form.

C#
private void button1_Click(object sender, EventArgs e)
{
    DimmerDialog dimmer = new DimmerDialog();
    dimmer.ShowForm(new Form2());
}

When you show a form, make sure that your form does not start any process (as a button click action for instance), because that process will run on your primary desktop and not on this desktop. It's best to keep things simple (like the XP shutdown dialog has) and to merely use the form to collect some data.

Class implementation

The class was written in mixed mode C++/CLI, but here's what the public interface looks like in C# (simulated - actual code is not in C#).

C#
public class DimmerDialog
{
    public DimmerDialog();
    public void ShowForm(Form form);
    public void ShowMessageBox(string text, string title,
        MessageBoxIcon icon);
}

Here's the fade function I wrote (it's C++), where the final gray-scaling code is a rip out of one of  Christian's GDI+ articles. The fading algorithm is one I finalized on after some trial and error. It's far from perfect, but I thought this will do, considering the utility we get out of the fading effect.

MC++
Bitmap^ DimBitmap()
{
  if(m_ColorReductionStep == 0)
    return m_Image;
  Bitmap^ imagecopy = (Bitmap^)m_Image->Clone();
  BitmapData^ bmData = imagecopy->LockBits(
    System::Drawing::Rectangle(0, 0, 
    imagecopy->Width, imagecopy->Height), 
    ImageLockMode::ReadWrite, PixelFormat::Format24bppRgb); 
  BYTE* p = (BYTE*)bmData->Scan0.ToPointer();
  int nOffset = bmData->Stride - imagecopy->Width * 3; 
  BYTE red, green, blue;
  for(int y=0; y < imagecopy->Height; y++)
  {
    for(int x=0; x < imagecopy->Width; x++)
    {
      blue = p[0];
      green = p[1];
      red = p[2];

      switch(m_ColorReductionStep)
      {
      case 1:
        p[0]  = (BYTE)(.001 * red + .286 * green + .713 * blue);
        p[1]  = (BYTE)(.001 * red + .986 * green + .013 * blue);
        p[2]  = (BYTE)(.899 * red + .087 * green + .013 * blue);
        break;
      case 2:
        p[0]  = (BYTE)(.099 * red + .387 * green + .514 * blue);
        p[1]  = (BYTE)(.099 * red + .887 * green + .014 * blue);
        p[2]  = (BYTE)(.699 * red + .287 * green + .013 * blue);
        break;
      case 3:
        p[0]  = (BYTE)(.199 * red + .487 * green + .314 * blue);
        p[1]  = (BYTE)(.199 * red + .787 * green + .014 * blue);
        p[2]  = (BYTE)(.499 * red + .487 * green + .014 * blue);
        break;
      case 4:
        p[0] = p[1] = p[2] = (BYTE)(.299 * red + .587 * green + .114 * blue);
        break;
      }         
      p += 3;
    }
    p += nOffset;
  }
  imagecopy->UnlockBits(bmData);
  return imagecopy;
}

Don't even ask me why I used those fractions, I just got them after various attempts. Perhaps by modifying them, and by adding more steps (currently I use a 4-step fading), we might be able to get a smoother effect, but I didn't think it worth the effort.

History

  • Feb 23 2006 - Article first published.

License

This article, along with any associated source code and files, is licensed under The Common Development and Distribution License (CDDL)


Written By
United States United States
Nish Nishant is a technology enthusiast from Columbus, Ohio. He has over 20 years of software industry experience in various roles including Chief Technology Officer, Senior Solution Architect, Lead Software Architect, Principal Software Engineer, and Engineering/Architecture Team Leader. Nish is a 14-time recipient of the Microsoft Visual C++ MVP Award.

Nish authored C++/CLI in Action for Manning Publications in 2005, and co-authored Extending MFC Applications with the .NET Framework for Addison Wesley in 2003. In addition, he has over 140 published technology articles on CodeProject.com and another 250+ blog articles on his WordPress blog. Nish is experienced in technology leadership, solution architecture, software architecture, cloud development (AWS and Azure), REST services, software engineering best practices, CI/CD, mentoring, and directing all stages of software development.

Nish's Technology Blog : voidnish.wordpress.com

Comments and Discussions

 
GeneralRe: No desktop switching Pin
Rama Krishna Vavilala23-Feb-06 13:45
Rama Krishna Vavilala23-Feb-06 13:45 
GeneralRe: No desktop switching Pin
Nish Nishant23-Feb-06 14:02
sitebuilderNish Nishant23-Feb-06 14:02 
GeneralRe: No desktop switching Pin
Nish Nishant23-Feb-06 14:02
sitebuilderNish Nishant23-Feb-06 14:02 
GeneralRe: No desktop switching Pin
mr.stick24-Feb-06 1:19
mr.stick24-Feb-06 1:19 
GeneralRe: No desktop switching Pin
Nish Nishant24-Feb-06 2:11
sitebuilderNish Nishant24-Feb-06 2:11 
GeneralRe: No desktop switching Pin
Nish Nishant23-Feb-06 14:06
sitebuilderNish Nishant23-Feb-06 14:06 
GeneralThat's some interesting code Pin
Marc Clifton23-Feb-06 12:03
mvaMarc Clifton23-Feb-06 12:03 
GeneralRe: That's some interesting code Pin
Nish Nishant23-Feb-06 12:20
sitebuilderNish Nishant23-Feb-06 12:20 
Marc Clifton wrote:
1) the switch statement is is reverse order


The code evolved a lot while I tried to get the fade right. Eventually once I got it right, I left it like that - while it's not common, a reverse order switch works okay I guess Smile | :)

Marc Clifton wrote:
2) the fourth case, colorReductionStep==4, is tested for in an if statement, rather than putting it in as a case.


Again, a result of code evolution. The original code required an if-check. I guess I should clean this up a little - not that it particularly affects things - just weird to look at I guess/

Marc Clifton wrote:
Also, instead of four discrete steps, you could make a nice linear fade by calculating the luminosity of the pixel (probably factoring RGB perceived intensity differences) and then determining the target gray scale for the same luminosity. I'm sure there's actually a standard equation to make a color image gray. In fact, doesn't Christian have a function that does that? Then you'd get the nice smooth transition that Windows has.


Does he? I looked around for something like that and couldn't find one. If there's a better algorithm that gives a smoother fade, I'd definitely like to use that. It should be fast though - some of the earlier code I tried took 7-8 seconds to render. (I admit to using GetPixel Blush | :O for the first version).

Marc Clifton wrote:
One more question--why would one use this affect to indicate a "very important message box or form that requires immediate user attention"? I always laughed the XP fade, as it fades to gray, but then when you click on "ShutDown", the colors return. Ridiculous. Gray is also not as visible as color. What's wrong with the hand or exclamation icon? Just my personal opinion on UI design and not intended to be a reflection on your article.


I personally do not favor this sort of behavior. But these days, apps try their best to look as similar to Windows or Office as possible. For instance, when the next Office is out, we are gonna have lots of apps using that ribbon control, just like how today, a lot of apps use the Off 2003 style menu system and gradient shading.

I've been doing some C#/.NET coding the last couple of weeks just to get back to being familiar with it - and this article and the last one are the results of that. Thanks for the feedback, Marc.

Regards,
Nish
Nish’s thoughts on MFC, C++/CLI and .NET (my blog)
The Ultimate Grid - The #1 MFC grid out there!

AnswerRe: That's some interesting code Pin
Willi Deutschmann24-Feb-06 5:48
Willi Deutschmann24-Feb-06 5:48 
GeneralRe: That's some interesting code Pin
Shog93-Mar-06 6:03
sitebuilderShog93-Mar-06 6:03 
GeneralRe: That's some interesting code Pin
tombala18-Mar-06 17:45
tombala18-Mar-06 17:45 
GeneralRe: That's some interesting code Pin
Nish Nishant23-Feb-06 12:33
sitebuilderNish Nishant23-Feb-06 12:33 
GeneralRe: That's some interesting code Pin
Marc Clifton23-Feb-06 12:59
mvaMarc Clifton23-Feb-06 12:59 
GeneralRe: That's some interesting code Pin
Nish Nishant23-Feb-06 13:00
sitebuilderNish Nishant23-Feb-06 13:00 
GeneralRe: That's some interesting code Pin
Marc Clifton23-Feb-06 13:15
mvaMarc Clifton23-Feb-06 13:15 
GeneralRe: That's some interesting code Pin
Nish Nishant23-Feb-06 14:07
sitebuilderNish Nishant23-Feb-06 14:07 
GeneralRe: That's some interesting code Pin
Marc Clifton23-Feb-06 15:56
mvaMarc Clifton23-Feb-06 15:56 

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.