Customizable WPF MessageBox

When I started researching the standard WPF message box, I was surprised and appalled that it wasn't a WPF-specific object. It turns out that it's entirely implemented by the Win32.Interop functionality, and doesn't have a single drop of WPF goodness thrown in. I suppose a Microsoft apologist could try making a case about how their approach probably reduced the overall .Net code footprint by a few thousand bytes, but I ain't buying it. There was a true opportunity here, and Microsoft squandered it. By the way, this is the reason that it's not configurable in any way - it uses Windows system properties and that's that. You're not allowed to stray from those parameters. BAD PROGRAMMER! BAD! BAD!

Beyond the standard features, I also added support for altering the following items. This is the primary reason for writing this code in the first place.

• Font family
• Font size
• Message area text and background color
• Button panel background color
• Custom button template support
• Enhanced default button support
• Set maximum possible message box width

If you've ever written code for Windows.Forms, you've probably had reason to use the Windows.Forms.MessageBox, and you may have noticed that Microsoft decided not to support MessageBoxButton.AbortRetryIgnore or MessageBoxButton.RetryCancel. This also means these buttons aren't available for the default button setting either. MessageBoxEx adds these buttons (and the associated defaults) back to the playing field - see the next article section. Huzzah!

As you know, the standard MessageBox is a static object that doesn't need to be instantiated to use. This new MessageBoxEx is static as well, or at least "static-ish". In order to implement it, I created a standard WPF Window that contains both static and non-static properties and methods. The idea is that the programmer would call one of the static MessageBoxEx.Show...() methods, which would then instantiate a non-static version of the window. I also wanted to make the outward-facing experience as identical as possible to the standard MessageBox, so the return values are the same as what you get from the standard message box.

The XAML for this form is fairly limited because we're not really doing anything fancy. I think the comments in the XAML provide sufficient enough documentation as to not require an accompanying narrative.

Clickable Icon - Since images aren't "clickable", I had to resort to handling the MouseLeftButtonUp event. On top of that, I wanted to make the visual appearance of the icon change when the mouse hovered over it, so I set the default opacity to 0.85, and when the message box is displaying an error, I add a custom style (in the code behind) to the image that reacts to mouse hover, which changes the opacity to 1.0 and changes the cursor to a hand. I also use the code behind to add a tooltip to the image (actually the image's parent grid because I could not get a bound tooltip to work on the image element), so the user gets some sort of indication that the icon is indeed clickable.

Clickable URL - The clickable URL is pretty much the same. The underlying control is a TextBlock and doesn't support the Click event, so once again, I had to handle the MouseLeftButtonUp event instead. I also created a custom style that triggers on MouseEnter so I could change the cursor to a hand. On hind-soght, I suppose I could have used a RichTextBox to display the URL, but I considered it too late, and besides, I didn't consider the juice to be worth the squeeze.

The code-behind really isn't anything special or technically difficult to understand after a cursory inspection. As stated earlier, the code is essentially broken up into static, and non-static fields, properties, and methods. The message box itself needs to be instantiated, but the class has static properties and methods that can be used for easy configuration and rendering of the message box. Just like MessageBox, MessageBoxEx provides several overloads of the Show() method (and its variants) to display itself.

As far as code organization is concerned, I did something I don't normally do, but it was done in the interest of making it easy to copy the files into your own code. First, all of the classes related to the MessageBoxEx class are located in the MessageBoxEx.xaml.cs file. Second, I took advantage of the fact that the class is a partial class, and separated the static parts from the non-static parts. It might seem weird, but it helps me, and that's the most important thing.

To make the form size itself appropriately, I utilized the window SizeToContent property (in the XAML). This property allows the window to grow/shrink to fit its content, allowing the window to only be as big as it needs to be, given the minimum and maximum width/height limitations specified in the XAML. A curious side-effect of the SizeToContent property is that it takes affect AFTER the window has been positioned on the screen. This means that if the window needs to display more than a single line message, the window won't be "centered" on the screen as intended. To mitigate this behavior, I had handle the window's SizeChanged event, and manually re-center the form on the screen. The code was simple enough, but I figured I'd cite it here.

JAN 08 - See update notice at the end of this section!

The extended functionality required different method names (and requisite overloads) because parameter collisions were induced. Beyond that, some additional classes were required to make implementation and use as seamless as possible. All of the extended features described below can be combined into a single message box.

CheckBox

