WP7 在图像周围环绕文字答案

【问题标题】：WP7 wraping text around imageWP7 在图像周围环绕文字
【发布时间】：2012-01-14 20:12:12
【问题描述】：

我有这个代码：

<ScrollViewer x:Name="textScroller" Grid.Row="2">
        <Grid x:Name="ContentPanel" Margin="12,0,12,0" DataContext="{Binding}">
        <Image x:Name="ImageUrl" Source="{Binding ImageUrl}" Height="198" Width="150" Margin="10 10 10 10" FlowDirection="RightToLeft" HorizontalAlignment="Left" VerticalAlignment="Top"  />
        <TextBlock x:Name="Content" Text="{Binding Content}" TextWrapping="Wrap" Style="{StaticResource PhoneTextNormalStyle}" Margin="0,41,24,-41" LineStackingStrategy="BlockLineHeight"  MaxWidth="478"  />
        </Grid>
</ScrollViewer>

此代码中的图像是该文本块的背景，但我希望该文本环绕 imgae。有可能吗？我找到了这个similar question 并且有答案，仅使用图像和文本块是不可能的。这样对吗？我真的不能在图像中设置一些属性来设置文本不能在图像上？我应该如何更改我的代码？谢谢

编辑：现在这是我的页面的样子：

我希望文本应该在图像的右侧和图像的下方。

【问题讨论】：

从您的问题中不清楚您实际上想要实现什么。你能提供一个模型吗？您可能正在寻找流式布局，但目前在手机上不可用。不过，根据您的具体要求，可能有一种方法可以产生类似的效果。
那么它和你链接的另一个问题完全一样。
WP7 wrap text around image的可能重复
好的，我不确定，这很奇怪，我不能简单地做到这一点。

标签： image windows-phone-7 windows-phone-7.1 word-wrap

【解决方案1】：

它是WP7 wrap text around image 和Silverlight text around an image 的副本，尽管这些问题也没有得到公认的答案。 Silverlight 中没有这样的选项可以在图像周围自动换行。您可以使用 WebBrowser 组件或使用多个 TextBlocks，方法是测量文本的大小，同时将单词添加到内存中的 TextBlocks 并检查何时停止并切换到另一个 TextBlock。我也建议阅读有关字体指标的文章 - MSDN - UI Frontiers: Font Metrics in Silverlight, Charles Petzold。

编辑：硬编码示例：

您可以使用以下代码以硬编码的方式执行您所要求的操作。也许您可以编写一些代码，使其作为控件工作 - 通过检测 Rectangle（或 Image）旁边的嵌套 TextBlock 的高度来自动拆分文本。

<RichTextBox
    VerticalAlignment="Top"
    >
    <Paragraph
        TextAlignment="Left">
        <InlineUIContainer>
            <InlineUIContainer.Child>
                <Rectangle
                    Width="50"
                    Height="50"
                    Fill="Red" />
            </InlineUIContainer.Child>
        </InlineUIContainer>
        <InlineUIContainer>
            <Border>
                <TextBlock
                    Padding="0"
                    Width="370"
                    Margin="0,0,0,-5"
                    TextWrapping="Wrap"
                    Text="First part of text that fits to the right of the image before the other part wraps to">
                </TextBlock>
            </Border>
        </InlineUIContainer>
        <Run
            Text="the next line. This part of the text is already below the image." />
    </Paragraph>
</RichTextBox>

【讨论】：