Display images in TextBlock (WPF)

Question

I'm working on a simple chat application. Currently the messages are binded to a custom-styled listbox like this (simplified XAML):

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

Now I would like to be able to put images (like graphical smileys) into the displayed message text. Is there any way to achieve this using TextBlock (or any other standart component) or do I need to use some special control for this?

Thanks in advance

Answer 1

If you want the Images actually inside the text (like an emoticon), then you are going to have to do some work. This sounds like one of the few times I would actually want a User Control, the point of which would be one that scans the Text looking for emoticon values and building a Data Template on the fly.

Remember that anything you can do in XAML you can do in code, so the code I'm thinking of would follow this general idea:

1. Scan text for emoticon values and create a list of values for data elements.
2. Create a DockPanel.
3. Foreach element in the List, add either a TextBlock or an Image (based on value).
4. Set this.Content to the DockPanel.

I think something like this is actually what you are looking for, but if you want just an Image, then the ValueConverter suggestion would work.

Answer 2

Just use the 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>

Answer 3

The Content of a TextBlock is always just a series of Inlines, so you should use the InlineUIContainer. You can insert this container as one of the Inlines in your TextBlock wherever you want an Image to appear, alternating with text Runs. You could parse a message and at the same time keep adding the tokens (either text or images) that you find to the Inlines collection of the TextBlock.

Answer 4

You could use a value converter to convert the text to another type which has a list of segments which are composed of either text or the smiley face (in the order in which they appear).

Then, you can use a data template to bind to that new type and display the text and smiley faces appropriately.

Answer 5

I also encountered this problem recently and I overcome this by

Creating an ListBox ItemTemplate containing an ItemsControl that has a WrapPanel in the ItemsPanelTemplate and then binding my string to the ItemsSource of the ItemsControl with a IValueConverter that houses all the logic.

Split out your words and query/search your emoticons strings, hyperlinks etc and create your TextBlock, Image, Hyperlink, Button elements and set your values and event handles.

In the function create a List<UIElement> and populate the List with the controls you have generated and return the List as the object in the Convert function of the IValueConverter.

Because you have the WrapPanel in there you get your wrapping done.

Answer 6

Use the Image element instead of the TextBlock and use a Converter to map the text value to the smile image.

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