Xamarin forms ListView DataTemplate Label 文本切割

Question

我在 xamarin.forms 4.0 中面临 label 切割问题。 在我的列表视图中，使用数据模板和来自视图 model 的绑定数据。 如果我将文本动态更改为 model object，则 lebel 文本正在剪切。 在升级到 xamrin.forms 4.0 之前，相同的代码正在运行

尝试了不同的 HorizontalOption 值，更改了网格和堆栈等布局，但没有运气。

在下图中，完成百分比 label 正在切割最后带有椭圆的少数项目。

示例代码可以在这里找到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标签的外部StackLayout 。

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

请删除此代码：LineBreakMode =“ TailTruncation”

Answer 3

我认为外部堆栈布局的边距导致了动态文本被截断的问题。 它的水平选项应为FillAndExpand，而不应设置边距，而应在其上设置填充。 另外，由于它是一个孩子（完整的百分比标签），因此您应该使用ContentView。

尝试-

1. 移除标签的外层堆叠布局

2. 仅使用不带文本对齐选项的标签

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

Answer 4

在包含 label 的列表视图中，给它 MinimumWidthRequest="300" 或相应的宽度。 我有同样的问题，这就是我解决它的方法。 列表视图没有扩展以适应。