The Winform application implements the universal Mask Layer 2 and the winform mask.

The Winform application implements the universal Mask Layer 2 and the winform mask.

Previously, we have published Winform application universal mask layer and Winform application universal message window. These two mask layers are based on the pop-up window, today we will share with you a simple but user-friendly implementation solution. Let's talk a little bit about it and go directly to the topic.

I. Implementation ideas (Problem Solving sequence ):

Transparent mask:

1. implement transparent Panel controls (MaskPanel );

2. the Panel control (MaskPanel) can overwrite the customer region of the parent container (usually the current form object) (that is, the same size as the customer region of the parent container) and be at the top layer, ensure that any controls on the parent container are covered and unavailable;

3. The Panel control (MaskPanel) must change with the size of the parent container;

4. The Panel control (MaskPanel) can be rendered to indicate the animation or text being loaded and centered;

Asynchronous:

There are many implementation methods, such as Asynchronous delegation and Task. In the winform project, BackgroundWorker is directly used this time.

II. Key solutions:

1. you can set transparent controls: use custom controls and override CreateParams (where: cp. exStyle | = 0x00000020;), OnPaint (where: labelBorderPen, labelBackColorBrush Color = Color. fromArgb (_ alpha, this. backColor;

2. It can overwrite the client area of the Parent container: this. Size = this. Parent. ClientSize; this. Left = 0; this. Top = 0;

3. changes with the size of the parent container: this. Anchor = AnchorStyles. Left | AnchorStyles. Top | AnchorStyles. Right | AnchorStyles. Bottom;

4. Present the animation or text being loaded and centered:

Define pictureboxand set imageto loading.gif. SizeMode = System. windows. forms. pictureBoxSizeMode. autoSize; Point Location = new Point (this. location. X + (this. width-pictureBox_Loading.Width)/2, this. location. Y + (this. height-pictureBox_Loading.Height)/2); // center

Okay. Finally, paste the source code of the implementation:

MaskPanel:

Public partial class MaskPanel: Control {private System. componentModel. container components = new System. componentModel. container (); private bool _ isTransparent = true; // whether transparent [Category ("Transparent"), Description ("whether transparent, True by default")] public bool IsTransparent {get {return _ isTransparent;} set {_ isTransparent = value ;}} private int _ alpha = 125; // sets the transparency [Category ("Transparent "), description ("set transparency")] public int Alpha {get {return _ alpha;} set {_ alpha = value ;}} public MaskPanel (Control parent): this (parent, 125) {}/// <summary> /// initialize and load the Control /// </summary> /// <param name = "Alpha" Transparency </param> public MaskPanel (Control parent, int alpha) {SetStyle (ControlStyles. opaque, true); // sets the background transparent base. createControl (); _ alpha = alpha; parent. controls. add (this); this. parent = parent; this. size = this. parent. clientS Ize; this. left = 0; this. top = 0; this. anchor = AnchorStyles. left | AnchorStyles. top | AnchorStyles. right | AnchorStyles. bottom; this. bringToFront (); PictureBox pictureBox_Loading = new PictureBox (); pictureBox_Loading.BackColor = System. drawing. color. transparent; pictureBox_Loading.Image = Properties. resources. loading; pictureBox_Loading.Name = "pictureBox_Loading"; pictureBox_Loading.SizeMode = System. windows. forms. pictureBoxSizeMode. autoSize; Point Location = new Point (this. location. X + (this. width-pictureBox_Loading.Width)/2, this. location. Y + (this. height-pictureBox_Loading.Height)/2); // center pictureBox_Loading.Location = Location; pictureBox_Loading.Anchor = AnchorStyles. none; this. controls. add (pictureBox_Loading); this. visible = false;} protected override CreateParams CreatePa Rams {get {CreateParams cp = base. createParams; cp. exStyle | = 0x00000020; // enables WS_EX_TRANSPARENT to make the control support transparent return cp;} protected override void OnPaint (PaintEventArgs pe) {Pen labelBorderPen; SolidBrush labelBackColorBrush; if (_ isTransparent) {Color cl = Color. fromArgb (_ alpha, this. backColor); labelBorderPen = new Pen (cl, 0); labelBackColorBrush = new SolidBrush (cl);} else {labelBorderPen = New Pen (this. backColor, 0); labelBackColorBrush = new SolidBrush (this. backColor);} base. onPaint (pe); pe. graphics. drawRectangle (labelBorderPen, 0, 0, this. width, this. height); pe. graphics. fillRectangle (labelBackColorBrush, 0, 0, this. width, this. height);} protected override void Dispose (bool disposing) {if (! (Components = null) {components. Dispose () ;}} base. Dispose (disposing );}}

To achieve general purpose and ensure that all forms are asynchronously executed and the mask effect is displayed, a form base class: FormBase is defined, which defines a protected DoWorkAsync method, the Code is as follows:

Public partial class FormBase: Form {public FormBase () {InitializeComponent (); this. startPosition = FormStartPosition. centerParent;} /// <summary> // multithread asynchronous background processing of time-consuming data, interface will not be stuck /// </summary> /// <param name = "workFunc"> Func delegate, time-consuming packaging (excluding UI interface processing), example: (o) =>{ specific time-consuming logic; return processing result data} </param> // <param name = "funcArg"> Func delegate parameter, this parameter is used to pass objects that are required by time-consuming processing logic across threads. For example, a String object, a JObject object, or a DataTable value </param> /// <param Name = "workCompleted"> Action delegate. After the packaging time is processed, perform the following operations (usually the interface data or UI control is updated), and the following operations are displayed: (r) >{irdview1.datasource = r ;}</param> protected void DoWorkAsync (Func <object, object> workFunc, object funcArg = null, Action <object> workCompleted = null) {var bgWorkder = new BackgroundWorker (); // Form loadingForm = null; Control loadingPan = null; bgWorkder. workerReportsProgress = true; bgWorkder. progressChanged + = (s, arg) =>{ If (arg. progressPercentage> 1) return; # region Panel mode var result = this. controls. find ("loadingPan", true); if (result = null | result. length <= 0) {loadingPan = new KYEClient. customControls. maskPanel (this) {Name = "loadingPan" };} else {loadingPan = result [0];} loadingPan. bringToFront (); loadingPan. visible = true; # endregion}; bgWorkder. runWorkerCompleted + = (s, arg) => {# region Panel mode if (loadingPan! = Null) {loadingPan. Visible = false;} # endregion bgWorkder. Dispose (); if (workCompleted! = Null) {workCompleted (arg. result) ;}}; bgWorkder. doWork + = (s, arg) => {bgWorkder. reportProgress (1); var result = workFunc (arg. argument); arg. result = result; bgWorkder. reportProgress (100) ;}; bgWorkder. runWorkerAsync (funcArg );}}

Example:

Private void button#click (object sender, EventArgs e) {int startNo = 20; button1.Enabled = false; this. doWorkAsync (o) => // time-consuming logic processing (the UI control cannot be operated here because it is in asynchronous mode) {int result = 0; for (int I = 1; I <= Convert. toInt32 (o); I ++) {result + = I; Thread. sleep (500);} return result;}, startNo, (r) => // display the result (this is used to process the preceding result, such as displayed on the Interface) {label1.Text = r. toString (); button1.Enabled = true ;});}

You can COPY all the code above to test the effect.