MVVM WPF привязывает данные к чату в стиле Skype?

Question

Эй, ребята, у меня есть интересный вопрос:

Вы все знаете и любите интерфейс чата Skype: каждое сообщение заключено в пузырь, со смайликами и ссылками, а также с аватаром слева.

Какой компонент WPF является наиболее идеальным для размещения каждого сообщения, если бы я создавал Skype-подобный интерфейс?

Я использую MVVM, поэтому все мои сообщения хранятся в ViewModel как ObservableCollection.

У меня были проблемы с привязкой к RichTextBox, и поэтому я исследовал привязку к Listbox, где каждый элемент списка является сообщением, а каждый элемент имеет стилевое оформление с рамкой Skypey, аватаром и т. Д.

Есть идеи?

Answer 1

Единственное подходящее решение, которое я нашел, - это использование flowdocumentreader и ivalueconverter для преобразования массива строк в flowdocument. Это на самом деле прекрасно работает, когда я сделал свой собственный язык сценариев, похожий на bbcode.

Это был образец, из которого я узнал. http://michaelsync.net/2009/06/09/bindable-wpf-richtext-editor-with-xamlhtml-convertor

Для меня это было немного излишним, поэтому я просто сделал ivalueconverter и простой язык сценариев.

Answer 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>

Для этого примера вам нужно присоединить Microsoft.Expression.Drawing.sll, который поставляется вместе с Blend 4.