A Simple Way To Make A Custom WPF Message Box
A Simple Way To Make A Custom WPF Message Box
A Simple Way To Make A Custom WPF Message Box
Sign in
articles
quick answers
discussions
community
help
CPOL
Rate this:
5.00 (1 vote)
Here is a simple way to make a custom WPF Message Box
Overview
In my last piece (A Simple Way to Make a WPF Chromeless Window), I demonstrated how one could easily create a
chromeless window using Microsofts Windows Foundation Framework, more commonly known as WPF. This time
around, I will show you how to make a customized WPF message box.
The reason for this is that the WPF default message box uses the same chrome that the default WPF window does. As a
result, if you are going to develop a custom window, you will also have to do the same with your message boxes or the
contrasts between the two will not look symmetrical.
And being deficient in the graphic arts like many software engineers, I found this out the hard way when my own
commercial product was well reviewed except for the interface. Hence, my recent work to refine the interface to
something much more aesthetically pleasing.
Background="WhiteSmoke"
WindowStartupLocation="CenterOwner"
ResizeMode="NoResize"
FontFamily="Arial"
BorderThickness="1"
BorderBrush="LightGray"
AllowsTransparency="True"
WindowStyle="None"
SizeToContent="Height"
Height="Auto"
Width="600"
It should be noted that I made the Background color, WhiteSmoke, which is a nice, calming white instead of the
bright default white color.
Since we will want our message box to be displayed in the center of an applications master window, we set the
property, WindowStartupLocation, to CenterOwner.
We dont want to allow the user to resize our message box, so we will set this property, ResizeMode, to No Resize.
The FontFamily property can be set to any font you prefer.
Like the window, which was described in my previous article, we will make the BorderThickness property equal to
1, keeping it to a nice, thin outline. If you prefer, you can make the borders thicker by incrementing the size. In the
same vein, to make the border unobtrusive, make the BorderBrush color LightGray.
The AllowsTransparency property must be set to True since we will be turning off the chrome with the next
property, WindowStyle, which must then be set to None.
The SizeToContent property is set to Height so that the message window will resize automatically based on
the content it is provided. This also follows that the Height property will be set to Auto.
Finally, we want to provide a standard width for our message window. In this case, we will make the Width property,
600, though, you can make the width any size you prefer.
HorizontalAlignment="Left"
VerticalAlignment="Bottom" Margin="80,0,0,0"
Background="DarkSlateBlue"
Foreground="WhiteSmoke" FontFamily="Arial"
FontWeight="Normal" Height="24" Width="75"/>
</Grid>
The resultant message box display from the previous markup is shown below
Notice how the command buttons are somewhat lower than what would be expected from the markup shown
previously? You will see why in the next section.
As Boolean = False
Dim loMessageYesNoWindow
As New MessageYesNoWindow()
Dim loStringBuilder
As New StringBuilder()
Dim loStateProperties
As New
SQLServer.SourceControl.Library.StateManagement.StateProperties()
loMessageYesNoWindow.IMAGE_SOURCE = "MessageWindowWait_128x128.png"
loStringBuilder.Append("You have selected to delete all of the application message log
data. Do you want to continue?")
loStringBuilder.Append(Environment.NewLine + Environment.NewLine)
loStringBuilder.Append(Environment.NewLine + Environment.NewLine)
loStringBuilder.Append(Environment.NewLine + Environment.NewLine)
loMessageYesNoWindow.MESSAGE = loStringBuilder.ToString()
loMessageYesNoWindow.Owner = DirectCast(loStateProperties.MAIN_WINDOW,MainWindow)
Return(loMessageYesNoWindow.ShowDialog())
End Function
In the code above, we have two public properties that are part of the message box CodeBehind module; an
image source property (IMAGE_SOURCE) and a message property (MESSAGE).
If you note the code for the IMAGE_SOURCE property, you will see that we only provide the name of an image and
its extension. This is because within this property, we have also provided the default sub-directory path to the images
in our application in WPF format
Hide Copy Code
Private ssImageSource
As String = "/SQLServer.SourceControl;component/Images/"
Return(loMessageYesNoWindow.ShowDialog())
Within the message box CodeBehind module, returning the Boolean value is accomplished via the command
button event fired by setting the DialogResult to True or False
Hide Copy Code
Me.DialogResult = True
Conclusion
Despite the length of this article, the message box modules are quite slim in terms of markup and code. You should
then find it rather easy to modify it to your own preferences and implement in your applications.
In addition, changing or adding the capability of a simple OK result to the code is just as easy since you do not have
to return a Boolean result in this case.
To make things easier in this respect, the complete WPF source code for this message box can be downloaded from
the following link
https://1drv.ms/u/s!AnW5gyh0E3V-g2IBWfD5TCyqHZuj
If you have any questions or comments about this paper, you may contact me at the following
support@blackfalconsoftware.com
License
This article, along with any associated source code and files,
is licensed under The Code Project Open License (CPOL)
Share
EMAIL
How 5 Companies
Maintain Optimal .NET
Performance
Pro
SAPrefs - Netscape-like
Preferences Dialog
Go
Layout Normal
Per page 50
Update
-- There are no messages in this forum -Permalink | Advertise | Privacy | Terms of Use | Mobile
Web01 | 2.8.161101.1 | Last Updated 7 Oct 2016
Select Language
Layout: fixed | fluid