在 TextBlock (WPF) 中显示图像

发布于 2024-07-16 02:56:35 字数 450 浏览 5 评论 0原文

我正在开发一个简单的聊天应用程序。 目前,消息绑定到自定义样式的列表框,如下所示(简化的 XAML):

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

现在我希望能够将图像(如图形笑脸)放入显示的消息文本中。 有没有办法使用 TextBlock (或任何其他标准组件)来实现此目的,或者我是否需要为此使用一些特殊的控件?

提前致谢

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

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(6

木緿 2024-07-23 02:56:35

只需使用 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>

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>
酒几许 2024-07-23 02:56:35

TextBlock 的内容始终只是一系列内联,因此您应该使用 InlineUIContainer。 您可以将此容器作为内联之一插入到 TextBlock 中任何您想要显示图像的位置,并与文本运行交替出现。 您可以解析消息,同时继续将找到的标记(文本或图像)添加到 TextBlock 的 Inlines 集合中。

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.

单身情人 2024-07-23 02:56:35

如果您希望图像实际上文本中(如表情符号),那么您将需要做一些工作。 这听起来像是我真正想要一个用户控件的少数情况之一,其要点是扫描文本以查找表情符号值并动态构建数据模板。

请记住,您可以在 XAML 中执行的任何操作都可以在代码中执行,因此我正在考虑的代码将遵循以下总体思路:

  1. 扫描文本以获取表情符号值并
    创建数据值列表
    元素。
  2. 创建一个 DockPanel。
  3. 对于列表中的每个元素,添加
    文本块或图像
    (基于价值)。
  4. 将 this.Content 设置为 DockPanel。

我认为这样的东西实际上就是您正在寻找的东西,但如果您只想要一个图像,那么 ValueConverter 建议会起作用。

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.

童话 2024-07-23 02:56:35

您可以使用值转换器将文本转换为另一种类型,该类型具有由文本或笑脸组成的段列表(按它们出现的顺序)。

然后,您可以使用数据模板绑定到该新类型并适当地显示文本和笑脸。

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.

云巢 2024-07-23 02:56:35

我最近也遇到了这个问题,我通过

创建一个包含 ItemsControl 的 ListBox ItemTemplate 来克服这个问题,该 ItemsControl 在 ItemsPanelTemplate 中有一个 WrapPanel,然后使用包含所有逻辑的 IValueConverter 将我的字符串绑定到 ItemsControl 的 ItemsSource。

拆分您的单词并查询/搜索您的表情符号字符串、超链接等,并创建您的 TextBlock、图像、超链接、按钮元素并设置您的值和事件句柄。

在函数中创建一个List; 并用您生成的控件填充列表,并将列表作为 IValueConverter 的 Convert 函数中的对象返回。

因为那里有 WrapPanel,所以您可以完成包装。

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.

奶气 2024-07-23 02:56:35

使用 Image 元素而不是 TextBlock 并使用 Converter 将文本值映射到微笑图像。

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

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>

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文