MVVM WPF 数据绑定到类似 Skype 的聊天？答案

【问题标题】：MVVM WPF databinding to a Skype-like chat?MVVM WPF 数据绑定到类似 Skype 的聊天？
【发布时间】：2009-08-11 08:15:26
【问题描述】：

大家好，我有一个我认为很有趣的问题：

大家都知道并喜欢 Skype 聊天界面：每条消息都包含在一个气泡中，带有表情符号和链接功能，左侧还有一个头像。

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

我使用的是 MVVM，所以我的所有消息都作为 ObservableCollection 存储在 ViewModel 中。

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

有什么想法吗？

【问题讨论】：

我只是想为每个聊天消息使用用户控件，其中用户控件在 XAML 中使用图像和文本块设置样式，但我需要将这些用户控件动态添加为新的聊天进来了。它变得相当复杂。

标签： wpf data-binding mvvm chat

【解决方案1】：

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

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

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

【讨论】：

【解决方案2】：

我看到的解决方案是您应该使用 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。

【讨论】：