Xamarin формы ListView DataTemplate Метка вырезания текста

Question

У меня проблема с обрезкой этикеток в xamarin.forms 4.0. В моем списке просмотра используется шаблон данных и привязка данных из модели представления. Если я делаю текст, динамически изменяющий объект модели, текст сокращается. Тот же код работал до обновления до xamrin.forms 4.0

Пробовал разные значения HorizontalOption, измененные макеты, такие как сетка и стек, но не повезло.

На приведенном ниже рисунке ярлык% выполнено разрезает несколько элементов с эллипсами в конце.

Пример кода можно найти здесь DataTemplateTest

Код Xaml:

<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");
         }
     }
 }

Answer 1

1.Снимите внешнюю StackLayout метки.

2.Удалить HorizontalOptions="EndAndExpand". Не уверен, почему это создает проблему в последней версии Xamarin.Forms 4.0. Но в вашем случае это не обязательно.

Итак, ваш ярлык должен выглядеть так:

<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"/>

Answer 2

Я думаю, что край макета внешнего стека вызывает проблему усечения динамического текста. Его горизонтальная опция должна быть FillAndExpand, и вместо маржи вы должны установить для нее отступы. Кроме того, поскольку это единственный дочерний элемент (полная метка процента), вместо него следует использовать ContentView.

Попробуйте -

1. Удалить внешний макет стека метки

2. Использовать только метку без параметров выравнивания текста

   <Label Text="{Binding CompletionPercentage, Converter={StaticResource PercentageToText}}" FontSize="Micro" TextColor="Black" HorizontalOptions="EndAndExpand" VerticalOptions="Center"/>

Answer 3

Пожалуйста, удалите этот код: LineBreakMode = "TailTruncation"