locked
Windows Store App - RichTextBlock Adding pictures RRS feed

  • Question

  • i am making an instant messagaing app. When the users types ":)" how do  i change that to an emoticon picture?

    For example:

    if what the users types is store in a string, like so.

    String message = "hey :), how are you?";

    I want to display that String in a RichTextBlock, but replace the ":)" with a smiley picture.

    how, do i do this?

    I am using richTextBlock to display the text that the user types.

    How can  i do this?

    Thank you.

    Sunday, April 14, 2013 8:24 PM

Answers

  • Most Emoji are in the Segoe UI Symbol font.


    Matt Small - Microsoft Escalation Engineer - Forum Moderator
    If my reply answers your question, please mark this post as answered.

    NOTE: If I ask for code, please provide something that I can drop directly into a project and run (including XAML), or an actual application project. I'm trying to help a lot of people, so I don't have time to figure out weird snippets with undefined objects and unknown namespaces.

    Monday, April 15, 2013 1:52 PM
    Moderator
  • In visual basic:

    Imports System.Text.RegularExpressions

    Private Sub textBox1_TextChanged(sender As Object, e As TextChangedEventArgs) Handles textBox1.TextChanged
    
            textBox1.Text = Regex.Replace(textBox1.Text, ":\)", "☺")
    
            textBox1.Text = Regex.Replace(textBox1.Text, ":\(", "☹")
    
            textBox1.Select(textBox1.Text.Length, textBox1.Text.Length)
    
        End Sub

    Thursday, April 18, 2013 10:33 AM
  • You can use InlineUIContainer. Here is example from this link 

    <RichTextBlock>
        <Paragraph>
            <Italic>This is an inline image.</Italic>
    
            <InlineUIContainer>
                <Image Source="Assets/SmallLogo.png" Height="30" Width="30"/>
            </InlineUIContainer>
     
            Mauris auctor tincidunt auctor.
        </Paragraph>
    </RichTextBlock>


    Thanks,
    Sachin
    My Samples | Personal Website

    Thursday, April 18, 2013 10:13 PM
  • Yes you can add InlineUIContainer (image) to existing paragraph.

    Here is code (adding image to existing Paragraph named paraText)-

     InlineUIContainer inlineUI = new InlineUIContainer();
                    Image img = new Image();
                    var bitmapImage = new Windows.UI.Xaml.Media.Imaging.BitmapImage(new Uri("ms-appx:/Assets/Logo.png"));
                    img.Source = bitmapImage;
                    img.Width = 50;
                    img.Height = 50;
                    img.Stretch = Stretch.Fill;
                    inlineUI.Child = img;
                    paraText.Inlines.Add(inlineUI);

     <RichTextBlock Name="richTextBlock">
                    <Paragraph x:Name="paraText">
    
       </Paragraph>
                </RichTextBlock>


    Thanks,
    Sachin
    My Samples | Personal Website

    Thursday, April 18, 2013 11:06 PM
  • Yes above image will be in line with other text.

    Thanks,
    Sachin
    My Samples | Personal Website

    Friday, April 19, 2013 1:36 AM
  • Please stop marking/unmarking these questions as answered.  You've had multiple questions answered within this single post, please mark them as answered only once, when you are sure they've been answered, and leave them that way.  If you have multiple questions, please start a new thread.

    Matt Small - Microsoft Escalation Engineer - Forum Moderator
    If my reply answers your question, please mark this post as answered.

    NOTE: If I ask for code, please provide something that I can drop directly into a project and run (including XAML), or an actual application project. I'm trying to help a lot of people, so I don't have time to figure out weird snippets with undefined objects and unknown namespaces.

    • Marked as answer by kalel111 Tuesday, April 23, 2013 4:57 AM
    Monday, April 22, 2013 3:21 PM
    Moderator

