MVVM WPF 数据绑定到类似 Skype 的聊天?

发布于 2024-08-01 16:37:52 字数 320 浏览 2 评论 0原文

大家好,我有一个我认为很有趣的问题:

你们都知道并且喜欢 Skype 聊天界面:每条消息都包含在一个气泡中,带有表情符号和链接功能,以及左侧的头像。

如果我要创建一个类似 Skype 的界面,那么容纳每条消息的最理想的 WPF 组件是什么?

我正在使用 MVVM,因此我的所有消息都作为 ObservableCollection 存储在 ViewModel 中。

我在绑定到 RichTextBox 时遇到了问题,因此我研究了绑定到列表框,其中每个列表项都是一条消息,每个项目的样式都具有 Skypey 边框和头像等。

有什么想法吗?

Hey guys, I've got what I think is an interesting question:

You all know and love the Skype chat interface: each message is enclosed in a bubble, with emoticons and link capabilities, as well as an avatar at the left.

What is the most ideal WPF component to house each message in, if I were creating a Skype-like interface?

I am using MVVM, so all my messages are stored in the ViewModel as an ObservableCollection.

I have had problems binding to a RichTextBox, and so I have investigated binding to a Listbox, where each list item is a message and each item is styled to have a Skypey border and avatar etc.

Any ideas?

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

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

发布评论

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

评论(2

如歌彻婉言 2024-08-08 16:37:52

我发现的唯一合适的解决方案是使用 flowdocumentreader 和 ivalueconverter 将字符串数组转换为 flowdocument。 当我制作了自己的类似于 bbcode 的脚本语言后,它实际上效果很好。

这是我学到的样本。 http://michaelsync.net/2009/ 06/09/bindable-wpf-richtext-editor-with-xamlhtml-convertor

这对我来说有点矫枉过正,所以我最终只制作了 ivalueconverter 和一个简单的脚本语言。

The only suitable solution that I have found is using the flowdocumentreader and an ivalueconverter to convert an array of strings to a flowdocument. It actually works great once I made my own scripting language similar to bbcode.

This was the sample I learned from. http://michaelsync.net/2009/06/09/bindable-wpf-richtext-editor-with-xamlhtml-convertor

It was a little overkill for me so I ended up just making the ivalueconverter and a simple script language.

御弟哥哥 2024-08-08 16:37:52

我看到的解决方案是您应该使用 DataTemplate 和 Style。 其想法如下:每条文本消息都由类对象表示。 现在,当您将消息绑定到模板内时,您可以明确告知您希望消息的外观如何。
最好创建一个知道如何表示您的消息的用户控件。

代表类似想法的示例,但想法相同:

    <Window.Resources>
<DataTemplate DataType="{x:Type model:MessageModel}">
    <ed:Callout AnchorPoint="0,1.5" Margin="10" CalloutStyle="RoundedRectangle" Content="{Binding Path=Text}" Fill="#FFF4F4F5" FontSize="14.667" HorizontalAlignment="Left" Height="100" Stroke="Black" VerticalAlignment="Top" Width="200" />                              
</DataTemplate>
</Window.Resources>

<Grid>
    <ItemsControl ItemsSource="{Binding Path=MsgList}" />
</Grid>

对于该示例,您需要附加 Blend 4 附带的 Microsoft.Expression.Drawing.sll。

The solution i see is that you should use DataTemplate and Style. The idea is following: each text message represented by class object. Now when you bind your message inside template, you explicit tell how do you want your messages will look like.
It will better for you to create a usercontrol that will know how represent your messages.

Example that represent similar idea, but idea is the same:

    <Window.Resources>
<DataTemplate DataType="{x:Type model:MessageModel}">
    <ed:Callout AnchorPoint="0,1.5" Margin="10" CalloutStyle="RoundedRectangle" Content="{Binding Path=Text}" Fill="#FFF4F4F5" FontSize="14.667" HorizontalAlignment="Left" Height="100" Stroke="Black" VerticalAlignment="Top" Width="200" />                              
</DataTemplate>
</Window.Resources>

<Grid>
    <ItemsControl ItemsSource="{Binding Path=MsgList}" />
</Grid>

For that example you need attach Microsoft.Expression.Drawing.sll which come aside with Blend 4.

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