 一般情況下的標注式提示窗口  屏幕邊緣的標注式提示窗口 |
一、技術要點
就像本文開頭所說的"標注式消息提示窗口"其實就是一個具有不規則外形的窗體，但卻具備了更加復雜的屬性和行為。標注的箭頭會根據不同控件指向不同的位置，當需要標注的控件過于接近屏幕的邊緣時，標注窗口還會自動調整顯示位置以及箭頭的長短和大小。
我們為新創建的窗體取名為InfoWindow。在類的頭部定義intArc和intArrowHeight兩個私有變量，可以適當調整它們的值來微調提示窗口的位置和箭頭的大小與位置。
提示窗口的箭頭位置無非具有左上、右上、左下和右下四個可能性，我們為此定義了枚舉類型的變量ArrowLocation，根據提示窗口位于屏幕的不同位置，GetArrowLocation可以計算提示窗口的位置并且返回適當的ArrowLocation，定義如下：
| …… public enum ArrowLocation { TopLeft, TopRight, BottomLeft, BottomRight } |
SetInfoWindowRegion函數非常重要，它在Form.Load事件即裝載和顯示提示窗體時被調用，當計算出新的提示窗口的位置和箭頭顯示位置后，調用SetBounds將更新后的位置和大小應用到提示窗口，gPath是GraphicsPath類型的私有變量，它表示標注式窗口的不規則圖形路徑，該圖行路徑也是根據提示窗口的位置和箭頭顯示的位置來創建，gPath.AddArc方法用來繪制提示窗口四個邊角的弧度部分，和AddLine方法一起描繪出提示窗口包括箭頭的輪廓，一切就緒后我們就用這個gPath對象傳遞給Region對象，當將這個Region對象賦給Form窗體的Region屬性后，窗體就具備了標注式提示窗口樣式的不規則外形了，部分代碼如下：
| private void SetInfoWindowRegion() { if (!this.IsHandleCreated) return; System.Drawing.Size windowSize = this.Size; Point[] ArrowPoints = new Point[3]; Point topLeftPoint = Point.Empty; Point bottomRightPoint = (Point)windowSize; switch (this.GetArrowLocation) { case ArrowLocation.TopLeft: …… case ArrowLocation.TopRight: …… case ArrowLocation.BottomLeft: …… case ArrowLocation.BottomRight: …… } …… …… if ((this.GetArrowLocation == ArrowLocation.TopLeft) || (this.GetArrowLocation == ArrowLocation.TopRight)) { gPath.AddArc(topLeftPoint.X, rectY2 - arcRadius, arcDia, arcDia, 90, 90); gPath.AddLine(topLeftPoint.X, rectY2, topLeftPoint.X, rectY1); gPath.AddArc(topLeftPoint.X, topLeftPoint.Y, arcDia, arcDia, 180, 90); gPath.AddLine(rectX1, topLeftPoint.Y, ArrowPoints[0].X, topLeftPoint.Y); gPath.AddLines(ArrowPoints); gPath.AddLine(ArrowPoints[2].X, topLeftPoint.Y, rectX2, topLeftPoint.Y); gPath.AddArc(rectX2 - arcRadius, topLeftPoint.Y, arcDia, arcDia, 270, 90); gPath.AddLine(bottomRightPoint.X, rectY1, bottomRightPoint.X, rectY2); gPath.AddArc(rectX2 - arcRadius, rectY2 - arcRadius, arcDia, arcDia, 0, 90); gPath.AddLine(rectX2, bottomRightPoint.Y, rectX1, bottomRightPoint.Y); } else { gPath.AddLine(rectX1, topLeftPoint.Y, rectX2, topLeftPoint.Y); gPath.AddArc(rectX2 - arcRadius, topLeftPoint.Y, arcDia, arcDia, 270, 90); gPath.AddLine(bottomRightPoint.X, rectY1, bottomRightPoint.X, rectY2); gPath.AddArc(rectX2 - arcRadius, rectY2 - arcRadius, arcDia, arcDia, 0, 90); gPath.AddLine(rectX2, bottomRightPoint.Y, ArrowPoints[0].X, bottomRightPoint.Y); gPath.AddLines(ArrowPoints); gPath.AddLine(ArrowPoints[2].X, bottomRightPoint.Y, rectX1, bottomRightPoint.Y); gPath.AddArc(topLeftPoint.X, rectY2 - arcRadius, arcDia, arcDia, 90, 90); gPath.AddLine(topLeftPoint.X, rectY2, topLeftPoint.X, rectY1); gPath.AddArc(topLeftPoint.X, topLeftPoint.Y, arcDia, arcDia, 180, 90); } gPath.CloseFigure(); this.Region = new Region(this.gPath); } |
ShowInfoWindow函數用來將提示窗口顯示出來，該函數需要將提示窗口附著的控件和需要顯示的文本傳遞過來。然后，AnchorPointFromControl根據控件的位置返回提示窗口的箭頭應該顯示的坐標，代碼如下：
| public static Point AnchorPointFromControl(Control anchorControl) { if (anchorControl == null) throw new ArgumentException(); Point controlLocation = anchorControl.Location; System.Drawing.Size controlSize = anchorControl.Size; if (anchorControl.Parent != null) controlLocation = anchorControl.Parent.PointToScreen(controlLocation); return controlLocation + new Size(controlSize.Width / 2, controlSize.Height / 2); } |
PointToScreen表明將工作區點的位置映射成屏幕坐標統一進行計算。上述代碼最后以行說明提示窗口的箭頭顯示在附著控件的中點。
將提示窗口的背景顏色設置成Info，外觀如下圖：
 |
我們發現這樣的外觀有點別扭，沒錯！因為提示窗口缺少黑色邊框！所以，還需要在窗體的OnPaint事件中添加代碼，如下：
| protected override void OnPaint(PaintEventArgs e) { Pen p = new Pen(Color.Black , 2); e.Graphics.DrawPath(p, gPath); base.OnPaint(e); } |
二、程序實現
啟動Visual Studio 2005，新建Visual C#的Windows 應用程序項目，并取名為ShowInfoWindow，添加4個Button組件、1個Label組件、1個textBox組件和3個Panel組件，其中3個Button用來顯示標注式消息提示窗口并分別附著在三個組件之上，代碼如下：
| …… private InfoWindow iw; …… private void button1_Click(object sender, EventArgs e) { iw = new InfoWindow(); iw.ShowInfoWindow(label1, "關于標簽組件的提示說明。"); } private void button3_Click(object sender, EventArgs e) { iw = new InfoWindow(); iw.ShowInfoWindow(button2, "關于按鈕組件的提示說明。"); } private void button4_Click(object sender, EventArgs e) { iw = new InfoWindow(); iw.ShowInfoWindow(textBox1, "關于文本框組件的提示說明。"); } |
然后，我們在項目中添加新Windows窗體，取名為InfoWindow，將InfoWindow的BackColor設為Info，FormBorderStyle設為None，將ShowIcon和ShowInTaskbar都設為False，在窗體上放置1個Label組件和1個Button組件，分別用來顯示消息內容和關閉提示窗口的操作。具體實現請參見文章附帶的源碼，這里不再詳述。
三、總結
本文演示了標注式消息提示窗口的創建和顯示，利用GraphicsPath對象、Region對象以及屏幕坐標映射等方法有效的實現了提示窗口的外觀和樣式，提示窗口可以自動附著在相應控件之上，并且根據附著控件在屏幕上的位置自動調整提示窗口箭頭的位置和大小。演示程序在Windows XP SP2以及.Net 框架 2.0環境下運行通過。