MVVM WPF databinding to a Skype-like chat?

问题

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?

回答1:

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.

回答2:

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.

来源：https://stackoverflow.com/questions/1259021/mvvm-wpf-databinding-to-a-skype-like-chat

标签

wpf

data-binding

mvvm

chat