WinForm transparent background text outline have the form background color

Question

Right now I'm facing a problem of transparency key. I set the desired Form (That want to be show as a dialog) TransparencyKey as Color.White and BackColor Color.White as well. The text ForeColor of that Form using is ControlText.

How it looks when there is a background application has white/control background color (

When the dialog show on top of an application, things looking like:

I can see the Form showing transparent background, looking good when the background color is white as well. But when the background color is dark theme color (Something like black, grey etc.), it looks horrible and there are some white outlines. What should I do to prevent that?

EDIT: Sorry for the missing information. The text that shows in the Form is Label object. For those code that set properties like TransparencyKey, BackColor etc. are in the designer.cs. Here are the codes of both designer and .cs.

ReaderInitializer.cs

public partial class ReaderInitializer : Form
    {
        Reader _reader;

        /// <summary>
        /// Occur when being notify to close this screen.
        /// </summary>
        private event EventHandler NotifyClose;

        public ReaderInitializer()
        {
            InitializeComponent();
            NotifyClose += OnClose;
            try
            {
                lbl_Message.Text = "Please insert the card.";
                pb_Icon.Image = new Bitmap($@"{ProgramInfo.RootPath}\img\init\load.png");
            }
            catch (Exception e)
            {
                SystemLog.Write(e);
            }
        }

        public void SetReaderNotify(Reader reader)
        {
            reader.MapSuccess += ReaderInitSuccess;
            _reader = reader;
        }

        private void ReaderInitSuccess(object sender, MapSuccessEventArgs e)
        {
            Action uiAction = () =>
            {
                lbl_Message.Text = e.Message;
                pb_Icon.Image = e.DisplayImage;
                if (_reader != null)
                    _reader.MapSuccess -= ReaderInitSuccess;
            };

            if (InvokeRequired)
            {
                Invoke((MethodInvoker)delegate { uiAction(); });
            }
            else
            {
                uiAction();
            }

            NotifyClose?.Invoke(this, new EventArgs());
        }

        private void OnClose(object sender, EventArgs e)
        {
            // Suspecting causing hang when closing dialog.
            Task.Delay(3000).Wait();
            Close();
        }
    }

ReaderInitializer.Designer.cs

        /// <summary>
        /// Required method for Designer support - do not modify
        /// the contents of this method with the code editor.
        /// </summary>
        private void InitializeComponent()
        {
            this.tlp_Icon = new System.Windows.Forms.TableLayoutPanel();
            this.pn_Header = new System.Windows.Forms.Panel();
            this.pn_Footer = new System.Windows.Forms.Panel();
            this.pn_Message = new System.Windows.Forms.Panel();
            this.pb_Icon = new System.Windows.Forms.PictureBox();
            this.lbl_Message = new System.Windows.Forms.Label();
            this.tlp_Icon.SuspendLayout();
            this.pn_Message.SuspendLayout();
            ((System.ComponentModel.ISupportInitialize)(this.pb_Icon)).BeginInit();
            this.SuspendLayout();
            // 
            // tlp_Icon
            // 
            this.tlp_Icon.ColumnCount = 3;
            this.tlp_Icon.ColumnStyles.Add(new System.Windows.Forms.ColumnStyle(System.Windows.Forms.SizeType.Percent, 15F));
            this.tlp_Icon.ColumnStyles.Add(new System.Windows.Forms.ColumnStyle(System.Windows.Forms.SizeType.Percent, 70F));
            this.tlp_Icon.ColumnStyles.Add(new System.Windows.Forms.ColumnStyle(System.Windows.Forms.SizeType.Percent, 15F));
            this.tlp_Icon.Controls.Add(this.pb_Icon, 1, 0);
            this.tlp_Icon.Location = new System.Drawing.Point(0, 42);
            this.tlp_Icon.Margin = new System.Windows.Forms.Padding(0);
            this.tlp_Icon.Name = "tlp_Icon";
            this.tlp_Icon.RowCount = 1;
            this.tlp_Icon.RowStyles.Add(new System.Windows.Forms.RowStyle(System.Windows.Forms.SizeType.Percent, 100F));
            this.tlp_Icon.Size = new System.Drawing.Size(800, 258);
            this.tlp_Icon.TabIndex = 0;
            // 
            // pn_Header
            // 
            this.pn_Header.Dock = System.Windows.Forms.DockStyle.Top;
            this.pn_Header.Location = new System.Drawing.Point(0, 0);
            this.pn_Header.Margin = new System.Windows.Forms.Padding(0);
            this.pn_Header.Name = "pn_Header";
            this.pn_Header.Size = new System.Drawing.Size(800, 42);
            this.pn_Header.TabIndex = 1;
            // 
            // pn_Footer
            // 
            this.pn_Footer.Dock = System.Windows.Forms.DockStyle.Bottom;
            this.pn_Footer.Location = new System.Drawing.Point(0, 400);
            this.pn_Footer.Margin = new System.Windows.Forms.Padding(0);
            this.pn_Footer.Name = "pn_Footer";
            this.pn_Footer.Size = new System.Drawing.Size(800, 50);
            this.pn_Footer.TabIndex = 2;
            // 
            // pn_Message
            // 
            this.pn_Message.Controls.Add(this.lbl_Message);
            this.pn_Message.Dock = System.Windows.Forms.DockStyle.Bottom;
            this.pn_Message.Location = new System.Drawing.Point(0, 300);
            this.pn_Message.Margin = new System.Windows.Forms.Padding(0);
            this.pn_Message.Name = "pn_Message";
            this.pn_Message.Size = new System.Drawing.Size(800, 100);
            this.pn_Message.TabIndex = 3;
            // 
            // pb_Icon
            // 
            this.pb_Icon.Dock = System.Windows.Forms.DockStyle.Fill;
            this.pb_Icon.Location = new System.Drawing.Point(120, 0);
            this.pb_Icon.Margin = new System.Windows.Forms.Padding(0);
            this.pb_Icon.Name = "pb_Icon";
            this.pb_Icon.Size = new System.Drawing.Size(560, 258);
            this.pb_Icon.SizeMode = System.Windows.Forms.PictureBoxSizeMode.Zoom;
            this.pb_Icon.TabIndex = 0;
            this.pb_Icon.TabStop = false;
            // 
            // lbl_Message
            // 
            this.lbl_Message.Dock = System.Windows.Forms.DockStyle.Fill;
            this.lbl_Message.Font = new System.Drawing.Font("Roboto", 18F, System.Drawing.FontStyle.Regular, System.Drawing.GraphicsUnit.Point, ((byte)(0)));
            this.lbl_Message.Location = new System.Drawing.Point(0, 0);
            this.lbl_Message.Margin = new System.Windows.Forms.Padding(0);
            this.lbl_Message.Name = "lbl_Message";
            this.lbl_Message.Size = new System.Drawing.Size(800, 100);
            this.lbl_Message.TabIndex = 0;
            this.lbl_Message.Text = "...";
            this.lbl_Message.TextAlign = System.Drawing.ContentAlignment.MiddleCenter;
            // 
            // ReaderInitializer
            // 
            this.AutoScaleDimensions = new System.Drawing.SizeF(6F, 13F);
            this.AutoScaleMode = System.Windows.Forms.AutoScaleMode.Font;
            this.BackColor = System.Drawing.Color.White;
            this.ClientSize = new System.Drawing.Size(800, 450);
            this.Controls.Add(this.pn_Message);
            this.Controls.Add(this.pn_Footer);
            this.Controls.Add(this.pn_Header);
            this.Controls.Add(this.tlp_Icon);
            this.FormBorderStyle = System.Windows.Forms.FormBorderStyle.None;
            this.Name = "ReaderInitializer";
            this.StartPosition = System.Windows.Forms.FormStartPosition.CenterScreen;
            this.Text = "Guest Service Station";
            this.TransparencyKey = System.Drawing.Color.White;
            this.tlp_Icon.ResumeLayout(false);
            this.pn_Message.ResumeLayout(false);
            ((System.ComponentModel.ISupportInitialize)(this.pb_Icon)).EndInit();
            this.ResumeLayout(false);

        }

_Please insert the card_ ... Where does it come from? are you drawing it or using a `Label`? Show us the relevant code or layout. What happens if you change the `TransparencyKey` (white is not a good one) to say, `Color.Fuchsia`? Some details please. — dr.null, Dec 03 '21 at 08:33
Antialiasing pixels. Tell us who draws the text? If it is your Paint event you must set the right graphics properties.. — TaW, Dec 03 '21 at 09:12
@TaW The class `ReaderInitializer` have no method that invoke `lbl_Message.Paint` event. So I guess it is using the original paint code. — TCPW01, Dec 03 '21 at 09:25
_this.TransparencyKey = System.Drawing.Color.White_ Yes, this is a rather bad choice; you need a color you do not expect in your form at all.. — TaW, Dec 03 '21 at 10:27
Yes. To get rid of these pixels, handle the `lbl_Message.Paint` event, clear the canvas, set `e.Graphics.TextRenderingHint = System.Drawing.Text.TextRenderingHint.SingleBitPerPixelGridFit;` and `e.Graphics.DrawString` yourself. Pass a `StringFormat` with the alignment properties set to center. Still, use a different color to draw the string to be visible in the dark and light backgrounds. — dr.null, Dec 03 '21 at 13:27
@dr.null Sorry for the late update. Please make your comment as an answer. Although I have some paint event implement issue, and that is another question. — TCPW01, Dec 06 '21 at 02:18

score 3 · Accepted Answer · answered Dec 06 '21 at 08:25

You have this problem:

I've changed the Form's BackColor and TransparencyKey to Fuchsia, and the Label.ForeColor to Gray. Note how the TransparencyKey outlines the text. Here is a good explanation.

The suggested fix - commented above - is to draw the string yourself, Gdi+ way to have a control over the string rendering quality through the TextRenderingHint.SingleBitPerPixelGridFit hinting which provides a better antialiasing for this problem.

// +
// System.Drawing.Text;

private void lbl_Message_Paint(object sender, PaintEventArgs e)
{
    e.Graphics.Clear(lbl_Message.BackColor);

    using (var sf = new StringFormat())
    using (var br = new SolidBrush(lbl_Message.ForeColor))
    {
        sf.Alignment = sf.LineAlignment = StringAlignment.Center;
        e.Graphics.TextRenderingHint = TextRenderingHint.SingleBitPerPixelGridFit;
        e.Graphics.DrawString(lbl_Message.Text, lbl_Message.Font, br,
            lbl_Message.ClientRectangle, sf);
    }
}

You'll get:

WinForm transparent background text outline have the form background color

1 Answers1

Linked