Xamarin forms ListView DataTemplate Label text cutting

Question

I am facing label cutting issue in xamarin.forms 4.0. In my listview using data template and binding data from view model. If I do text changes dynamically to the model object the lebel text is cutting. The same code was working before upgrading to xamrin.forms 4.0

Tried different HorizontalOption values, changed layouts like grid and stack but no luck.

In the below image the % completed label is cutting on few items with ellipses at the end.

Sample code can be found here DataTemplateTest

Xaml Code:

<StackLayout>
 <ListView HasUnevenRows="True" ItemsSource="{Binding Courses}" 
      CachingStrategy="RecycleElementAndDataTemplate">
         <ListView.ItemTemplate>
             <DataTemplate>
                 <local:CourseViewCell></local:CourseViewCell>                    
             </DataTemplate>
         </ListView.ItemTemplate>
     </ListView>
 </StackLayout>
```

CourseViewCell:

<ViewCell xmlns="http://xamarin.com/schemas/2014/forms"
       xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
       x:Class="DataTemplateTest.CourseViewCell">
 <ViewCell.View>
     <Frame  x:Name="CourseFrame"
             CornerRadius="5"
             Padding="0"
             HasShadow="True"
             IsClippedToBounds="True"               
             BackgroundColor="White">
         <Grid RowSpacing="0"
               HorizontalOptions="FillAndExpand">
             <Grid.RowDefinitions>
                 <RowDefinition Height="Auto"></RowDefinition>
                 <RowDefinition Height="Auto"></RowDefinition>
                 <RowDefinition Height="Auto"></RowDefinition>
                 <RowDefinition Height="Auto"></RowDefinition>
                 <RowDefinition Height="Auto"></RowDefinition>
             </Grid.RowDefinitions>
             <StackLayout Grid.Row="0"
                          IsClippedToBounds="True">
                 <Image  x:Name="CourseImage"
                                              Aspect="AspectFill"
                                              HorizontalOptions="Fill"
                                              VerticalOptions="Start"
                                              HeightRequest="171"
                                              Source="{Binding CourseImage}"
                                             ></Image>
             </StackLayout>
             <Label Grid.Row="1"
                    x:Name="CourseName"
                    HorizontalTextAlignment="Start"
                    VerticalTextAlignment="Start"
                    VerticalOptions="StartAndExpand"
                    FontSize="Large"
                    FontAttributes="None"
                    TextColor="Black"
                    HorizontalOptions="Fill"
                    Text="{Binding CourseName}"
                    Margin="15,5,10,0"
                    LineBreakMode="TailTruncation">

             </Label>

             <Label x:Name="CategoryName"
                    Grid.Row="2"
                    Text="{Binding CategoryName}"
                    FontSize="Small"
                    FontAttributes="None"
                    TextColor="Black"
                    HorizontalOptions="Fill"
                    Margin="15,0,10,0"
                    LineBreakMode="TailTruncation" />

             <StackLayout Orientation="Horizontal"
                          Grid.Row="3"
                          HorizontalOptions="Fill"
                          Margin="5,5,10,0">
                 <Label  Text="{Binding CompletionPercentage, Converter={StaticResource PercentageToText}}"
                         FontSize="Micro"
                         FontAttributes="None"
                         TextColor="Black"
                         HorizontalOptions="EndAndExpand"
                         HorizontalTextAlignment="End"
                         VerticalOptions="Center"
                         LineBreakMode="TailTruncation" />
             </StackLayout>

             <StackLayout Grid.Row="4"
                          Margin="0,12,0,0"
                          x:Name="ProgressStack"
                          HeightRequest="8"
                          Spacing="0"
                          Padding="0"
                          VerticalOptions="StartAndExpand"
                          HorizontalOptions="FillAndExpand"
                          IsClippedToBounds="True"
                          BackgroundColor="Black">
             </StackLayout>

         </Grid>
     </Frame>
 </ViewCell.View>
</ViewCell>


ViewModel:

public class MainViewModel : BaseModel
 {
     public MainViewModel()
     {
         ObservableCollection<Course> courseList = new ObservableCollection<Course>();

         for (int i = 0; i < 100; i++)
         {
             Course course = new Course()
             {
                 CourseName = "Course " + i,
                 CategoryName = "category " + i,
                 CompletionPercentage = i,
                 CourseImage = "https://thumbs-prod.si-cdn.com/qXrJJ-l_jMrQbARjnToD0fi-Tsg=/800x600/filters:no_upscale()/https://public-media.si-cdn.com/filer/d6/93/d6939718-4e41-44a8-a8f3-d13648d2bcd0/c3npbx.jpg"
             };

             courseList.Add(course);
         }

         this.Courses = courseList;
     }

     private ObservableCollection<Course> courses;
     public ObservableCollection<Course> Courses
     {
         get => this.courses;
         set
         {
             this.courses = value;
             this.RaisePropertyChanged("Courses");
         }
     }
 }

if it worked on Xamarin.Forms before 4.0 then it is likely a bug, submit to their github — Ivan Ičin
you need to increase the width of the label to accommodate the greater length of the text — Jason
Try using a ColumnDefinition and setting a Width propertythere — Saamer
@IvanIčin Thank you. Yes, filed a bug here github.com/xamarin/Xamarin.Forms/issues/6447 — Narender Reddy
@Jason, Yes, if I give fixed width to label it is working fine but, I want the label's width to be dynamic as per the text. I need to display a tick mark image at the start of the text in case of 100% completion. — Narender Reddy

MilanG MilanG · Accepted Answer · 2019-06-08T08:53:47

1.Remove the outer StackLayout of the Label.

2.Remove the HorizontalOptions="EndAndExpand". Not sure why this is creating the problem in latest Xamarin.Forms 4.0. But in your case, this is not required.

So, your Label should look like this:

<Label Grid.Row="3"
       Margin="5,5,10,0"
       Text="{Binding CompletionPercentage, Converter={StaticResource PercentageToText}}"
       FontSize="Micro"
       FontAttributes="None"
       TextColor="Black"
       HorizontalTextAlignment="End"
       VerticalOptions="Center"/>

Xamarin forms ListView DataTemplate Label text cutting

3 Answers