1024programmer Asp.Net [WPF] Write a simple message dialog box by hand

[WPF] Write a simple message dialog box by hand

[WPF]Write a simple message dialog box

The message dialog box is an indispensable part of the UI interface. It is a window used to give users some prompts, warnings or inquiries. In WPF, the message dialog box is the system’s native (user32.dll) MessageBox, and the appearance of the message dialog box cannot be modified through Style or Template. Therefore, when you need a message dialog box that is consistent with the theme of your application, you have to reinvent the wheel yourself.

Determine the function of the “wheel”

The core function of the message dialog box is to display information to the user and interrupt the user’s operation before the user processes the message. According to common application scenarios, the following functions can be sorted out:

  • Supported message types: prompt information, warning information, error information, query information
  • Supported dialog types: mini mode (displays brief information and automatically closes), normal mode, full mode (suitable for hierarchical display of message content)
  • Set whether the message dialog box uses the trigger source as the parent form and displays the mask layer
    The main functions are shown in the figure below:
    image

Start building “wheels”

The message dialog box is essentially a form, so the first thing to do is to customize the style of a pop-up window, and then define the corresponding template according to the message type and dialog box type.

Customize window appearance

The standard window consists of two overlapping rectangles. The outer rectangle is the non-client area, which includes the title bar buttons (minimize, maximize, and close), window borders, resize and move behavior, application icons and titles, and system menus. It is drawn and managed by the operating system’s window manager. Its size is determined by standard operating system settings. The inner rectangle is the workspace, which is the content of the application.
Customizing the window appearance is mainly for non-working areas. You can customize it by setting the property WindowStyle to None, or using the WindowChrome class. Here we use the former method.


 
     
         
             
                 
             
         
         
             
                 
             
         
         
             
                 
                 
             
             
             
         
     
 

 
 
     
     
     
     
     
     
     
     
     
     
 

 
 

In the above code, the default non-working area (control area) is hidden by setting the WindowStyle property to None, and then the window’s Template Define a two-line Grid in code>. The first line simulates the title bar of the window’s non-working area. In this example, only a close button is placed. The second row is the work area.

Share a little experience: When defining the AlterDialogWindow style, the last line of code only defines a TargetType as view:AlterDialogWindow style, and inherits from the style of x:Key="AlterDailogBaseStyle" through BasedOn. This is not unnecessary, but to maximize the reuse of the default global style when personalized styles are needed locally.

Customized message dialog template

The entire message dialog box can be divided into two parts: the information area and the interactive area. The information area presents the message type and message content, and the interaction area is used to present OK and Cancel buttons. The layout and size of the information area depend on the dialog type. The interactive area is related to both the message type and the dialog box type. The three types of messages, prompts, warnings, and errors, are notifications and warnings. They do not require the user to perform YES or NO processing. They only need to display the OK button. For query information, two buttons, OK and Cancel, need to be displayed. The mini-mode dialog box does not need to display the OK and Cancel buttons, so the entire interactive area is not displayed.
Define templates for three information areas based on three types of dialog boxes:


     
         
             
                 
                 
             
             
                 
                 
             
         
         
         
             
         
     
 

 
     
         
             
                 
                 
             
             
                 
                 
             
         
         
         
             
         
     
 

 
     
         
             
             
         
         
         
             
                 
                 
             
         
     
 
 

Two templates can be defined in the interactive area: only displaying the OK button, and displaying the OK and Cancel buttons.


     
         
             
                 
                 
                     
                     
                 
             
         
         
             
         

     
 

 
     
         
             
                 
         
             
             
         
         
         
             
                 
                 
             
         
     
 
 

Two templates can be defined in the interactive area: only displaying the OK button, and displaying the OK and Cancel buttons.


     
         
             
                 
                 
                     
                     
                 
             
         
         
             
         

     
 

 
     
         
             
                 
                 
                     
                     
                 
             
         
     
 
 

After defining several templates for the information area and interactive area, AlterDialogWindow declares two ContentPresenter to represent the information area and interactive area, and select the corresponding template through the template selector . The interactive area determines whether to display the area by binding the dialog box type.


     
         
         
     
     
         
             
         
     
     
         
             
         
     
 
 

