Xamarin表单ListView数据模板标签文本剪切

cpjpxq1n  于 2022-12-07  发布在  其他
关注(0)|答案(4)|浏览(132)

我在xamarin.forms 4.0中面临标签剪切问题。在我的listview中使用数据模板并绑定视图模型中的数据。如果我对模型对象进行文本动态更改,则会剪切标签文本。在升级到xamarin.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.View>


<Grid.RowDefinitions>





</Grid.RowDefinitions>



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

ViewModel:

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

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

}

3wabscal

3wabscal1#

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

6rvt4ljy

6rvt4ljy2#

请删除此代码:LineBreakMode=“尾部截断”

iugsix8n

iugsix8n3#

我认为外部堆栈布局的边距导致了动态文本的截断问题。它的水平选项应该是FillAndExpand,而不是边距,你应该在它上面设置填充。另外,因为它是一个单独的子项(完整的百分比标签),你应该使用ContentView来代替。
试试看
1.删除标签的外部堆栈布局
1.仅使用不带文本对齐选项的标签
<Label Text="{Binding CompletionPercentage, Converter={StaticResource PercentageToText}}" FontSize="Micro" TextColor="Black" HorizontalOptions="EndAndExpand" VerticalOptions="Center"/>

sgtfey8w

sgtfey8w4#

在包含标签的列表视图中给予它MinimumWidthRequest=“300”或一个相应的宽度。我遇到了同样的问题,这就是我解决它的方法。列表视图没有扩展以适应。

相关问题