Customized Dialog BoxCreate a customized dialog box in Windows Forms and adjust the Font and add icons.
This page was last reviewed on Sep 27, 2022.
Customized dialog box. For better UI design, we can implement a customized dialog box. And we can use the new dialog in programs just as easily as MessageBox.Show.
Shows a dialogShows a dialog
Dialog concept. The customized dialog box here is implemented in Windows Forms with a TableLayoutPanel. It hides and shows buttons based on the arguments to ShowDialog.
ShowDialog. This code example is part of the code of the custom dialog. Here we implement ShowDialog, and then call it. The class has a private constructor.
Arguments The arguments are for the title, heading, text and buttons. Use null if you want a button not to appear.
Button It has a default button. In my implementation, the first button is always the default and it is also the confirm button.
Image We specify an Image resource called DialogWarningXP. BetterDialog can use an Image from your program's resources.
Finally It returns a standard DialogResult, which you can test as normally by using DialogResult.OK or other enums on DialogResult.
Shows a dialog
Implementation of ShowDialog, C#:
/// <summary> /// This method is part of the dialog. /// </summary> static public DialogResult ShowDialog(string title, string largeHeading, string smallExplanation, string leftButton, string rightButton, Image iconSet) { // Call the private constructor so the users only need to call this // function, which is similar to MessageBox.Show. // Returns a standard DialogResult. using (BetterDialog dialog = new BetterDialog(title, largeHeading, smallExplanation, leftButton, rightButton, iconSet)) { DialogResult result = dialog.ShowDialog(); return result; } }
/// <summary> /// This is the calling convention of the above method. /// Use this to show a custom dialog in your source code. /// </summary> private void ExampleCall() { DialogResult result = BetterDialog.ShowDialog("Reset Journal Settings", "Settings will be erased permanently", "This will not affect any of the text content in the database.", "Reset", "Cancel", Properties.Resources.DialogWarningXP); if (result == DialogResult.OK) { Console.WriteLine("User accepted the dialog"); } }
Logic. This code implements the basic logic, but lacks some details. We can see some of the logic and method calls used and the general technique.
CreateGraphics It uses CreateGraphics to get a Graphics object on the form. It MeasureString and attempts to lay out the dialog.
Note I had to find values that would lay out and position the elements properly. A table layout simplifies the design.
TableLayoutPanel The layout is done with 2 TableLayoutPanels, with a white background so that it can better match Windows' themes.
Hiding It can hide or show various parts. It will hide buttons you specify as null, and it will hide the text if it is empty.
IsNullOrEmpty, IsNullOrWhiteSpace
Shows a dialog
Implementation of BetterDialog constructor, C#:
/// <summary> /// Use this with the above static method. /// </summary> private BetterDialog(string title, string largeHeading, string smallExplanation, string leftButton, string rightButton, Image iconSet) { // Set up some properties. this.Font = SystemFonts.MessageBoxFont; this.ForeColor = SystemColors.WindowText; InitializeComponent(); this.Width = 350; this.Height = 150; // Do some measurements with Graphics. using (Graphics graphics = this.CreateGraphics()) { SizeF smallSize; SizeF bigSize; if (string.IsNullOrEmpty(smallExplanation) == false) { // Note: at this point, we could detect that the OS is Vista // and do some customizations. That logic is in the download. // The code here does some measurements. label1.Font = new Font(SystemFonts.MessageBoxFont.FontFamily.Name, 8.0f, FontStyle.Bold, GraphicsUnit.Point); smallSize = graphics.MeasureString(smallExplanation, this.Font, this.label2.Width); bigSize = graphics.MeasureString(largeHeading, label1.Font, this.label1.Width); this.Height = (int)smallSize.Height + 166; double bigger = (smallSize.Width > bigSize.Width) ? smallSize.Width : bigSize.Width; this.Width = (int)bigger + 100; } else { // We have a null "smallExplanation", so we have a single message // dialog. Do some different changes. Code omitted for brevity (you // can find the logic in the download if you want to see it). } } // Establish a minimum width. if (this.Width < 260) { this.Width = 260; } // Set the title, and some Text properties. this.Text = title; label1.Text = largeHeading; label2.Text = string.IsNullOrEmpty(smallExplanation) ? string.Empty : smallExplanation; // Set the left button, which is optional. if (string.IsNullOrEmpty(leftButton) == false) { this.buttonLeft.Text = leftButton; } else { this.AcceptButton = buttonRight; this.buttonLeft.Visible = false; } this.buttonRight.Text = rightButton; // Set the PictureBox and the icon. pictureBox1.Image = iconSet; }
Properties. This dialog has some special attributes. The custom dialog has these properties, many of which are not in the default MessageBox in Windows Forms.
Fonts It uses the proper fonts—this means the Segoe UI font on newer Windows operating systems.
Buttons It allows custom button text. It supports action verbs as its confirm button, and also 1 or 2 buttons.
Icons It allows custom icons. The dialog can use custom icons—pass in an Image resource and it will displayed as the alert message.
A summary. We saw an example of a custom C# dialog box. It can look odd in edge cases, such as when the dialog text is far too long to fit.
Dot Net Perls is a collection of tested code examples. Pages are continually updated to stay current, with code correctness a top priority.
Sam Allen is passionate about computer languages. In the past, his work has been recommended by Apple and Microsoft and he has studied computers at a selective university in the United States.
This page was last updated on Sep 27, 2022 (rewrite).
© 2007-2022 sam allen.
see site info on the changelog.