CODEWITHSUNDEEP
xamlmaui
John Kim
John Kim

Reputation: 11

MAUI mix Label (Text) and Image - Image aligning like text

I was trying to mix text and image in MAUI.

In HTML, you can just make like

Hello World! <img src="dotnet_bot.png"> Not working world

Then it aligns automatically. I was hoping to do same in MAUI with Label and Image. If you shrink the width, then it automatically goes to the next line.

<Label Text="Hello, World!" />
<Image Source="dotnet_bot.png" HeightRequest="50" />
<Label Text="Not working world" />

I guess I need to use some layout to do this but currently stuck. I tried several Layout but didn't work.

Tried some layout and the first Label goes to next line with the last label as well. Tried this and that but not successful at this point. Is there a way?

(Tried WebView but doesn't seems to be that useable on my case)

Appreciate for the help!

This is a wanted screen

This is how it looks. First Label wraps.

Maybe I'm not good at explaining. First Label must not wrap nor be hidden from screen size change. So NoWrap on Label won't work since it will be hidden if I shrink.

Upvotes: 1

Views: 3598

Answers (2)

Alexandar May - MSFT
Alexandar May - MSFT

Reputation: 10156

As Steve hinted, you should use FlexLayout as FlexLayout is a layout that can arrange its children horizontally and vertically in a stack, and can also wrap its children if there are too many to fit in a single row or column. In addition, FlexLayout can control orientation and alignment, and adapt to different screen sizes.

You need to set the Wrap="Wrap"like below which indicates that items are laid out in multiple lines if needed.

Here's the sample code for your reference:

<FlexLayout Wrap="Wrap">

       <Label Text="Hello, World!" 
               FontSize="50"/>
        
       <Image Source="dotnet_bot.png"
               HeightRequest="200"/>

       <Label Text="Not working world"
               FontSize="50"/>

</FlexLayout>

Output:

enter image description here

Upvotes: 1

Edward Yang
Edward Yang

Reputation: 11

If you mean put them (label and image) in a single row, you can use HorizontalStackLayout:

<VerticalStackLayout
            Spacing="25"
            Padding="30,0"
            VerticalOptions="Center">
            <HorizontalStackLayout>
                <Label
                Text="Hello, World!"
                SemanticProperties.HeadingLevel="Level1"
                FontSize="10"
                HorizontalOptions="Center" />
            <Image
                Source="dotnet_bot.png"
                SemanticProperties.Description="Cute dot net bot waving hi to you!"
                HeightRequest="100"
                HorizontalOptions="Center" />

           <Label
                Text="Welcome to .NET Multi-platform App UI"
                SemanticProperties.HeadingLevel="Level2"
                SemanticProperties.Description="Welcome to dot net Multi platform App U I"
                FontSize="10"
                HorizontalOptions="Center" />
            </HorizontalStackLayout>
</VerticalStackLayout>

It will be:

this.

Upvotes: 1

Related Questions