How to "float" an image in XAML (Windows 8 Metro)

Question

Is it possible to do something like ffloat in XAML: left for the image in CSS. I need to create something like this:

with variable image sizes and text length.

Change The text warp around the image is not static in my case, it is created in C # code that returns a list of TextBlock elements (using Runs)

Answer 1

The solution seems to use the RichTextBlockOverflow and OverflowContentTarget described in this presentation: http://video.ch9.ms/build/2011/slides/APP-914T_Street.pptx

Answer 2

With Silverlight 4, you will achieve this using RichTextBox :

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

It seems that Win8 Metro has a RichTextBox , as well as an InlineUIContainer , something like the above should work!

Answer 3

This question seems to require something similar to what you want. The answer here is to prove what you want.

Answer summary: use a FlowDocument , as in the following example:

 <FlowDocument> <Paragraph> <Floater HorizontalAlignment="Left"> <BlockUIContainer> <Image Source="/FlowDocumentTest;component/dog.png" Width="100" /> </BlockUIContainer> </Floater> Here is where the text goes to wrap around the image. </Paragraph> </FlowDocument> 

Update

As your question says, you are now using C # code to generate TextBlock / Run Elements, both can be children of a Paragraph object. So just name your Paragraph like this:

 <FlowDocument> <Paragraph x:Name="textPara"> <Floater HorizontalAlignment="Left"> <BlockUIContainer> <Image Source="/FlowDocumentTest;component/dog.png" Width="100" /> </BlockUIContainer> </Floater> </Paragraph> </FlowDocument> 

Then in C # add your generated TextBlock or Run to the Inlines textPara property, i.e.

 var runToInsert = new Run("Some text to display"); textPara.Inlines.InsertAfter(textPara.Inlines.FirstInline, runToInsert);