Click here to Skip to main content
Click here to Skip to main content

A Customizable WPF MessageBox

By , 31 May 2011
Rate this:
Please Sign up or sign in to vote.

Recently, I came across the need to customize the look of the standard message box in the application. To do this, I’ve decided to create a new class named WPFMessageBox, which will have the same interface as the standard one, will behave the same way and finally would be fully customizable, the WPF way, using control templates.

Following is the result of this effort.

image

Note: In the image, you can see an example for a message box customization. Of course, you are limited only by your imagination. The default control template looks like the standard message box.

Features

  1. The class WPFMessageBox has the exact same interface as the current WPF MessageBox class.
  2. Implemented as a custom control, thus fully customizable via standard WPF control templates.
  3. Has a default control template which looks like the standard MessageBox.
  4. Supports all the common types of message boxes: Error, Warning, Question and Information.
  5. Has the same “Beep” sounds as when opening a standard MessageBox.
  6. Supports the same behavior when pressing the Escape button as the standard MessageBox.
  7. Provides the same system menu as the standard MessageBox, including disabling the Close button when the message box is in Yes-No mode.
  8. Handles right-aligned and right-to-left operating systems, same as the standard MessageBox.
  9. Provides support for setting the owner window as a WinForms Form control.

How to Use It?

Using the WPFMessageBox class is (exactly) as simple as presenting a standard MessageBox.

Instead of writing:

MessageBoxResult result = MessageBox.Show
("message text", "caption", MessageBoxButton.YesNoCancel, MessageBoxImage.Error);

simply write:

MessageBoxResult result = WPFMessageBox.Show
("message text", "caption", MessageBoxButton.YesNoCancel, MessageBoxImage.Error);

All of the methods of the original MessageBox are supported:

public static class WPFMessageBox
{
    public static MessageBoxResult Show(string messageBoxText);
    public static MessageBoxResult Show(string messageBoxText, string caption);
    public static MessageBoxResult Show(Window owner, string messageBoxText);
    public static MessageBoxResult Show
	(string messageBoxText, string caption, MessageBoxButton button);
    public static MessageBoxResult Show
	(Window owner, string messageBoxText, string caption);
    public static MessageBoxResult Show(string messageBoxText, 
	string caption, MessageBoxButton button, MessageBoxImage icon);
    public static MessageBoxResult Show(Window owner, 
	string messageBoxText, string caption, MessageBoxButton button);
    public static MessageBoxResult Show(string messageBoxText, 
	string caption, MessageBoxButton button, MessageBoxImage icon, 
	MessageBoxResult defaultResult);
    public static MessageBoxResult Show(Window owner, 
	string messageBoxText, string caption, MessageBoxButton button, 
	MessageBoxImage icon);
    public static MessageBoxResult Show(string messageBoxText, 
	string caption, MessageBoxButton button, MessageBoxImage icon, 
	MessageBoxResult defaultResult, MessageBoxOptions options);
    public static MessageBoxResult Show(Window owner, 
	string messageBoxText, string caption, MessageBoxButton button, 
	MessageBoxImage icon, MessageBoxResult defaultResult);
    public static MessageBoxResult Show(Window owner, 
	string messageBoxText, string caption, MessageBoxButton button, 
	MessageBoxImage icon, MessageBoxResult defaultResult, MessageBoxOptions options);
}

How to Customize It?

The main point of creating this WPF message box was to customize it, right? So I’d better show you how this is done.

To customize the WPFMessageBox, we use the standard control templates way:

<Style TargetType="msgbox:WPFMessageBoxControl">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type msgbox:WPFMessageBoxControl}">
                <!--<span class="code-comment"> your new template here --></span>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

where the msgbox prefix is defined as follows:

xmlns:msgbox="clr-namespace:MessageBoxUtils;assembly=WPFMessageBox"

Of course, you can use Blend to do the customizations.

Can I See a Real Example of Such Customization?

Sure, following is the control template for the message box you see in the image. Note the binding you need to use to properly set the visibility of the buttons and the image.

