在WPF中高效显示图像上的文本？

Question

如何在图像上显示文字，因此它应该始终可见（因为图像颜色混合且不可预测）？

我想到了两个选择：

1. 文本边框为白色而文本本身为黑色
2. 将文字显示为负面图片

第一种选择是首选，因为它看起来更稳固。

嵌入文字很简单：

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

answer上的更新：

听起来不错，但不起作用。

我尝试了你的代码，结果如下：



左侧图片是我将Color属性设置为White而ShadowDepth设置为10的时间。

Answer 1

我这样做了，它有所帮助：

<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}"/>

这是它的样子：

Answer 2

使文本更加突出显示或对比的最佳方法是使用任何效果，尤其是着色器效果。 自从.NET 3.5 SP1以来，Microsoft也使位图效果废弃，因此您最好的选择是使用任何着色器效果或创建自己的效果。

例如（from Karl Shifflett），您可以使用DropShadowEffect“概述”您的文本，但将ShadowDepth设置为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> 

有关更多示例，您可以使用Google WPF效果。

更新：您还可以使用 TextOptions.TextRenderingMode 的附加属性关闭文本的抗锯齿功能并将其设置为“别名”，或者也可以使用 TextOptions.TextFormattingMode 并设置为“显示”。

尝试并比较一下，看看它是否符合您的需求：

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

希望这有帮助。