A Customizable WPF MessageBox

May 26, 2011

6 comments

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}">
                <!– 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.

Add comment
facebook linkedin twitter email

Leave a Reply

6 comments

  1. IlyaJune 10, 2011 ב 00:48

    Sorry but my eyes are bleeding seeing the visual side of it. I understand your desire to extend the standard component but do we really need possibilities to create such things? Standard windows are good for exactly that – being standard and neutral!

  2. arikJune 10, 2011 ב 01:02

    1. I’m not a designer so pardon my graphic designs.
    2. Many systems have their client all themed up. Many of them require the developer a solution for a themed message box. This is such a solution.

  3. Daniel RoseJune 20, 2011 ב 17:08

    Personally, I would find it extremely useful if there would be a simple way to replace the “OK”, “Cancel”, etc. buttons with “verb”-buttons. For example, “Delete”, “Don’t delete” or “Save”, “Don’t Save”, … Everything else I don’t need.

  4. arikJune 25, 2011 ב 20:59

    Well, actually, since this WPF custom control lets you change the control template of the message box, you can replace the text of the buttons..

    If you need more than that, then you don’t really need a message box but just a custom dialog, which you can do as always.

  5. AphexSeptember 28, 2011 ב 23:26

    The codeplex link appears to be dead. Can you upload this code somewhere else? I’d like to try it out.