在 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> 

更多示例，您可以谷歌 WPF 效果。

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

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

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

希望这会有所帮助。