Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Efficiently display text on image in WPF?

Tags:

text

image

wpf

How to display text on an image, so it should always visible (because the image colors are mixed and unpredictable)?

I thought about two options:

  1. Making the text border in white while the text itself will be black
  2. Having the text displayed negatively to the picture

The 1st option would be preferred since it looks more solid.

Embedding the text is simple:

<Grid>
  <Image Source="{Binding ImageLink}" Width="110" />
  <TextBlock Text="{Binding Description}" 
    HorizontalAlignment="Center" 
    VerticalAlignment="Center" />
</Grid>

Update on answer:

Sounds like a great idea except it doesn't work.

I tried your code, and here are the results:

enter image description here

The left image is when I set the Color property to White and ShadowDepth to 10.

like image 801
Shimmy Weitzhandler Avatar asked Oct 25 '11 10:10

Shimmy Weitzhandler


1 Answers

I did this and it helps:

<Style x:Key="AnnotationStyle" TargetType="TextBlock">
  <Setter Property="Background" Value="#70FFFFFF" />
  <Setter Property="FontWeight" Value="Bold" />
  <Setter Property="HorizontalAlignment" Value="Center"/>
  <Setter Property="VerticalAlignment" Value="Center"/>
  <Setter Property="TextAlignment" Value="Center"/>
  <Setter Property="TextWrapping" Value="Wrap"/>
  <Style.Triggers>
    <Trigger Property="IsMouseOver" Value="True">
      <Setter Property="Background" Value="#CCFFFFFF" />
    </Trigger>
  </Style.Triggers>
</Style>

....

<TextBlock ... Style="{StaticResource AnnotationStyle}"/>

Here is what it looks like:
enter image description here

like image 101
Shimmy Weitzhandler Avatar answered Sep 18 '22 23:09

Shimmy Weitzhandler