CODEWITHSUNDEEP
xamlxamarinxamarin.forms
Anjesh Aggarwal
Anjesh Aggarwal

Reputation: 53

How to wrap Label in FlexLayout

I am working with Xamarin Cross-platform, my primary target platform is UWP and secondary iOS. I am trying to use FlexLayout within a ListView which may contain long label texts which I want to wrap within the FlexLayout Basis defined.

Here is the code I have written so far: I am using static data for simplicity, real data will be bonded dynamically.

<ListView.ItemTemplate>
   <FlexLayout Direction="Row" Wrap="Wrap" Margin="0,10,0,10">
                    <StackLayout Orientation="Horizontal" FlexLayout.Basis="300">
                        <Label Text="1. Label header"/>
                        <Label Text="Label Value"></Label>
                    </StackLayout>
                    <StackLayout Orientation="Horizontal" FlexLayout.Basis="300">
                        <Label Text="2. Label header"/>
                        <Label Text="Label Value"></Label>
                    </StackLayout>
                    <StackLayout Orientation="Horizontal" FlexLayout.Basis="300">
                        <Label Text="3.A long Label header"/>
                        <Label Text="Label Value"></Label>
                    </StackLayout>
                    <StackLayout Orientation="Horizontal" FlexLayout.Basis="300">
                        <Label Text="4.A very loooooong Label header with long value"/>
                        <Label Text="A long Label Value"></Label>
                    </StackLayout>
                    <StackLayout Orientation="Horizontal" FlexLayout.Basis="300">
                        <Label Text="5. Label header"/>
                        <Label Text="Label Value"></Label>
                    </StackLayout>
                    <StackLayout Orientation="Horizontal" FlexLayout.Basis="300">
                        <Label Text="6. Label header"/>
                        <Label Text="Label Value"></Label>
                    </StackLayout>
                    <StackLayout Orientation="Horizontal" FlexLayout.Basis="300">
                        <Label Text="7. Label header"/>
                        <Label Text="Label Value"></Label>
                    </StackLayout>
                    <StackLayout Orientation="Horizontal" FlexLayout.Basis="300">
                        <Label Text="8. Label header"/>
                        <Label Text="Label Value"></Label>
                    </StackLayout>
                    <StackLayout Orientation="Horizontal" FlexLayout.Basis="300">
                        <Label Text="9. Label header"/>
                        <Label Text="Label Value"></Label>
                    </StackLayout>
                    <StackLayout Orientation="Horizontal" FlexLayout.Basis="300">
                        <Label Text="10. Label header"/>
                        <Label Text="Label Value"></Label>
                    </StackLayout>
                </FlexLayout>

            </ViewCell>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

This produces the following output: Sample output

We can see that data of fourth stack (4.A very loooooong Label header with long value) is truncated.

But I want my output to be something like this: Desired Output

Things to remember here are:

  1. I want to make maximum use of the space.
  2. I don't prefer to use Wrap Layout.
  3. The data can be of any length and I cannot define a minimum or maximum length of it.
  4. The data is dynamic which will be bound at runtime, used static data here just for simplicity.
  5. Want to have an equal width of every stack in every row, height must change according to data requirements.

Upvotes: 2

Views: 1894

Answers (1)

FreakyAli
FreakyAli

Reputation: 16459

I want to make maximum use of the space.

In my understanding, you are utilizing the max space available.

I don't prefer to use Wrap Layout.

Never heard of a wrap layout in xamarin forms but here if you mean you don't want to use LineBreakMode, then that is the only way possible for achieving your requirement.

The data can be of any length and I cannot define a minimum or maximum length of it.

That does not matter much the problem is not with the flex layout but the label setting the labels LineBreakMode property will do the trick

Where ever you feel that the text will be too long add something like this:

  <Label ..... LineBreakMode="WordWrap"/>

The data is dynamic which will be bound at runtime, used static data here just for simplicity.

That changes nothing until your XAML is well written it will not behave weirdly

Want to have an equal width of every stack in every row, height must change according to data requirements.

In this case, I would suggest you wrap the StackLayout inside a Grid rather than a FlexLayout and then make the RowDefinitions, set to Auto so they fit themselves as per the need.

Upvotes: 1

Related Questions