At this point, a message dialog box is basically completed. When determining the function earlier, it was mentioned that the window that calls the message dialog box displays the mask layer. For this function, we can define a ShowDialog method in AlterDialogWindow. The parameter is the window object that calls the message dialog box, and then add a translucent to the window. code>Grid is used as a mask layer, and the mask layer is deleted in the OnClosed event processing logic of AlterDialogWindow.

public bool? ShowDialog(DependencyObject parent)
 {
     if (this.Parent == null && parent != null)
     {
         Grid layer = new Grid() { Name = "maskLayer", Background = new SolidColorBrush(Color.FromArgb(128, 0, 0, 0)) };
         _grid = Window.GetWindow(parent).FindFirstVisualChild();
         if (_grid.FindAllVisualChilds().FirstOrDefault(r => r.Name == "maskLayer") == null)
             _grid.Children.Add(layer);
         if (_grid.RowDefinitions.Count > 0)
             Grid.SetRowSpan(layer, _grid.RowDefinitions.Count);
         if (_grid.ColumnDefinitions.Count > 0)
             Grid.SetColumnSpan(layer, _grid.ColumnDefinitions.Count);
         this.Owner = Window.GetWindow(parent);
         this.WindowStartupLocation = WindowStartupLocation.CenterOwner;
     }
     return ShowDialog();
 }
 

Summary

This article introduces the main ideas and code of custom message dialog boxes. By reinventing the wheel, it reviews styles, themes, control templates, data templates, template selectors, triggers, value converters and other technologies. This is also one of the reasons why controls such as MaterialDesign and HandyControl are relatively advanced and have to build their own wheels.

code example

https://github.com/czwy/AlertDialogWindow

ountdown, Converter={StaticResource VisibilityConverter}, ConverterParameter=’!’}” />

After defining several templates for the information area and interactive area, AlterDialogWindow declares two ContentPresenter to represent the information area and interactive area, and select the corresponding template through the template selector . The interactive area determines whether to display the area by binding the dialog box type.


     
         
         
     
     
         
             
         
     
     
         
             
         
     
 
 

At this point, a message dialog box is basically completed. When determining the function earlier, it was mentioned that the window that calls the message dialog box displays the mask layer. For this function, we can define a ShowDialog method in AlterDialogWindow. The parameter is the window object that calls the message dialog box, and then add a translucent to the window. code>Grid is used as a mask layer, and the mask layer is deleted in the OnClosed event processing logic of AlterDialogWindow.

public bool? ShowDialog(DependencyObject parent)
 {
     if (this.Parent == null && parent != null)
     {
         Grid layer = new Grid() { Name = "maskLayer", Background = new SolidColorBrush(Color.FromArgb(128, 0, 0, 0)) };
         _grid = Window.GetWindow(parent).FindFirstVisualChild();
         if (_grid.FindAllVisualChilds().FirstOrDefault(r => r.Name == "maskLayer") == null)
             _grid.Children.Add(layer);
         if (_grid.RowDefinitions.Count > 0)
             Grid.SetRowSpan(layer, _grid.RowDefinitions.Count);
         if (_grid.ColumnDefinitions.Count > 0)
             Grid.SetColumnSpan(layer, _grid.ColumnDefinitions.Count);
         this.Owner = Window.GetWindow(parent);
         this.WindowStartupLocation = WindowStartupLocation.CenterOwner;
     }
     return ShowDialog();
 }
 

Summary

This article introduces the main ideas and code of custom message dialog boxes. By reinventing the wheel, it reviews styles, themes, control templates, data templates, template selectors, triggers, value converters and other technologies. This is also one of the reasons why controls such as MaterialDesign and HandyControl are relatively advanced and have to build their own wheels.

code example

https://github.com/czwy/AlertDialogWindow

This article is from the internet and does not represent1024programmerPosition, please indicate the source when reprinting:https://www.1024programmer.com/808604

author: admin

Previous article
Next article

Leave a Reply

Your email address will not be published. Required fields are marked *

Contact Us

Contact us

181-3619-1160

Online consultation: QQ交谈

E-mail: [email protected]

Working hours: Monday to Friday, 9:00-17:30, holidays off

Follow wechat
Scan wechat and follow us

Scan wechat and follow us

Follow Weibo
Back to top
首页
微信
电话
搜索