Отображать изображения в TextBlock (WPF) - PullRequest
Новая
       27

Отображать изображения в TextBlock (WPF)

12 голосов
/ 07 апреля 2009

Я работаю над простым приложением чата. В настоящее время сообщения связываются с настраиваемым списком, подобным этому (упрощенный XAML): 

<ListBox ItemsSource="{Binding MessageCollection}">
    <ListBox.ItemTemplate>
        <DataTemplate>
            <TextBlock Text="{Binding Text}"/>
        </DataTemplate>
    </ListBox.ItemTemplate>
</ListBox>

Теперь я хотел бы иметь возможность помещать изображения (например, графические смайлики) в отображаемый текст сообщения. Есть ли способ добиться этого с помощью TextBlock (или любого другого стандартного компонента), или мне нужно использовать какой-то специальный элемент управления для этого?

Заранее спасибо

Ответы [ 6 ]

38 голосов
/ 08 апреля 2011

Просто используйте InlineUIContainer. 

<TextBlock TextWrapping="Wrap">
    <Run>Some text.</Run>
    <InlineUIContainer>
        <Image Source="http://sstatic.net/stackoverflow/img/apple-touch-icon.png" Height="20"></Image>
    </InlineUIContainer>
    <Run>Some more text.</Run>
</TextBlock>
3 голосов
/ 05 мая 2009

Содержимое TextBlock всегда представляет собой последовательность строк, поэтому вы должны использовать InlineUIContainer. Вы можете вставить этот контейнер как один из Inline в вашем TextBlock, где бы вы ни хотели, чтобы появилось изображение, чередуя его с текстовым прогоном. Вы можете анализировать сообщение и одновременно добавлять найденные токены (текст или изображения) в коллекцию Inlines TextBlock.

1 голос
/ 12 апреля 2012

Я также недавно столкнулся с этой проблемой и преодолел ее с помощью

Создание ListBox ItemTemplate, содержащего ItemsControl, у которого есть WrapPanel в ItemsPanelTemplate, и затем привязка моей строки к ItemsSource элемента ItemsControl с помощью IValueConverter, в котором находится вся логика.

Разделите ваши слова и сделайте запрос / выполните поиск по строкам смайликов, гиперссылкам и т. Д., Создайте элементы TextBlock, Image, Hyperlink, Button и установите свои значения и дескрипторы событий.

В функции создайте Список , заполните Список сгенерированными вами элементами управления и верните Список как объект в функции Преобразовать IValueConverter.

Поскольку у вас есть WrapPanel, вы завершили упаковку.

1 голос
/ 07 апреля 2009

Если вы хотите, чтобы изображения на самом деле находились внутри текста (как смайлик), то вам придется выполнить некоторую работу. Это звучит как один из немногих случаев, когда я на самом деле хотел бы пользовательский элемент управления, точка которого будет сканировать текст в поисках значений смайликов и создавать шаблон данных на лету.

Помните, что все, что вы можете делать в XAML, вы можете делать в коде, поэтому код, о котором я думаю, будет следовать этой общей идее:

  1. Сканирование текста на наличие значений смайликов и создать список значений для данных элементы.
  2. Создание DockPanel.
  3. Элемент Foreach в списке, добавить либо TextBlock или изображение (основано на значении).
  4. Установить это. Содержимое DockPanel.

Я думаю, что-то вроде этого на самом деле то, что вы ищете, но если вы хотите просто изображение, то предложение ValueConverter будет работать.

1 голос
/ 07 апреля 2009

Вы можете использовать конвертер значений для преобразования текста в другой тип, у которого есть список сегментов, состоящих из текста или смайлика (в порядке их появления).

Затем вы можете использовать шаблон данных для привязки к этому новому типу и отображения текста и смайликов соответствующим образом.

0 голосов
/ 07 апреля 2009

Используйте элемент Image вместо TextBlock и используйте конвертер для сопоставления текстового значения с изображением улыбки. 

<ListBox ItemsSource="{Binding MessageCollection}">
<ListBox.ItemTemplate>
    <DataTemplate>
        <Image Source="{Binding Text, Converter={StaticResource MyImageConverter}}"/>
    </DataTemplate>
</ListBox.ItemTemplate>

...