Multiline text in a ListView (text cut off at the end)

SebastianKruseSebastianKruse USMember ✭✭✭
edited April 18 in Xamarin.Forms

I've see this topic a few times but right now when I need it, I can't find it... I have a problem with a few ListView's in my app. The ListViews are displaying content from a database and from a webservice. The content of the ListView can be very large and sometimes, the text is cut off...

This is my ListView so far:

<ListView Grid.Row="1" x:Name="DataListView" ItemsSource="{Binding GroupData}" GroupShortNameBinding="{Binding ShortCategory}" CachingStrategy="RecycleElement" 
            IsGroupingEnabled="True" HasUnevenRows="True" BackgroundColor="#b99f65" SeparatorColor="#55492e" ItemTapped="ListView_OnItemTapped" Margin="0,3,0,0">
    <ListView.GroupHeaderTemplate>
        <DataTemplate>
            <ViewCell>
                <Grid BackgroundColor="#120305" Margin="0">
                    <StackLayout Orientation="Horizontal" VerticalOptions="Center" Margin="15,0">
                        <Label Text="{Binding Category}" TextColor="#b99f65" FontSize="18" FontAttributes="Bold" />
                        <Label Text="{Binding ShortCategory, StringFormat='({0})'}" FontSize="18" TextColor="#b99f65" />
                    </StackLayout>
                </Grid>
            </ViewCell>
        </DataTemplate>
    </ListView.GroupHeaderTemplate>

    <ListView.ItemTemplate>
        <DataTemplate>
            <ViewCell>
                <StackLayout Orientation="Vertical" Margin="10,5" VerticalOptions="Fill">
                    <Label Text="{Binding Name}" FontSize="14" FontAttributes="Bold" Margin="0" />

                    <Label Text="{Binding Effect}" FontSize="11" LineBreakMode="WordWrap" Margin="0" />
                    <Label Text="{Binding Ingredients, StringFormat='Ingredients: {0}'}" FontSize="11" LineBreakMode="WordWrap" Margin="0,3,0,0" SizeChanged="OnLabelSizeChanged" />
                </StackLayout>
            </ViewCell>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

Here, the Ingredients are cut off in iOS on some device sizes. I have implemented a SizeChanged-Event for the last Label to see if the size is set correctly, and it is. This is the output:

[0:] LABEL HEIGHT CHANGED:: 26.5
[0:] LABEL HEIGHT CHANGED:: 26.5
[0:] LABEL HEIGHT CHANGED:: 13.5
[0:] LABEL HEIGHT CHANGED:: 13.5
[0:] LABEL HEIGHT CHANGED:: 26.5
[0:] LABEL HEIGHT CHANGED:: 13.5
[0:] LABEL HEIGHT CHANGED:: 26.5
[0:] LABEL HEIGHT CHANGED:: 13.5
[0:] LABEL HEIGHT CHANGED:: 26.5
[0:] LABEL HEIGHT CHANGED:: 13.5

Any of the "26.5" height labels are cut off in half. Because this only happens on iOS it must be a problem there. Can someone help me out to fix this? I have the same issue on other places of my App too and haven't found a working solution yet... I know I can set the RowHeight to the max possible value but for this I need to know how many times the text will be wraped and it is not a nice solution... I would like to use the dynamic sizing...

