WP7围绕图像包装文本 [英] WP7 wraping text around image

问题描述

我有这段代码：

 < ScrollViewer x：Name =textScrollerGrid.Row =2> ; 
< Grid x：Name =ContentPanelMargin =12,0,12,0DataContext ={Binding}> 
< Image x：Name =ImageUrlSource ={Binding ImageUrl}Height =198Width =150Margin =10 10 10 10FlowDirection =RightToLeftHorizo​​ntalAlignment =Left VerticalAlignment =Top/> 
< TextBlock x：Name =ContentText ={Binding Content}TextWrapping =WrapStyle ={StaticResource PhoneTextNormalStyle}Margin =0,41,24，-41LineStackingStrategy = BlockLineHeightMaxWidth =478/> 
< / Grid> 
< / ScrollViewer> 
  

此代码中的图像是该文本块的背景，但我希望该文本环绕imgae。它可以吗？我发现这个和围绕图像的Silverlight文本，尽管这些问题还没有得到公认的答案。 Silverlight中没有这样的选项来自动包装图像周围的文本。您可以使用WebBrowser组件或通过测量文本的大小来使用多个TextBlock，同时向内存中的TextBlocks添加单词并检查何时停止并切换到另一个TextBlock。我建议也阅读一篇关于字体指标的文章 - MSDN - UI Frontiers：Font Silverlight中的指标，Charles Petzold 。

编辑：硬编码样本：

你可以使用下面的代码以硬编码方式执行您的要求。也许你可以编写一些代码来使它作为一个控件 - 通过检测矩形（或图像）旁边的嵌套TextBlock的高度自动拆分文本。

 < RichTextBox 
 VerticalAlignment =Top
> 
<段落
 TextAlignment =左> 
< InlineUIContainer> 
< InlineUIContainer.Child> 
<矩形
宽度=50
高度=50
填充=红色/> 
< /InlineUIContainer.Child> 
< / InlineUIContainer> 
< InlineUIContainer> 
< Border> 
< TextBlock 
 Padding =0
 Width =370
 Margin =0,0,0，-5
 TextWrapping =Wrap 
 Text =在另一部分换行之前适合图像右侧的文本的第一部分> 
< / TextBlock> 
< / Border> 
< / InlineUIContainer> 
< Run 
 Text =下一行。文本的这一部分已经在图像下方了。 /> 
< /段落> 
< / RichTextBox> 
  

I have this code:

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

Image in this code is background of that textblock but I want that text wrap around the imgae. Is it posible? I found this similar question and there is answer it isn´t posible just with image and textblock. Is it right? I really can´t set some attribute in image that set that text can´t be on image? How should I change my code? Thanks

Edit: Now this is what my page looks like:

I want that text should be on the right side of the image and the below of the image.

解决方案

It is a duplicate of WP7 wrap text around image and Silverlight text around an image, though these questions did not come up with accepted answers yet either. There is no such option in Silverlight to do automatic wrapping of text around images. You can use a WebBrowser component or use multiple TextBlocks by measuring the size of the text while adding words to the TextBlocks in memory and checking when to stop and switch to another TextBlock. I recommend reading an article on font metrics for that too - MSDN - UI Frontiers: Font Metrics in Silverlight, Charles Petzold.

EDIT: Hard-coded sample:

You can use the below code to do what you ask in a hard-coded fashion. Perhaps you could write some code that would make it work as a control - automatically splitting the text by detecting the height of the nested TextBlock that is next to the Rectangle (or Image).

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

这篇关于WP7围绕图像包装文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！