Button Text not visible with background image

Question

I have a situation where I am applying an image to a button, however due to the colour of the image, the text of the button is not always visible. I cannot just change the button text colour due to not knowing what colour the button image will be (this is up to the customer) and I have ran out of ideas to try! The best idea i had was to apply a 'Stroke' to the text (with a colour opposite the text colour itself) so therefore even if the text colour itself is not visible the stroke will be however I have not being able to find any relevant examples of how to do this. Is this the best solution the problem? If so could anyone provide an example of how to do this? Or recommend a better solution to my problem?

Thanks in advance.

Answer 1

I believe you have got one of two good solutions right in your question.

To create a 'stroke' or 'shadow' you will have to paint the button by yourself.

Not easy, usually, because of the visual styles the user may have active on his machine..

If your image fills the button anyway, you may get away with rather few lines of code, though..

Here is a little example to get you started:

private void button1_Paint(object sender, PaintEventArgs e)
{
  // the background image
  e.Graphics.DrawImage(button1.BackgroundImage, Point.Empty);
  // maybe a few borderlines ?
  using (Pen penbright = new Pen(Color.FromArgb(155,255,255,255)))
       e.Graphics.DrawRectangle(penbright, button1.ClientRectangle);
  using (Pen pendark = new Pen(Color.FromArgb(155, 0, 0, 0)))
       e.Graphics.DrawRectangle(pendark, 
                                new Rectangle(new Point(-1,-1), button1.ClientSize));
  // Now the Text: Stroke: white over black 
  e.Graphics.DrawString(button1.Text, button1.Font, Brushes.Black, new Point(10,10));
  e.Graphics.DrawString(button1.Text, button1.Font, Brushes.White, new Point(11,11));
}

to be improved:

• The positions for the DrawStrings should be adapted

• If the Image doesn't cover the whole button text we'll will have to refine the code a little..

Note that there is no visual feedback during the button press..

The other solution may be to change the Images.

Can you post one or two example images?