Question

我在xamarin.forms 4.0中面临标签切割问题。在我的列表视图中，使用数据模板并从视图模型绑定数据。如果我将文本动态更改为模型对象，则将删除lebel文本。升级到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

请删除以下代码： LineBreakMode =“ TailTruncation”

Answer 3

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

尝试-

删除标签的外部堆栈布局
仅使用不带文本对齐选项的标签

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

Xamarin表单ListView DataTemplate标签文本切割

3 个答案: