Effectively display text on image in WPF?

Question

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

I thought of two options:

• Create a text border in white when the text itself is black
• When displaying a negative image in the picture

The first option will be preferable because it looks more durable.

Nesting text is simple:

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

Update answer :

That sounds like a great idea, except that it doesn't work.

I tried my code and here are the results:

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

Answer 1

I have done 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's what it looks like:

Answer 2

The best way to make text more emphasized or contrasting is to use any effect, especially shader effects. Microsoft also makes the bitmap effect obsolete since the release of .NET 3.5 SP1, so it’s best to use any shader effect or create your own.

For example ( from Karl Shifflett ), you can use DropShadowEffect to “sketch” your text, but set ShadowDepth to 0:

 <Grid> <Image Source="{Binding ImageLink}" Width="110" /> <TextBlock Text="{Binding Description}" HorizontalAlignment="Center" VerticalAlignment="Center"> <TextBlock.Effect> <DropShadowEffect ShadowDepth="0" Color="Blue" BlurRadius="10" /> </TextBlock.Effect> </TextBlock> </Grid> 

For more information, you can use WPF effects in google.

UPDATE: You can also disable text anti-aliasing using the attached property TextOptions.TextRenderingMode and set it to "Aliased", or you can also use TextOptions.TextFormattingMode and set the value to "Show".

Try comparing this and see if it fits your needs:

 <StackPanel> <TextBlock> Hello World ... Ideal text formatting </TextBlock> <TextBlock TextOptions.TextFormattingMode="Display"> Hello World ... Display text formatting </TextBlock> </StackPanel> 

Hope this helps.