Windows 8 Store App: Wrap Text Around Image

This article shows how to show text that can be wrapped around an image in XAML.


                                       Figure A

In the preceding screen shot, we can see the news headline of the Microsoft Bing News app. Both of the news has an image and news title because the title cannot be accomodated in the first three rows due to its length, the reason being the Text has been wrapped with the images that is shown above.

If the text is not wrapped around the image, it still looks good but not the best.


                                 Figure B

The problem is if the title of the news is too long then without wrapping there is a lot of white space left that cannot be used as shown in Figure C.


                                          Figure C

To achive this in XAML we will use the "RichTextBlock" to show text and "RichTextBlockOverflow". The only purpose of RichTextBlockOverflow is to display text content that does not fit in the bounds of a RichTextBlock or another RichTextBlockOverflow element.

I used two Grids, a parent and a child Grid. The parent grid contains 2 rows and 1 column.

Parent Grid


                                                      Figure D

<Grid Margin="5" >
     <Grid.ColumnDefinitions>
            <ColumnDefinition Width="330"/>
     </Grid.ColumnDefinitions>
     <Grid.RowDefinitions>
              <RowDefinition Height="auto"/>
              <RowDefinition Height="auto"/>
              <RowDefinition Height="auto"/>
      </Grid.RowDefinitions>
</Grid>

                                                               Figure E

Child Grid


                                                         Figure F

The child Grid will contain 1 row and 2 columns. The first column will contain the image and the second column will contain the News Title.


                                                         Figure G

<Grid Grid.Row="0" Grid.Column="0">
            <Grid.RowDefinitions>
                  <RowDefinition Height="80"/>
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                  <ColumnDefinition Width="90"/>
                  <ColumnDefinition Width="240"/>
            </Grid.ColumnDefinitions>
</Grid>

Now put the child Grid inside the first row of the parent grid.


                                                   Figure H


                                                      Figure I

Use the following XAML to put the child grid inside the parent grid:

<Grid Margin="5" >
     <Grid.ColumnDefinitions>
            <ColumnDefinition Width="330"/>
     </Grid.ColumnDefinitions>
     <Grid.RowDefinitions>
              <RowDefinition Height="auto"/>
              <RowDefinition Height="auto"/>
              <RowDefinition Height="auto"/>
      </Grid.RowDefinitions>
      <Grid Grid.Row="0" Grid.Column="0">
            <Grid.RowDefinitions>
                  <RowDefinition Height="80"/>
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                  <ColumnDefinition Width="90"/>
                  <ColumnDefinition Width="240"/>
            </Grid.ColumnDefinitions>
      </Grid>
</Grid>

Now here is the complete XAML code to design the preceding News templete in which the text is wrapping around the image.

<Grid Margin="5" >
     <Grid.ColumnDefinitions>
            <ColumnDefinition Width="330"/>
     </Grid.ColumnDefinitions>
     <Grid.RowDefinitions>
              <RowDefinition Height="auto"/>
              <RowDefinition Height="auto"/>
              <RowDefinition Height="auto"/>
      </Grid.RowDefinitions>
      <Grid Grid.Row="0" Grid.Column="0">
            <Grid.RowDefinitions>
                  <RowDefinition Height="80"/>
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                  <ColumnDefinition Width="90"/>
                  <ColumnDefinition Width="240"/>
            </Grid.ColumnDefinitions>
       <Image Source="{Binding ImageUrl}" Height="70" Width="70" Grid.Column="0" Grid.Row="0" VerticalAlignment="Top" HorizontalAlignment="Left"/>
<RichTextBlock Grid.Column="1" Grid.Row="0" IsTextSelectionEnabled="False" VerticalAlignment="Top" HorizontalAlignment="Left"                    OverflowContentTarget="{Binding ElementName=firstOverflowContainer}" FontFamily="Segoe UI Bold" FontSize="20" TextTrimming="WordEllipsis" TextWrapping="WrapWholeWords">
 <Paragraph>
   <Run Text="{Binding Title}"  ></Run>
 </Paragraph>
</RichTextBlock>
 </Grid>
<RichTextBlockOverflow x:Name="firstOverflowContainer" Grid.Column="0" Grid.Row="1" />
<StackPanel Orientation="Horizontal" Margin="-10,0,0,0" Grid.Column="0" Grid.Row="2">
  <TextBlock Text="{Binding PostedBy}"  FontSize="11"                   Margin="10,2,0,0" Width="auto" Height="42"                 TextTrimming="WordEllipsis" TextWrapping="Wrap"                        HorizontalAlignment="Left" FontWeight="Bold"/>
<TextBlock Text="{Binding CreatedDate}"  Margin="5,2,0,0"  FontSize="11" Width="auto" Height="42"     Foreground="Black"                       TextTrimming="WordEllipsis" HorizontalAlignment="Right" TextWrapping="Wrap" Opacity="0.49" />
</StackPanel>
</Grid>

Thanks

Cheers!!