WPF仿QQ聊天框表情文字混排实现

这个需求前后也历经了多版，上两张图给各位同学感受一下，第一张是初版，第二张是稳定不最终版~

图中分别有文件、文本+表情、纯文本的展示，对于同一个list不同的展示形式，很明显，应该用多个DataTemplate，那么也就需要DataTemplateSelector了：

class MessageDataTemplateSelector : DataTemplateSelector
    {
        public override System.Windows.DataTemplate SelectTemplate(object item, System.Windows.DependencyObject container)
        {
            Window win = Application.Current.MainWindow;
            var myUserNo = UserLoginInfo.GetInstance().UserNo;
            if (item!=null)
            {
                NIMIMMessage m = item as NIMIMMessage;
                if (m.SenderID==myUserNo)
                {
                    switch (m.MessageType)
                    {
                        case NIMMessageType.kNIMMessageTypeAudio:
                        case NIMMessageType.kNIMMessageTypeVideo:
                            return win.FindResource("self_media") as DataTemplate;
                        case NIMMessageType.kNIMMessageTypeFile:
                            return win.FindResource("self_file") as DataTemplate;
                        case NIMMessageType.kNIMMessageTypeImage:
                            return win.FindResource("self_image") as DataTemplate;
                        case NIMMessageType.kNIMMessageTypeText:
                            return win.FindResource("self_text") as DataTemplate;
                        default:
                            break;
                    }
                }
                else
                {
                    switch (m.MessageType)
                    {
                        case NIMMessageType.kNIMMessageTypeAudio:
                        case NIMMessageType.kNIMMessageTypeVideo:
                            return win.FindResource("friend_media") as DataTemplate;
                        case NIMMessageType.kNIMMessageTypeFile:
                            return win.FindResource("friend_file") as DataTemplate;
                        case NIMMessageType.kNIMMessageTypeImage:
                            return win.FindResource("friend_image") as DataTemplate;
                        case NIMMessageType.kNIMMessageTypeText:
                            return win.FindResource("friend_text") as DataTemplate;
                        default:
                            break;
                    }
                }
            }
            return null;
        }
    }

以上一共有8个DateTemplate，friend和self的区别就在于一个在左一个在右，我这边就放friend_text的样式代码好了，因为本篇主要说的是表情和文字的混排：

<Window.Resources>
<DataTemplate x:Key="friend_text">
            <Grid Margin="12 6">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="32"/>
                    <ColumnDefinition Width="*"/>
                </Grid.ColumnDefinitions>
                <Image Source="{Binding TalkID}"  HorizontalAlignment="Center" VerticalAlignment="Center">
                    <Image.Clip>
                        <EllipseGeometry RadiusX="16" RadiusY="16" Center="16 16"/>
                    </Image.Clip>
                </Image>
                <Grid HorizontalAlignment="Left" Grid.Column="1"  Background="Transparent" VerticalAlignment="Center" Margin="12 0 0 0">
                    <Border CornerRadius="8" Background="#F0F0F0" Padding="6" >
                        <xctk:RichTextBox FontSize="14"
                                          VerticalScrollBarVisibility="Auto"
                                          HorizontalScrollBarVisibility="Disabled"
                                          Text="{Binding TextContent,Converter={StaticResource ShowImageOrTextConverter}}"
                                          VerticalAlignment="Center"
                                          BorderThickness="0"
                                          IsReadOnly="True"
                                          Background="Transparent">
                            <FlowDocument Name="rtbFlowDoc" PageWidth="{Binding MessageWidth}"/>
                            <xctk:RichTextBox.TextFormatter>
                                 <xctk:XamlFormatter/>
                            </xctk:RichTextBox.TextFormatter>
                        </xctk:RichTextBox>
                    </Border>
                </Grid>
            </Grid>
        </DataTemplate>
</Window.Resources>