comment ajouter des émoticônes (smileys) dans la zone richtext de WPF

Question

J'ai une fenêtre de discussion WPF IM avec une zone de saisie et une zone de sortie richtext. Je veux rendre le texte d'entrée sur la boîte de texte riche. Lorsque l'utilisateur entre un symbole smiley comme :) dans le bloc de texte avec quelques textes, je veux remplacer ce smiley texte par une image smiley prédéfinie et le rendre sur la boîte richtext. C'est très similaire au comportement de la fenêtre de discussion gtalk.

Comment puis-je faire cela? merci d'avance :-)

Answer 1

Vous pouvez utilisez cette fonction Emoticons ci-dessous:

#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

Ce n'est pas facile. Approche générale serait de surveiller l'entrée de la zone de texte riche, trouver toutes les émoticônes et les remplacer par des images: casse Run où vous avez trouvé un sourire dans Span avec Runs et Images. Par exemple.

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

Espérons que cela aide.

Answer 3

Ce serait comme ça

Affichage du texte avec l'image en ligne

et code à l'aide derrière fichier que vous pouvez faire la même chose

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

Il existe un article qui permet de créer un éditeur étendu.

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