Silverlight text around an image

Im am trying to wrap text around an image as on开发者_开发知识库e would use the html float property. Is there a way to acomplish this in silverlight 3?

Thanks

I tackled this issue a while back. There is not really a good way that I know of. This will work though it's just painful.

In order to simplify the explanation why don't we assume that the image is in the upper right corner of the page and the text needs to be to the left and below the image.

Start by placing the TextBlock and the Image side-by-side.

Calculate the bottom most point of the TextBlock and the bottom most point of the image. (Use their top margins and actual heights.

While the TextBlock is the larger you move a word at a time into a newly created TextBlock below the image. This creates the illusion of wrapping text.

    leftText.Text = textToWrap;
    bottomText.Text = string.Empty;
    Stack<string> wordsToMove = new Stack<string>();
    double imageBottomPoint = image1.ActualHeight + image1.Margin.Top;
    while ((leftText.ActualHeight + leftText.Margin.Top) > (imageBottomPoint + 14))
    {
        int lastSpace = leftText.Text.LastIndexOf(' ');
        string textToMove = leftText.Text.Substring(lastSpace).Trim();
        BlockedText.Text = leftText.Text.Remove(lastSpace);
        wordsToMove.Push(textToMove + ' ');
    }
    StringBuilder sb = new StringBuilder(bottomText.Text);
    while (wordsToMove.Count > 0)
    {
        sb.Append(wordsToMove.Pop());
    }

    bottomText.Text = sb.ToString();

You need to look RichTextBox and FlowDocument if it is WPF and RichTextBox if Silverlight 4.0.

Silverlight 4.0 Solution

     <RichTextBox TextWrapping="Wrap"  IsReadOnly="False">  
       <Paragraph>  
            More text here .. 
            <InlineUIContainer>  
                <Image Source="abc.jpg"/>  
            </InlineUIContainer>   
            more and more text here;  
            <LineBreak />  
        </Paragraph>  
    </RichTextBox> 

WPF Solution-

<RichTextBox>
 <FlowDocument IsEnabled="true">
  <Paragraph>
    Text text ..
    <Button Margin="10,0,10,0" Content="A Button Float"/>
    More text..
  </Paragraph>
  <Paragraph TextAlignment="Center">
    <Image Source="abc.jpg"/>
     text text..
  </Paragraph>
  </FlowDocument>
</RichTextBox>