Listview Xamarin表单列表视图数据模板标签文本剪切
我在xamarin.forms 4.0中面临标签切割问题。在我的listview中，使用数据模板和视图模型中的绑定数据。如果对模型对象动态更改文本，则lebel文本将被剪切。在升级到xamrin.forms 4.0之前，同样的代码也在工作 尝试了不同的水平选项值，更改了网格和堆栈等布局，但没有成功 在下图中，已完成百分比标签在少数项目上切割，末尾带有椭圆 示例代码可以在这里找到 Xaml代码：Listview Xamarin表单列表视图数据模板标签文本剪切,listview,xamarin,xamarin.forms,itemtemplate,Listview,Xamarin,Xamarin.forms,Itemtemplate,我在xamarin.forms 4.0中面临标签切割问题。在我的listview中，使用数据模板和视图模型中的绑定数据。如果对模型对象动态更改文本，则lebel文本将被剪切。在升级到xamrin.forms 4.0之前，同样的代码也在工作 尝试了不同的水平选项值，更改了网格和堆栈等布局，但没有成功 在下图中，已完成百分比标签在少数项目上切割，末尾带有椭圆 示例代码可以在这里找到 Xaml代码： <StackLayout> <ListView HasUnevenRows="T
<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");
}
}
}
```
CourseViewCell：
视图模型：
公共类MainViewModel:BaseModel
{
公共主视图模型（）
{
ObservableCollection courseList=新的ObservableCollection（）；
对于（int i=0；i<100；i++）
{
课程=新课程（）
{
CourseName=“Course”+i，
CategoryName=“类别”+i，
完成百分比=i，
课程图像=”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"
};
课程列表。添加（课程）；
}
本课程=课程列表；
}
私人收藏课程；
公开课
{
get=>this.courses；
设置
{
这就是价值；
本.提高产权变更（“课程”）；
}
}
}
LineBreakMode=“TailTruncation”我认为外部堆栈布局的边距导致了动态文本的截断问题。它的水平选项应该是FillAndExpand，而不是margin，你应该在上面设置padding。此外，由于它是一个子项（完整的百分比标签），因此您应该使用ContentView 试一试-
我认为外部堆栈布局的边距导致了动态文本的截断问题。它的水平选项应该是FillAndExpand，而不是margin，你应该在上面设置padding。此外，由于它是一个子项（完整的百分比标签），因此您应该使用ContentView 试一试-
1.移除标签的外部
堆叠布局
2.删除horizontalpoptions=“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"/>
1.移除标签的外部堆叠布局
2.删除horizontalpoptions=“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"/>
如果它在4.0之前的Xamarin.Forms上运行，那么它很可能是一个bug，请提交给他们的Github您需要增加标签的宽度以适应更大的文本长度尝试使用ColumnDefinition并设置宽度propertythere@IvanI谢谢你。是的，在这里提交了一个bug@Jason，是的，如果我给标签固定宽度，它工作正常，但我希望标签的宽度根据文本动态变化。我需要在文本的开头显示一个勾号图像，以防100%完成。如果它在Xamarin.Forms 4.0之前的版本中工作，则可能是一个错误，请提交给他们的Github。您需要增加标签的宽度以适应更大的文本长度尝试使用ColumnDefinition并设置宽度propertythere@IvanI谢谢你。是的，在这里提交了一个bug@Jason，是的，如果我给标签固定宽度，它工作正常，但我希望标签的宽度根据文本动态变化。如果100%完成，我需要在文本的开头显示一个勾号图像。如果删除LineBreakMode，则标签中的第二个单词在向下滚动时不可见。i、 e仅显示百分比值（2%、3%等）。如果删除LineBreakMode，则标签中的第二个字在向下滚动时对于少数项目不可见。i、 e仅显示百分比值（2%、3%等）。已尝试删除外部堆栈布局并删除对齐选项，如同一问题，而不是在视图中更改。已尝试删除外部堆栈布局并删除对齐选项，如同一问题，而不是在视图中更改。太棒了！它在没有堆栈布局的情况下工作，但我需要堆栈布局在100%位置显示记号标记图像（在100%完成的情况下，设计将是记号标记和文本“已完成”）。所以，它不仅仅是一个标签，而是堆栈布局中的图像和标签。太棒了！它在没有堆栈布局的情况下工作，但我需要堆栈布局在100%位置显示记号标记图像（在100%完成的情况下，设计将是记号标记和文本“已完成”）。所以，它不仅仅是一个标签，而是堆栈布局中的图像和标签。