A Customizable WPF MessageBox

• Download source code

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.

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}">
                <!-- your new template here -->
            </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.