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 binded 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:
Output Snapshot

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 minimum or maximum length of it.
4. The data is dynamic which will be binded at runtime, used static data here just for simplicity.
5. Want to have equal width of every stack in every row, height must change according to data requirements.

Answers

Sign In or Register to comment.