Как добавить смайлики (смайлики) в поле richtext box WPF

Question

У меня есть окно чата WPF IM с текстовым полем ввода и полем richtext. Я хочу отобразить текст ввода в поле richtext. Когда пользователь вводит символ смайлика как :) в текстовый блок с некоторыми текстами, я хочу заменить этот текстовый смайлик на предопределенное изображение смайликов и рендеринг в окне richtext. Это очень похоже на поведение окна gtalk chat.

Как я могу это сделать? заранее :-)

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

Это непросто. Общий подход состоял бы в том, чтобы контролировать вкладку с большим текстовым полем, находить все смайлики и заменять их изображениями: break 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