WP7在图像周围包装文本

时间:2011-12-07 09:45:18

标签: image windows-phone-7 windows-phone-7.1 textwrapping

我有这段代码:

<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并且有答案它只是与图像和文本块有关。这样对吗?我真的不能在图像中设置一些属性,设置文本不能在图像上?我该如何更改代码? 感谢

编辑:现在这就是我的页面:

image is background

我希望文本应位于图像的右侧和图像的下方。

1 个答案:

答案 0 :(得分:0)

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

编辑:硬编码样本:

您可以使用以下代码以硬编码的方式执行您的要求。也许你可以编写一些代码来使它作为一个控件 - 通过检测矩形(或图像)旁边嵌套的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>