WP7 wraping text around image

问题:

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.

回答1:

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>