Answers

  • SebastianKruseSebastianKruse USMember ✭✭✭
    edited April 18

    As a workaround I currently use this on the last Label in iOS, but it takes a huge amount of performance and looks very bad...

    private void OnLabelSizeChanged(object sender, EventArgs e)
    {
        var stackLayout = (sender as Label)?.Parent as StackLayout;
        if (stackLayout != null)
        {
            var childrenHeight = stackLayout.Children.Sum(c => c.Height) + stackLayout.Children.Count * stackLayout.Spacing;
            stackLayout.HeightRequest = childrenHeight;
    
            var viewCell = stackLayout.Parent as ViewCell;
            viewCell?.ForceUpdateSize();
        }
    }
    

    And beside of the performance lost it also makes the app looks wrong if the device orientation changes.

  • HarbHarb USMember ✭✭
    edited April 18

    -

  • SebastianKruseSebastianKruse USMember ✭✭✭

    Nobody with a solution for this kind of problem?

  • OOIIpsOOIIps UAMember ✭✭

    I have the issue, but I don't now to repair it.(

  • DeviPrasadChinniDeviPrasadChinni USMember ✭✭

    change grid inside listview to,

    <ViewCell>
    <Grid VerticalOptions="EndAndExpand" HorizontalOptions="FillAndExpand" BackgroundColor="#120305" Margin="0">

    It will work.

  • SebastianKruseSebastianKruse USMember ✭✭✭

    @DeviPrasadChinni said:
    change grid inside listview to,

    <ViewCell>
    <Grid VerticalOptions="EndAndExpand" HorizontalOptions="FillAndExpand" BackgroundColor="#120305" Margin="0">

    It will work.

    No it didn't work... the Grid in the header is not the problem and if I replace the StackLayout for the content of each cell it didn't work either...

  • SebastianKruseSebastianKruse USMember ✭✭✭

    Bump... still the problem... no one with a solution?

  • SebastianKruseSebastianKruse USMember ✭✭✭

    Thats a nice post @josemmortega but not what I needed for my list. :/

  • jason.of.tjason.of.t AUMember

    I am having the same problem. Adding a new line to the end of the text works for some of the items.

  • Patil2421Patil2421 USMember ✭✭✭

    @SebastianKruse : Can you just send a screenshot of your listview

  • NavidNavidNavidNavid USMember ✭✭

    put your Label into StackLayout!

  • SebastianKruseSebastianKruse USMember ✭✭✭

    @NavidNavid said:
    put your Label into StackLayout!

    Maybe you should read the code before answering? It is already in a StackLayout... Also I found a "workaround" it seems to work if I use Pedding instead of Margin and if the content is loaded with a delay of a few milliseconds after the list has a initial empty rendering.

  • JohnHardmanJohnHardman GBUniversity ✭✭✭✭✭

    I suspect @NavidNavid was suggesting using a StackLayout instead of a ListView. That would work, but does not support virtualisation, so performance degrades badly as the number of items in the StackLayout grows. ListView is preferable for anything other than tiny amounts of data, but hits the known problem of cell sizing on iOS (Android and UWP work as expected).

  • diego_leaodiego_leao USMember

    @JohnHardman said:
    I suspect @NavidNavid was suggesting using a StackLayout instead of a ListView. That would work, but does not support virtualisation, so performance degrades badly as the number of items in the StackLayout grows. ListView is preferable for anything other than tiny amounts of data, but hits the known problem of cell sizing on iOS (Android and UWP work as expected).

    Someone should really do something about this. I'm having the same problem (Listview cuts off at the end/top on iOS), and it seems very old. Every app needs lists, and most will have more than texts... It is very worrying to see an issue like this in stable builds of a technology.

  • SebastianKruseSebastianKruse USMember ✭✭✭

    @diego_leao said:

    @JohnHardman said:
    I suspect @NavidNavid was suggesting using a StackLayout instead of a ListView. That would work, but does not support virtualisation, so performance degrades badly as the number of items in the StackLayout grows. ListView is preferable for anything other than tiny amounts of data, but hits the known problem of cell sizing on iOS (Android and UWP work as expected).

    Someone should really do something about this. I'm having the same problem (Listview cuts off at the end/top on iOS), and it seems very old. Every app needs lists, and most will have more than texts... It is very worrying to see an issue like this in stable builds of a technology.

    Sometimes you can avoid it by using Padding instead of Margin. Works in 4/5 cases for me at least...

  • BrianKillenBrianKillen USMember ✭✭
    edited October 22

    i fixed this by putting my label directly in a stack layout.

    Note: Row spacing on the rows that were exhibiting the problem are now incorrectly calculated.

    Picture of initial problem...

    Picture of wrapping label with stack layout...

    picture of setting row spacing to 0...

Sign In or Register to comment.