<Style TargetType="{x:Type msgbox:WPFMessageBoxControl}">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type msgbox:WPFMessageBoxControl}">
                <Grid Background="LightBlue" 
		FlowDirection="{Binding ContentFlowDirection}">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="55" />
                        <RowDefinition Height="2" />
                        <RowDefinition Height="*" />
                        <RowDefinition Height="40" />
                        <RowDefinition Height="55" />
                    </Grid.RowDefinitions>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="60" />
                        <ColumnDefinition Width="*" />
                    </Grid.ColumnDefinitions>

                    <TextBlock Text="{Binding Message}" Grid.RowSpan="2" 
			Grid.Column="0" Grid.ColumnSpan="2" TextWrapping="Wrap" 
			TextAlignment="Left" HorizontalAlignment=
			"{Binding ContentTextAlignment}" VerticalAlignment="Top" 
			Margin="10 10 10 10" />

                    <Border Grid.Row="3" Grid.Column="0" Grid.ColumnSpan="2" 
			Background="Yellow">
                        <StackPanel Orientation="Horizontal" VerticalAlignment="Center" 
			HorizontalAlignment="Right" Margin="0 0 5 0" >
                            <Button Content="_Yes" Visibility="{Binding YesNoVisibility}" 
				Command="{Binding YesCommand}" 
				IsDefault="{Binding IsYesDefault}" Margin="5 5 5 5" 
				Height="24" Width="80" />
                            <Button Content="_No" Visibility="{Binding YesNoVisibility}" 
				Command="{Binding NoCommand}" 
				IsDefault="{Binding IsNoDefault}"
			 	Margin="5 5 5 5" Height="24" Width="80" />
                            <Button Content="O_K" Visibility="{Binding OkVisibility}" 
				Command="{Binding OkCommand}" 
				IsDefault="{Binding IsOkDefault}" Margin="5 5 5 5" 
				Height="24" Width="80" />
                            <Button Content="_Cancel" Visibility=
			"{Binding CancelVisibility}" Command="{Binding CancelCommand}" 
			IsDefault="{Binding IsCancelDefault}" Margin="5 5 5 5" 
			Height="24" Width="80" />
                        </StackPanel>
                    </Border>
                    
                    <StackPanel Grid.Row="4" Grid.Column="0" Grid.ColumnSpan="2" 
			Orientation="Horizontal">
                        <Image Source="{Binding MessageImageSource}" 
			HorizontalAlignment="Left" VerticalAlignment="Center" 
			Height="32" Width="32" Margin="10 0 0 0" />
                        <Image Source="{Binding MessageImageSource}" 
			HorizontalAlignment="Left" VerticalAlignment="Center" 
			Height="32" Width="32" Margin="10 0 0 0" />
                        <Image Source="{Binding MessageImageSource}" 
			HorizontalAlignment="Left" VerticalAlignment="Center" 
			Height="32" Width="32" Margin="10 0 0 0" />
                        <Image Source="{Binding MessageImageSource}" 
			HorizontalAlignment="Left" VerticalAlignment="Center" 
			Height="32" Width="32" Margin="10 0 0 0" />
                        <Image Source="{Binding MessageImageSource}" 
			HorizontalAlignment="Left" VerticalAlignment="Center" 
			Height="32" Width="32" Margin="10 0 0 0" />
                        <Image Source="{Binding MessageImageSource}" 
			HorizontalAlignment="Left" VerticalAlignment="Center" 
			Height="32" Width="32" Margin="10 0 0 0" />
                    </StackPanel>
                </Grid>

            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

Where Can I Get It?

I’ve uploaded the source to a new CodePlex project named WPF MessageBox.

That’s it for now,
Arik Poznanski.

License

This article, along with any associated source code and files, is licensed under The Microsoft Public License (Ms-PL)

About the Author

Arik Poznanski
Software Developer (Senior) Verint
Israel Israel
Arik Poznanski is a senior software developer at Verint. He completed two B.Sc. degrees in Mathematics & Computer Science, summa cum laude, from the Technion in Israel.
 
Arik has extensive knowledge and experience in many Microsoft technologies, including .NET with C#, WPF, Silverlight, WinForms, Interop, COM/ATL programming, C++ Win32 programming and reverse engineering (assembly, IL).
Follow on   Twitter   Google+

Comments and Discussions

 
Generalwhy? PinmemberDetoX8325-May-11 21:45 
AnswerRe: why? PinmvpArik Poznanski25-May-11 22:50 
GeneralRe: why? PinmvpSacha Barber26-May-11 5:29 
He is right you can not customize MessageBox. However I tend to use this in WPF : WPF Common TaskDialog for Vista and XP It works very well
 
Or you could just use the Windows7 codepack API if you have Win7 and want to use TaskDialog proper
Sacha Barber
  • Microsoft Visual C# MVP 2008-2011
  • Codeproject MVP 2008-2011
Open Source Projects
Cinch SL/WPF MVVM

Your best friend is you.
I'm my best friend too. We share the same views, and hardly ever argue
 
My Blog : sachabarber.net

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

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

| Advertise | Privacy | Mobile
Web02 | 2.8.140415.2 | Last Updated 31 May 2011
Article Copyright 2011 by Arik Poznanski
Everything else Copyright © CodeProject, 1999-2014
Terms of Use
Layout: fixed | fluid