Wrapping text around an image in Xamarin.Forms

Question

Hi is it possible to wrap text around an image in Xamarin.Forms?

Currently I have this:

And this is my code:

    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition />
            <ColumnDefinition />
            <ColumnDefinition />
            <ColumnDefinition />
        </Grid.ColumnDefinitions>

        <Grid.RowDefinitions>
            <RowDefinition />
            <RowDefinition />
            <RowDefinition />
            <RowDefinition />
        </Grid.RowDefinitions>

        <Label Grid.Column="0" Grid.ColumnSpan="4" Grid.Row="0" Text="Testing a thing..." HorizontalOptions="Center" VerticalOptions="CenterAndExpand" TextColor="White" FontSize="30"/>

        <Label Grid.Column="0" Grid.ColumnSpan="4" Grid.Row="1" Grid.RowSpan="3" HorizontalOptions="Center" VerticalOptions="CenterAndExpand" FontSize="20" Margin="20" TextColor="Black" StyleClass="textwrap" Text="Bacon ipsum dolor amet dolor meatloaf consectetur, excepteur rump aute salami shoulder pancetta strip steak shankle bresaola buffalo voluptate ullamco. Esse minim pork chop, mollit exercitation culpa tail eu. Sunt jerky pancetta ullamco exercitation. Aliqua sausage brisket leberkas. Shoulder meatloaf aute sunt irure laborum. Tempor mollit brisket pork chop swine cillum sirloin nostrud shank aliqua beef pastrami. Cupidatat in lorem, ut brisket do sint shankle capicola qui short loin spare ribs in tongue esse.Pariatur in sausage shankle ham. Pork belly nostrud ad alcatra voluptate prosciutto. Proident pig irure nulla in bresaola consectetur. Est deserunt shank sausage, kevin aliquip sunt short loin quis ipsum. Chicken ea salami fatback enim, turducken ut tempor magna. Incididunt lorem ut tail shoulder jerky ut. Leberkas tongue eiusmod, do occaecat pastrami t-bone turducken nostrud ullamco swine fatback ball tip.Pancetta velit esse dolore consectetur qui magna brisket culpa ut. Exercitation tempor pork loin beef ribeye ex chuck elit. Prosciutto biltong consequat bresaola kielbasa, non corned beef cow incididunt short loin doner proident in ullamco drumstick. Capicola laborum turkey flank occaecat, pork belly eiusmod brisket. Swine sunt pig turkey quis ribeye prosciutto shoulder veniam exercitation in proident frankfurter. Ut commodo venison, meatloaf nisi pancetta sausage proident lorem doner ut ad chicken occaecat mollit. Pork belly kielbasa reprehenderit nostrud, kevin in venison."/>

          <Image Source="200.jpg" Grid.Column="2" Grid.Row="2" Grid.RowSpan="2" Grid.ColumnSpan="2" />

    </Grid>

I am experimenting with stylesheets in Xamarin forms, but I am open to any implementation. At the moment the image is on top of the text, but when I used StackLayout which I read about in other posts and questions, the wrapping didn't work for me. I just had them side by side.

I would be happy with something like this:

Auto detect how much text can fit in the in the first 2 rows and 4 columns and then split the string to put the rest over 2 rows and 2 columns. I know I could split the data into multiple variables, but then I can't hard code that and keep the different screen sizes to make flow look natural.

Any ideas are appreciated.

Yeah I forgot to mention that, but if I use HTML wouldn't that decrease performance and have web look of pulling down a page? Or can give that more native feel - also how would I have a button on there that could link to multiple pages? — jwknz, Aug 06 '19 at 20:03
Perf - it depends. Look - not necessarily. You'd be surprised at the number of apps that use embedded webviews. Button - either place it outside the webview, or render it in HTML and intercept the navigation event. — Jason, Aug 06 '19 at 20:07
ok fair enough - but by simply using native xaml this is not possible? — jwknz, Aug 06 '19 at 20:13
Android : https://stackoverflow.com/questions/2248759/how-to-layout-text-to-flow-around-an-image iOS : https://stackoverflow.com/questions/28082055/how-could-you-make-a-uilabel-wrap-around-an-image-like-shown You will have to create custom control for that to use in Forms. — N Subedi, Aug 06 '19 at 20:49
Using a webview ? definitely not a good advise IMHO ! Avoid them as much as you can. — Umar3x, Aug 06 '19 at 22:29
@jwknz I have did similar rendering in Winforms (using System.Drawing) Not sure about xamarin.forms. I take calculation of the text's W H (that I want to morph) and did render the text and image using some math's calculation. I can't confirm that thing will run smoothly in xamarin.forms but this might be possible. — Anirudha Gupta, Aug 07 '19 at 03:52
Check FlexLayout https://learn.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/layouts/flex-layout — G.Mich, Aug 07 '19 at 12:12

Wrapping text around an image in Xamarin.Forms

0 Answers0