/// <summary>
/// Reresents the object that allows the checkbox state to be discoevered externally of the 
/// messagebox.
/// </summary>
public class MsgBoxExCheckBoxData : INotifyPropertyChanged
{
#region INotifyPropertyChanged

private bool isModified = false;
public bool IsModified { get { return this.isModified; } set { if (value != this.isModified) { this.isModified = true; this.NotifyPropertyChanged(); } } }
public event PropertyChangedEventHandler PropertyChanged;

protected void NotifyPropertyChanged([CallerMemberName] String propertyName = "")
{
    if (this.PropertyChanged != null)
    {
        this.PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
        if (propertyName != "IsModified")
        {
            this.IsModified = true;
        }
    }
}
    
#endregion INotifyPropertyChanged

private string checkBoxText;
private bool   checkBoxIsChecked;

/// <summary>
/// Get/set the text content of the checkbox
/// </summary>
public string CheckBoxText      
{ 
    get { return this.checkBoxText;} 
    set 
    { 
        if (value != this.checkBoxText) 
        { 
            this.checkBoxText = value; 
            this.NotifyPropertyChanged(); 
        } 
    } 
}

/// <summary>
/// Get/set the flag that indicates whether the checkbox is checked
/// </summary>
public bool CheckBoxIsChecked 
{ 
    get { return this.checkBoxIsChecked; } 
    set 
    { 
        if (value != this.checkBoxIsChecked) 
        { 
            this.checkBoxIsChecked = value; 
            this.NotifyPropertyChanged(); 
        } 
    } 
}
}

MsgBoxExCheckBoxData checkboxData = new MsgBoxExCheckBoxData()
{ 
// I suspect you're sometimes going to want to persist this value (app 
// settings, etc), so how you set this value is completely up to you.
CheckBoxIsChecked = false, 
CheckBoxText = "Don't show this message anymore"
};

// In this particular example, handling the decision to show/not show a messagebox is 
// handled by checking the status of the checkbox data. The mesagebox itself doesn't care.
if (this.checkboxData != null && !this.checkboxData.CheckBoxIsChecked)
{
// show box with a checkbox
MessageBoxEx.ShowWithCheckBox("This is possibly pointless and can be permenantly "+
                                "dismissed by clicking the checkbox below."
                                , this.checkboxData, "Checkbox Sample");
}
else
{
MessageBoxEx.Show("But you said not to show the message anymore. Make up your mind.","Hypocrite Notice");
}

Details

MessageBoxEx.ShowWithDetails("Here's some source code. Click the Details expander below."
                            , Testmsg()
                            , "Really Long Message, With Deatils"
                            , MessageBoxButton.OK
                            , MessageBoxImage.Information);

Clickable Error Icon

public abstract class MsgBoxExDelegate
{
/// <summary>
/// Get/set the message text from the calling message box
/// </summary>
public string   Message     { get; set; }
/// <summary>
/// Get/set the details text (if it was specified in the messagebox)
/// </summary>
public string   Details     { get; set; }
/// <summary>
/// Get/set the message datetime at which this object was created
/// </summary>
public DateTime MessageDate { get; set; }

/// <summary>
/// Performs the desired action, and returns the result. MUST BE OVERIDDEN IN INHERITING CLASS. 
/// </summary>
/// <returns></returns>
public virtual MessageBoxResult PerformAction(string message, string details=null)
{ 
    throw new NotImplementedException(); 
}
}

public class ErrorMsgDelegate : MsgBoxExDelegate
{
public override MessageBoxResult PerformAction(string message, string details=null)
{
    this.Message = message;
    this.Details = details;
    this.MessageDate = DateTime.Now;

    // for this sample, we're just showing another messagebox
    MessageBoxResult result = MessageBoxEx.Show("You're about to do something because this is an "+
                                                "error message (clicking yes with play a beep sound). "+
                                                "Are you sure?", 
                                                "Send Error Message To Support", 
                                                MessageBoxButton.YesNo, 
                                                MessageBoxImage.Question);
    if (result == MessageBoxResult.Yes)
    {
        //indicate that they clicked yes
        SystemSounds.Beep.Play();
    }
    return result;
}
}

MessageBoxEx.SetErrorDelegate(this.errorDelegate);

// if you want the message box to be closed when the action is completed, do this:
MessageBoxEx.SetExitAfterErrorAction(true);

