C# WinForm - Draw red point (with number) like android / ios apps on top right of button or other control

Question

Draw a red point like android / ios apps ,user to note that a new events.

Is there a easy case to build in to some control ?

Such as top right of TabPage title , top right of Button,top right of Groupbox .

Answer 1

Two ideas which follow the same concept come to my head. In Winforms you can draw everything which is possible with GDI via the PaintEvents. So as @Kinect mentioned there is no build in solution for handle this.

This two ideas can work for you:

1. Create custom Controls for everthing you need a RedPoint. So you maybe create a own Framework, which extends all base Winforms and extend it (Maybe some third party stuff exists).
2. You create a component which handle the painting for you.

For the first way I create a small example which extends a Button and append RedPoint drawing:

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);
        }
    }
}

You would need to do sth. like this for every Control you want to extend.

Or you choose the second way and use a Component:

 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);
                }
            }
        }
    }

Because the Component holds a dictionary from type Control you can link every Winform Object which extends Control (which are the most). The Component can be choosen from your Toolbox and add to your Form. Then call following code in your Form startup routine:

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

Both solutions will result in sth. like this:

Well this is not perfect but maybe a good starting point for you.