在WPF中有效地在图像上显示文本？

Question

如何在图像上显示文本，使其始终可见（因为图像颜色是混合的且不可预测）？

我考虑了两个选项：

1. 将文本边框设置为白色，而文本本身为黑色
2. 让文本以与图片相反的方式显示

第一个选项是首选，因为它看起来更坚固。

嵌入文本很简单：

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

更新答案：

听起来是个好主意，但它行不通。

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

左图是我设置 时的图像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 还废弃了位图效果，因此您最好的选择是使用任何着色器效果或创建您自己的效果。

例如（来自 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的附加属性关闭文本的抗锯齿功能并将其设置为“Aliased”，或者您也可以使用TextOptions。 TextFormattingMode 并设置为“显示”。

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

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

希望这会有所帮助。