none
How to make text followed by an image icon?

    Question

  • Hi, I've got a special requirement to follow text by an image icon, like this:

     

    1. This is a text which has multi-lines and a varaible length [icon]

     

    2. This is a text which has multi-lines and a varaible length, bla bla

    bla bla bla bla bla bla bla bla bla bla bla bla [icon]

     

    As we can see, the icon image (a small helper text button) follows directly after the text;

    However, in silverlight, I used textblock, which is a square area, and the icon is always outside the textblock's square area.

     

    What shall I do, any good ideas?

     

    Sunday, August 08, 2010 5:38 AM

Answers

  • Hi geedubb,

     

    I've got it working with WrapPanel, not by words, but by rows, each of the text will be seperated to several rows, each row is a text block.

    Usually I have 1 -3 rows for each text, so the performance takes about 1/10 efforts of that by words.

    And it feels as good as using the RichTextBox.

     

    Thanks a lot for your tips, which helped a lot :)  

    Thursday, August 12, 2010 2:23 AM

All replies

  • Why cant you use a StackPanel (Horizontal Orientation) with TextBlock and Image Control in it?

    or

    use a HyperlinkButton / Button Control and add the content as the above item

    or

    use a content control with Stackpanel as the content

    Sunday, August 08, 2010 5:43 AM
  • You could also perhaps look at using a wrappanel from the SL toolkit. It will accept text and images (as well as other controls) as children. 

    Justin Angel has a tutorial here:


    http://blogs.silverlight.net/blogs/justinangel/archive/2008/11/05/silverlight-toolkit-wrappanel.aspx

    Sunday, August 08, 2010 5:47 AM
  • I did tried wrap panel, since the text area has a fixed width, but the icon just doesn't fit into the text block's area.

    Although the text has a irregular shape, and has trailing space after it, but actually it is inside a regular container, and the icon image couldn't fix in.

     

    Sunday, August 08, 2010 5:56 AM
  • same issue as I have explained with the wrap panel.

    It turned out to be like this:

    text text text text text text text text text

    text text texttext text text                          [Icon]

     

    What I want is

    text text text text text text text text text

    text text texttext text text. [Icon]

     

    It doesn't fit in.

    Sunday, August 08, 2010 5:59 AM
  • The Solution is to use the new RichTextBox available in Silverlight 4

    <RichTextBox>
        <Paragraph>
            Displaying text with inline image
            <InlineUIContainer>
                <Image Source="./flower.jpg" Height="50" Width="50" />
            </InlineUIContainer>           
        </Paragraph>
    </RichTextBox>

     

    see the following link http://msdn.microsoft.com/en-us/library/ee681613(VS.95).aspx#inline_images_or_other_elements

    Sunday, August 08, 2010 6:46 AM
  • It will work with WrapPanel, if you can create a textblock per word (or create a control to do that automatically).


    However, mosallem is correct that the RichTextBox could be the best solution.

    Sunday, August 08, 2010 6:49 AM
  • Wow the RichTextBox works really well. Thanks!

    BTW @geedubb, the "per word" method really hacks. Laughing

    Sunday, August 08, 2010 8:13 AM
  • I'll share you with my snippets:

     

    <RichTextBox Grid.Column="0"
                         BorderThickness="0"
                         BorderBrush="Transparent"
                         Background="Transparent"
                         IsReadOnly="True">


                <Paragraph>
                    <!-- the paragraph text -->
                    <Run Name="InnerText"
                         FontFamily="Arial"
                         FontSize="12"/>
                   
                    <InlineUIContainer>
                        <!-- the icon image -->
                        <Image Source="/Silverlight.Controls;component/Images/icon.png"
                               Margin="2"
                               VerticalAlignment="Center"
                               Stretch="None"
                               Cursor="Hand"
                               MouseLeftButtonDown="Image_MouseLeftButtonDown" />
                    </InlineUIContainer>
              </Paragraph>

    </RichTextBox>

    Sunday, August 08, 2010 8:27 AM
  • Glad you got it working :D

    Sunday, August 08, 2010 9:56 AM
  • Glad you got it working :D

     

     

    By the way, I found RichTextBox has serious performance issue.

    After I load my page with dozens of those RichTextBoxes, the web page slows down a lot, especially when events are triggered on the RichTextBoxes. Innocent

    Tuesday, August 10, 2010 4:31 AM
  • Hi,

    I've just removed the "mark as answer" labels, to attract more attension.

     

    The RichTextBox has serious performance issues, I wonder:

    1. Is there any tricks to avoid the performance issue in RichTextBox?

    2. If the issue is unavoidable, any other controls availble to achieve the inline image effects?

    Thanks a lot!

    Wednesday, August 11, 2010 4:40 AM
  • I resolved a similar issue I had when trying to insert hyperlinks into wrapping text.

    It should be fairly straightforward to modify the technique here on Jeremy Likness' blog to include images instead of hyperlinks. Perf is likely to be a bit better than the RTB

    http://csharperimage.jeremylikness.com/2009/11/inline-hyperlinks-in-silverlight-3.html

    Wednesday, August 11, 2010 10:06 AM
  • I took a look, but TextBlock does not accept UIInlineContainer, where shall I put the image?

    I am still trying. 

    Wednesday, August 11, 2010 11:10 PM
  • Hi geedubb,

     

    I've got it working with WrapPanel, not by words, but by rows, each of the text will be seperated to several rows, each row is a text block.

    Usually I have 1 -3 rows for each text, so the performance takes about 1/10 efforts of that by words.

    And it feels as good as using the RichTextBox.

     

    Thanks a lot for your tips, which helped a lot :)  

    Thursday, August 12, 2010 2:23 AM
  • Glad you got it sorted :)

    Monday, August 16, 2010 4:24 PM