如何添加表情（笑脸）到WPF的富文本框

Question

我有一个文本框输入和输出富文本框中输入一个WPF IM聊天窗口。我想在richtext框中呈现输入文本。当用户输入喜欢:)一个笑脸符号插入到文本块中的一些文字，我想替换文本笑脸与预定义的笑脸图像和渲染的富文本框。这与gtalk聊天窗口行为非常相似。

我该怎么做？ 由于事先:-)

Answer 1

你可以请使用下面的表情符号功能：

#region add emotion to RichTextBox function 

    private Dictionary<string, string> _mappings = new Dictionary<string, string>(); 

    private string GetEmoticonText(string text) 
    { 
     string match = string.Empty; 
     int lowestPosition = text.Length; 

     foreach (KeyValuePair<string, string> pair in _mappings) 
     { 
      if (text.Contains(pair.Key)) 
      { 
       int newPosition = text.IndexOf(pair.Key); 
       if (newPosition < lowestPosition) 
       { 
        match = pair.Key; 
        lowestPosition = newPosition; 
       } 
      } 
     } 

     return match; 

    } 
    // And also function which add smiles in richtextbox, here is it: 

    private void Emoticons(string msg,Paragraph para) 
    { 
     //try 
     //{ 


     // Paragraph para = new Paragraph { LineHeight = 1 }; 

     Run r = new Run(msg); 

     para.Inlines.Add(r); 

     string emoticonText = GetEmoticonText(r.Text); 

     //if paragraph does not contains smile only add plain text to richtextbox rtb2 
     if (string.IsNullOrEmpty(emoticonText)) 
     { 
      rtbConversation.Document.Blocks.Add(para); 
     } 
     else 
     { 
      while (!string.IsNullOrEmpty(emoticonText)) 
      { 

       TextPointer tp = r.ContentStart; 

       // keep moving the cursor until we find the emoticon text 
       while (!tp.GetTextInRun(LogicalDirection.Forward).StartsWith(emoticonText)) 

        tp = tp.GetNextInsertionPosition(LogicalDirection.Forward); 

       // select all of the emoticon text 
       var tr = new TextRange(tp, tp.GetPositionAtOffset(emoticonText.Length)) { Text = string.Empty }; 

       //relative path to image smile file 
       string path = _mappings[emoticonText]; 

       Image image = new Image 
       { 
        Source = 
         new BitmapImage(new System.Uri(Environment.CurrentDirectory+path, 
               UriKind.RelativeOrAbsolute)), 
        Width = Height = 25, 
       }; 

       //insert smile 
       new InlineUIContainer(image, tp); 

       if (para != null) 
       { 
        var endRun = para.Inlines.LastInline as Run; 

        if (endRun == null) 
        { 
         break; 
        } 
        else 
        { 
         emoticonText = GetEmoticonText(endRun.Text); 
        } 

       } 

      } 
      rtbConversation.Document.Blocks.Add(para); 

     } 
    } 

// /// 
    private void Window_Loaded(object sender, RoutedEventArgs e) 
    { 
     _mappings.Add(@"s-]", "/Images/smiley/silly.png"); 
     _mappings.Add(@":-|", "/Images/smiley/angry.png"); 
    } 

    //Call function to use 
    private void SendMessage(object sender,RoutedEventArgs e) 
    { 

     Paragraph paragraph = new Paragraph(); 
     paragraph.LineHeight = 1; 

     Run name = new Run(); 
     name.Text =rtbMessage.Text+ " : "; 
     name.Foreground = new SolidColorBrush(Colors.Red); 
     paragraph.Inlines.Add(new Bold(name)); 
     //paragraph.Inlines.Add(new Run(name.text)); 
     rtbConversation.Document.Blocks.Add(paragraph); 
     Emoticons(name.Text, paragraph); 
     rtbConversation.ScrollToEnd(); 

    } 

Answer 2

这是不容易的。一般的做法是监测富文本输入框，找到所有的表情符号，并与图像替换它们：打破Run，你找到了一个微笑到Span与Runs和Images。例如。

<RichTextBox> 
    <FlowDocument> 
    <Paragraph> 
     <!-- Before --> 
     <Run>Hello :) world!</Run> 
     <!-- After --> 
     <Span> 
     <Run Text="Hello"/> 
     <Image Width="16" Source="http://kolobok.us/smiles/light_skin/smile.gif"/> 
     <Run Text=" world"/> 
     </Span> 
    </Paragraph> 
    </FlowDocument> 
</RichTextBox> 

希望这会有所帮助。

Answer 3

这会是这样用内嵌图像

显示文本和使用代码隐藏文件中，你可以做同样的事情

//Create a new RichTextBox. 
    RichTextBox MyRTB = new RichTextBox(); 

    // Create a Run of plain text and image. 
    Run myRun = new Run(); 
    myRun.Text = "Displaying text with inline image"; 
    Image MyImage = new Image(); 
    MyImage.Source = new BitmapImage(new Uri("flower.jpg", UriKind.RelativeOrAbsolute)); 
    MyImage.Height = 50; 
    MyImage.Width = 50; 
    InlineUIContainer MyUI = new InlineUIContainer(); 
    MyUI.Child = MyImage; 

    // Create a paragraph and add the paragraph to the RichTextBox. 
    Paragraph myParagraph = new Paragraph(); 
    MyRTB.Blocks.Add(myParagraph); 

    // Add the Run and image to it. 
    myParagraph.Inlines.Add(myRun); 
    myParagraph.Inlines.Add(MyUI); 

    //Add the RichTextBox to the StackPanel. 
    MySP.Children.Add(MyRTB); 

Answer 4

有一篇文章有​​助于创建一个扩展编辑器。

http://www.codeproject.com/Tips/599014/WPF-RichTextBox-supporting-smileys