All replies

  • Most Emoji are in the Segoe UI Symbol font.


    Matt Small - Microsoft Escalation Engineer - Forum Moderator
    If my reply answers your question, please mark this post as answered.

    NOTE: If I ask for code, please provide something that I can drop directly into a project and run (including XAML), or an actual application project. I'm trying to help a lot of people, so I don't have time to figure out weird snippets with undefined objects and unknown namespaces.

    Monday, April 15, 2013 1:52 PM
    Moderator
  • You could use a regex to parse the text and change it as it's typed but how will you know if the user meant to type :) (as in which type of colon do you prefer,; or :) or an emoticon. The best way to achieve what you're looking for might be to provide a set of emoticons the user can click to insert, like the windows touch keyboard does.
    Monday, April 15, 2013 3:21 PM
  • How do i do the regex parse? can you show me examples?
    Thursday, April 18, 2013 4:01 AM
  • In visual basic:

    Imports System.Text.RegularExpressions

    Private Sub textBox1_TextChanged(sender As Object, e As TextChangedEventArgs) Handles textBox1.TextChanged
    
            textBox1.Text = Regex.Replace(textBox1.Text, ":\)", "☺")
    
            textBox1.Text = Regex.Replace(textBox1.Text, ":\(", "☹")
    
            textBox1.Select(textBox1.Text.Length, textBox1.Text.Length)
    
        End Sub

    Thursday, April 18, 2013 10:33 AM
  • Thanks but , what i wanted to do was. I have a set of emoticons pictures  that are .png.

    I want the user to select one, and when they send the message, i want to replace the " :)" with the actual picture.

    so my BIGGEST problem, is how do i add pictures into a RichTextBlock?

    Thursday, April 18, 2013 10:10 PM
  • You can use InlineUIContainer. Here is example from this link 

    <RichTextBlock>
        <Paragraph>
            <Italic>This is an inline image.</Italic>
    
            <InlineUIContainer>
                <Image Source="Assets/SmallLogo.png" Height="30" Width="30"/>
            </InlineUIContainer>
     
            Mauris auctor tincidunt auctor.
        </Paragraph>
    </RichTextBlock>


    Thanks,
    Sachin
    My Samples | Personal Website

    Thursday, April 18, 2013 10:13 PM
  • Thanks for answering Sachin , i am using the Text property of Paragraph to show the user's message. is there a way for me to replace the ":)" in the message like you showed above and then store that in the text property of Paragraph?

    I want to avoid adding the image in a whole new paragraph.

    Thursday, April 18, 2013 10:44 PM
  • I wanna do something like the picture below.
    Thursday, April 18, 2013 10:50 PM
  • Yes you can add InlineUIContainer (image) to existing paragraph.

    Here is code (adding image to existing Paragraph named paraText)-

     InlineUIContainer inlineUI = new InlineUIContainer();
                    Image img = new Image();
                    var bitmapImage = new Windows.UI.Xaml.Media.Imaging.BitmapImage(new Uri("ms-appx:/Assets/Logo.png"));
                    img.Source = bitmapImage;
                    img.Width = 50;
                    img.Height = 50;
                    img.Stretch = Stretch.Fill;
                    inlineUI.Child = img;
                    paraText.Inlines.Add(inlineUI);

     <RichTextBlock Name="richTextBlock">
                    <Paragraph x:Name="paraText">
    
       </Paragraph>
                </RichTextBlock>


    Thanks,
    Sachin
    My Samples | Personal Website

    Thursday, April 18, 2013 11:06 PM
  • One more question. Can i possibly put the picture on the same line as the Paragraph Text? or in between the texts?
    Friday, April 19, 2013 12:21 AM
  • Yes above image will be in line with other text.

    Thanks,
    Sachin
    My Samples | Personal Website

    Friday, April 19, 2013 1:36 AM
  • When i used the above code it placed the image on a new line in the paragraph. Is there a way i can specify WHERE in the paragraph to place the IlineUIContainer?
    Friday, April 19, 2013 7:39 PM
  • Can you post the code, I can look into that? (You may want to play with margin on image element to have proper inline look and feel)

    Thanks,
    Sachin
    My Samples | Personal Website

    Friday, April 19, 2013 7:41 PM
  • Alright, i will. But there is no way to specify WHERE to place the image in the text?
    Friday, April 19, 2013 11:54 PM
  • Please stop marking/unmarking these questions as answered.  You've had multiple questions answered within this single post, please mark them as answered only once, when you are sure they've been answered, and leave them that way.  If you have multiple questions, please start a new thread.

    Matt Small - Microsoft Escalation Engineer - Forum Moderator
    If my reply answers your question, please mark this post as answered.

    NOTE: If I ask for code, please provide something that I can drop directly into a project and run (including XAML), or an actual application project. I'm trying to help a lot of people, so I don't have time to figure out weird snippets with undefined objects and unknown namespaces.

    • Marked as answer by kalel111 Tuesday, April 23, 2013 4:57 AM
    Monday, April 22, 2013 3:21 PM
    Moderator