Эффективно ли отображать текст на изображении в 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

Лучший способ сделать текст более выделенным или контрастным - использовать любой эффект, особенно эффекты шейдера. Microsoft также делает растровый эффект устаревшим, начиная с .NET 3.5 SP1, поэтому лучше всего использовать любой эффект шейдера или создать свой собственный.

Например ( от Карла Шифлетта ), вы можете использовать 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>

Надеюсь, это поможет.