MessageBoxEx.Show("Show an error message. The icon is clickable.", "Error"
                , MessageBoxButton.OK, MessageBoxImage.Error);

While I was implementing the new URL code, it became obvious that the extended parameters were getting out of hand (the URL was the fourth extended functionality to be added), so I created a single additional object that is passed into the ShowExt method (along with the message, titlem, buttons, and image). This object is called MsgBoxExtendedFunctionality, and in it, you place one or more of the extended functionalities that you want to use in a given messagebox. This serves a couple of purposes - a) reduce the number of "special" versions of the Show method (with each one having eight overloads), and b) reduced maintenance time if I felt like adding more extended functionality. The old methods (ShowWithCheckBox, ShowWithDetails, and ShowWithCheBoxAndDetails) are still there, but they've been modified to call the new ShowExt methods, and the intellisense has been updated to show that they are deprecated.

To see examples of its usage, look for the ClickMe_Nc methods (they handle the button clicks for the buttons on the right side of the sample app window).

Somewhere in your app startup (I recommend using the constructor in the MainWindow because at that point you can specify the parent window from which to inherit the appropriate font properties. In the sample app, I created a method called InitMessageBox() containing the following statements.

MessageBoxEx.SetParentWindow(this);
MessageBoxEx.SetMessageForeground(Colors.White);
MessageBoxEx.SetMessageBackground(Colors.Black);
MessageBoxEx.SetButtonBackground(MessageBoxEx.ColorFromString("#333333"));
MessageBoxEx.SetButtonTemplateName("AefCustomButton");
MessageBoxEx.SetMaxFormWidth(500);

After you've done this once in the application, using MessageBoxEx is identical to using the original MessageBox.

MessageBoxResult result = MessageBoxEx.Show("Your message. Continue?", "Caption", MessageBoxButton.YesNoCancel);

Of course, the button specification defaults to MessageBoxButton.OK in no button group is specified.

The Show() method presents a message box that represents a feature-similar version of the standard WPF MessageBox. This method accepts the following parameters.

The Show() method returns a MessageBoxResult value. This is used to indicated which button was clicked to dismiss the message box window. If the user clicks the window's close button, the return value will be selected based on the following:

• For MessageBoxButton.OK, the result will be MessageBoxButton.OK
• For MessageBoxButton.OKCancel, the result will be MessageBoxButton.Cancel
• For MessageBoxButton.YesNo, the result will be MessageBoxButton.No
• For MessageBoxButton.YesNoCancel, the result will be MessageBoxButton.Cancel

The ShowEx() method is similar to the Show() method, except that it presents a message box that implements extended functionality. This method accepts the following parameters.

MessageBoxEx.Show("My message text", MessageBoxButtonEx.YesNo, MessageBoxButtonEx.OK)

MessageBoxEx.Show("My message text", MessageBoxButtonEx.OK, MessageBoxButtonEx.YesNo)

MessageBoxEx.Show("My message text", MessageBoxButtonEx.OkayCancel, MessageBoxButtonEx.YesNo)

The extended functionality class (MsgBoxExtendedFunctionality) provides a sort of one-stop-shop for any/all of the available/future extensions to the standard message box. It's simply a container for all of the extended functionality objects, and makes using the extended functionality much simpler. The idea is that the user will populate this object with whatever is required in a given situation. Indeed, only the objects that are needed for a given instance of the message box are necessary to be included. The messagebox will simply use its current property values if they are possible affected by the unpopulated objects.

Using this class is fairly straightforward, in that you use object initializers to populate it, like so:

MsgBoxExtendedFunctionality ext = new MsgBoxExtendedFunctionality()
{
// Default button - you only need to set this if you want to use something 
// other than the standard Windows.Forms.MessageBox default button 
staticButtonDefault = this.ButtonDefault;

// clickable icon
MessageDelegate  = this.errorDelegate,
ExitAfterAction  = true,
// you can also set the tooltip text, but for the purposes of this demo, we're 
// using the default value
//,DelegateToolTip = null

// checkbox
CheckBoxData     = this.checkboxData,

// details
DetailsText      = this.Testmsg(),

// url
    
URL              = new MsgBoxUrl()
{
    URL          = new Uri("http://www.google.com"),
    DisplayName  = "Google",
    Foreground   = Colors.LightBlue
}
};

When you look at the constructor, you can see that everything is set to some default value to make sure each call to MessageBoxEx.ShowEx() uses its own settings.

public MsgBoxExtendedFunctionality()
{
this.ButtonDefault   = MessageBoxButtonDefault.Forms;
this.DetailsText     = null;
this.CheckBoxData    = null;
this.MessageDelegate = null;
this.URL             = null;
this.DelegateToolTip = "Click this icon for additional info/actions.";
}

If you want to add new extended functionality, create your extended functionality object, and add it to this class as a property. You'll probably want to add more static configuration methods inside MessageBoxEx to handle settings for the new functionality as well.

This object allows you to create a bindable object that can be evaluated externally of the message box (in the code that showed the message box), and is most likely going to be used to allow the app's user to elect not to see a given message box.

public class MsgBoxExCheckBoxData : INotifyPropertyChanged
{
#region INotifyPropertyChanged

private bool isModified = false;
public bool IsModified { get { return this.isModified; } set { if (value != this.isModified) { this.isModified = true; this.NotifyPropertyChanged(); } } }
/// <summary>
/// Occurs when a property value changes.
/// </summary>
public event PropertyChangedEventHandler PropertyChanged;

/// <summary>
/// Notifies that the property changed, and sets IsModified to true.
/// </summary>
/// <param name="propertyName">Name of the property.</param>
protected void NotifyPropertyChanged([CallerMemberName] String propertyName = "")
{
    if (this.PropertyChanged != null)
    {
        this.PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
        if (propertyName != "IsModified")
        {
            this.IsModified = true;
        }
    }
}
    
#endregion INotifyPropertyChanged

private string checkBoxText;
private bool   checkBoxIsChecked;

/// <summary>
/// Get/set the text content of the checkbox
/// </summary>
public string CheckBoxText      
{ 
    get { return this.checkBoxText; } 
    set 
    { 
        if (value != this.checkBoxText) 
        { 
            this.checkBoxText = value; 
            this.NotifyPropertyChanged(); 
        } 
    } 
}
/// <summary>
/// Get/set the flag that indicates whether the checkbox is checked
/// </summary>
public bool CheckBoxIsChecked 
{ 
    get { return this.checkBoxIsChecked; } 
    set 
    { 
        if (value != this.checkBoxIsChecked) 
        { 
            this.checkBoxIsChecked = value; 
            this.NotifyPropertyChanged(); 
        } 
    } 
}
}

A possible usage would something like this:

MsgBoxExCheckBoxData checkboxData = new MsgBoxExCheckBoxData()
{ 
CheckBoxIsChecked = false, 
CheckBoxText = "Don't show this message any more"
};
MsgBoxExtendedFunctionality ext = new MsgBoxExtendedFunctionality()
{
CheckBoxData = this.checkboxData
};
MessageBoxEx.ShowEx("Message text", ext);

When the message box returns, the ext.CheckBoxData object contains the current checked state of the checkbox that was set in the message box. How you persist this value is entirely up to you.

public abstract class MsgBoxExDelegate
{
/// <summary>
/// Get/set the message text from the calling message box
/// </summary>
public string   Message     { get; set; }
/// <summary>
/// Get/set the details text (if it was specified in the messagebox)
/// </summary>
public string   Details     { get; set; }
/// <summary>
/// Get/set the message datetime at which this object was created
/// </summary>
public DateTime MessageDate { get; set; }

/// <summary>
/// Performs the desired action, and returns the result. MUST BE OVERIDDEN IN INHERITING CLASS. 
/// </summary>
/// <returns></returns>
public virtual MessageBoxResult PerformAction(string message, string details = null)
{
    throw new NotImplementedException();
}
}

This class allows you make the message box icon clickable, and when it's clicked, executes the code contained in this object (the PerformAction method). This (abstract) class MUST be inherited, and the PerformAction method is executed when the icon is clicked.

public class MsgBoxUrl
{
/// <summary>
/// Get/set the web link. Any Uri type other than "http" is ignored. The URL is also used for the tooltip.
/// </summary>
public Uri                        URL         { get; set; }
/// <summary>
/// Get/set the optional display name for the web link
/// </summary>
public string                     DisplayName { get; set; }
/// <summary>
/// Get/set the foreground color for the web link
/// </summary>
public System.Windows.Media.Color Foreground  { get; set; }

public MsgBoxUrl()
{
    // default color
    this.Foreground = MessageBoxEx.DefaultUrlForegroundColor;
}

This class allows you to specify a url in the message box that the user can click.