How to add text outline to button.text?

Question

text is unreadable due to the problem of the color of the image, the only way i can think of to solve the problem to make the text readable is by adding text outline to the button text, but i don't know how to add the outline

or maybe someone can suggest any other great ideas to solve the problem of readability of text after a Background image is added to a button?

Your best bet is to integrate the text into the image with Photoshop or some other program. VB.Net does not have a way to outline text. Or make the button taller than the image and place the text at the bottom on no background. — TheValyreanGroup, Oct 28 '16 at 17:47
If this is WinForms, then @TheValyreanGroup is correct. If this is WPF, you can actually do this by nesting 2 textblocks inside the button with a slight offset. Please indicate if you are using Winforms or WPF. — Bradley Uffner, Oct 28 '16 at 17:52
Probably this is what you are looking for: [Outer Glow Effect for Text in a Custom Control](http://stackoverflow.com/a/33189856/3110834) — Reza Aghaei, Oct 28 '16 at 19:59
Also this: [Outline text with System.Drawing?](http://stackoverflow.com/questions/4200843/outline-text-with-system-drawing) — Reza Aghaei, Oct 28 '16 at 22:27

Ňɏssa Pøngjǣrdenlarp · Accepted Answer · 2016-11-05T14:10:31.887

As others have mentioned, there is not a simple property to render text as an outline. You either need to draw the text or do something else.

One very easy way is to a "hollow", outline Font:

Dim bmp As New Bitmap("C:\Temp\BigHead_thumb1.jpg")
Dim txt = "I AM BIGHEAD"
Using g = Graphics.FromImage(bmp)
    Using fnt = New Font("OutLined", 20)

        Dim sz = g.MeasureString(txt, fnt)

        Dim x = (bmp.Width - sz.Width) / 2
        Dim y = (bmp.Height - sz.Height) - 10

        g.DrawString(txt, fnt, Brushes.AntiqueWhite, x, y)
        pb1.Image = bmp

    End Using
End Using

Result:

I dont think the result is all that swell. If you are trying to make the text stand out, letting the image show thru parts of the text doesnt serve that purpose very well. The smaller the image, the worse it is.

If you have to go Font-hunting for a outline style font, you might want to consider buying/licensing it from somewhere. Many of the freeware ones just dont look right.

To make it stand out more, you can use a black-out behind the text. It is a bit crude but allows maximum readability, especially if the image is small-ish:

Using g = Graphics.FromImage(bmp)
    Using fnt = New Font("VERDANA", 18)

        Dim sz = g.MeasureString(txt, fnt).ToSize()
        Dim x = (bmp.Width - sz.Width) \ 2
        Dim y = (bmp.Height - sz.Height) - 10

        Dim r = New Rectangle(x, y, sz.Width + 8, sz.Height + 2)
        g.FillRectangle(Brushes.Black, r)
        g.DrawString(txt, fnt, Brushes.AntiqueWhite, r)
        pb1.Image = bmp

    End Using
End Using

Result:

In between those 2 extremes, you can use GraphicsPath to draw an oversize image of the text to serve as the back part, then the actual text in a different color on that.

Using g = Graphics.FromImage(bmp)
    Using fnt = New Font("VERDANA", 18)
        Dim sz = g.MeasureString(txt, fnt).ToSize()
        Dim x = (bmp.Width - sz.Width) \ 2
        Dim y = (bmp.Height - sz.Height) - 10

        Using gp As New GraphicsPath,
            br As New SolidBrush(Color.DimGray),
            p As New Pen(Color.WhiteSmoke, 6)

            gp.AddString(" " & txt, fnt.FontFamily, 1, 
                         22, New Point(x, y), 
                         StringFormat.GenericTypographic)
            g.DrawPath(p, gp)
            g.FillPath(br, gp)

        End Using
    End Using
End Using
pb1.Image = bmp

It is a bit more involved, but the results are rather nice:

The image on the left uses the code above. The center image uses WhiteSmoke for both colors, the outer Pen color uses a lower Alpha value resulting in a softer appearance. The one on the right uses a near black color for the pen to act as a kind of black-out effect.

It is best to use a few more calculated variables. For instance, rather than 22 for the outline, that should be some based on the font size like +25% so the result scales based on the font size used.

score 0 · Answer 2 · answered Oct 28 '16 at 18:26

If your images and text are static, your best bet is to merge the images and text together manually and use the resulting image. If either one is dynamic, from a database for example, you may want to look in to processing the image using GDI.

GDI will allow you to draw the text directly to a Bitmap. You can draw the "shadow" first, then draw the actual text, offset horizontally and vertically by a few pixels. Once you have rendered the complete image, you can use that has the background of the button.

Something like this should work, but you will need to modify some of it to fit your needs. It will take an image, and add some shadowed text to it, you will want to avoid setting the Text property of the button using this, and rely solely on the drawing. You will probably want to look in to centering the text (using Graphics.MeasureString), as I randomly picked some coordinates to draw the text, the obviously won't be exactly correct for you.

Public Sub AddText(picture as Bitmap, text as string)
    Using g as new Graphics.FromImage(picture)
        G.DrawString(text, Me.Font, Brushes.White, 10, 10)
        G.DrawString(text, Me.Font, Brushes.Black, 12, 12)
    End Using
End Sub

I can't test this right now, so there may be some errors in it.

score -1 · Answer 3 · answered Oct 28 '16 at 18:12

-1

by using layout like “TableLayoutPanel” in vb.Net you can separate the text from the image to solve your problem using Absolute and relative positioning

answered Oct 28 '16 at 18:12

Houssem Cherif

221
1
11

How to add text outline to button.text?

3 Answers3