C＃WinForm-在按鈕或其他控件的右上方繪制紅點（帶有數字），例如android / ios應用

Question

畫一個像android / ios apps這樣的紅點，用戶要注意一個新事件。

是否有內置一些控件的簡單案例？

如TabPage標題的右上角，Button的右上角，Groupbox的右上角。

Answer 1

遵循相同概念的兩個想法浮現在我腦海。 在Winforms中，您可以通過PaintEvents繪制GDI可能繪制的所有內容。 因此，正如@Kinect提到的那樣，沒有內置解決方案可以處理此問題。

這兩個想法可以為您工作：

1. 為需要RedPoint的所有內容創建自定義控件。 因此，您可能會創建自己的框架，該框架將擴展所有基本Winforms並將其擴展（也許存在一些第三方的東西）。
2. 您創建一個可以為您處理繪畫的組件。

對於第一種方法，我創建了一個擴展了Button並追加RedPoint繪圖的小示例：

public class CustomButton : Button
{
    protected override void OnPaint(PaintEventArgs pevent)
    {
       base.OnPaint(pevent); //Call base for creating default Button

       using (Pen pen = new Pen(Color.Red, 3)) //Create small Red Pen
       {
            //Create the area we want to draw. In this case we draw at the Button top right corner (because Android, iOS do this)
            Rectangle rectangle = new Rectangle(pevent.ClipRectangle.X + pevent.ClipRectangle.Width - 10, 0, 10, 10);

            pevent.Graphics.DrawEllipse(pen, rectangle); //Draw a ellipse
            pevent.Graphics.FillEllipse(new SolidBrush(Color.Red), rectangle); //Fill this ellipse to be red

                //Paint a string to the ellipse so that it looks like Android, iOS Notification
                //You have to replace the 1 with dynamic count of your notifications
             pevent.Graphics.DrawString("1", DefaultFont, new SolidBrush(Color.White), rectangle.X, rectangle.Y);
        }
    }
}

您需要做某事。 對於您要擴展的每個控件都這樣。

或者您選擇第二種方法並使用一個組件：

 public partial class RedPointDrawer : Component
    {
        /// <summary>
        /// Get: Dictionary of bound Controls which become a RedPoint with number of notifications
        /// </summary>
        public Dictionary<Control, int> Controls { get; }

        /// <summary>
        /// 
        /// </summary>
        public RedPointDrawer()
        {
            InitializeComponent();
        }

        /// <summary>
        /// 
        /// </summary>
        /// <param name="container"></param>
        public RedPointDrawer(IContainer container)
        {
            container.Add(this);
            InitializeComponent();
            Controls = new Dictionary<Control, int>();
        }

        /// <summary>
        /// Draws a RedPoint to all 
        /// </summary>
        public void ActivateRedPoint()
        {
            foreach (Control control in Controls.Keys)
            {
                control.Paint += Control_Paint;
            }
        }

        private void Control_Paint(object sender, PaintEventArgs e)
        {
            int count;
            var control = sender as Control;

            if (control != null &&
                Controls.TryGetValue(control, out count))
            {
                using (Pen pen = new Pen(Color.Red, 3))
                {
                    Rectangle rectangle = new Rectangle(e.ClipRectangle.X + e.ClipRectangle.Width - 10, 0, 10, 10);

                    e.Graphics.DrawEllipse(pen, rectangle);
                    e.Graphics.FillEllipse(new SolidBrush(Color.Red), rectangle);
                    e.Graphics.DrawString(count.ToString(), new Font(new FontFamily("Arial"), 8), new SolidBrush(Color.White),
                        rectangle.X,
                        rectangle.Y);
                }
            }
        }
    }

由於該組件擁有Control類型的字典，因此您可以鏈接擴展了Control的每個Winform對象（最多）。 可以從工具箱中選擇組件，然后將其添加到表單中。 然后在Form啟動例程中調用以下代碼：

private void FormStartUp() //Shown event or sth.
{
   redPointDrawer1.Controls.Add(button1, notifications.Count);
   redPointDrawer1.Controls.Add(button2, notifications2.Count);
   redPointDrawer1.ActivateRedPoint();
}

兩種解決方案都會導致……。 像這樣：

嗯，這並不完美，但也許對您來說是一個很好的起點。