图像周围的 Silverlight 文本答案

【问题标题】：Silverlight text around an image图像周围的 Silverlight 文本
【发布时间】：2010-03-04 18:58:03
【问题描述】：

我正在尝试将文本环绕在图像周围，就像使用 html 浮动属性一样。有没有办法在 Silverlight 3 中实现这一点？

谢谢

【问题讨论】：

标签： silverlight layout

【解决方案1】：

我不久前解决了这个问题。据我所知，并没有真正的好方法。这会奏效，虽然只是很痛苦。

为了简化解释，我们为什么不假设图片在页面的右上角，而文字需要在图片的左侧和下方。

首先将 TextBlock 和 Image 并排放置。

计算 TextBlock 的最底点和图像的最底点。（使用它们的上边距和实际高度。

虽然 TextBlock 较大，但您一次将一个单词移动到图像下方新创建的 TextBlock 中。这会产生环绕文本的错觉。

    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();

【讨论】：

【解决方案2】：

如果是 WPF，则需要查看 RichTextBox 和 FlowDocument，如果是 Silverlight 4.0，则需要查看 RichTextBox。

Silverlight 4.0 解决方案

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

WPF 解决方案-

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

【讨论】：

在 silverlight 3.0 中有什么方法可以做到这一点？
它不会像 HTML 那样将文本环绕在图像周围。这使图像与文本内联。那看起来会很有趣。一段文字的中间会有一张图片，里面有很大的空白。