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" 或相應的寬度。 我有同樣的問題，這就是我解決它的方法。 列表視圖沒有擴展以適應。