xamarin - Xamarin 表单的 SeeMore 功能
问题描述
我正在开发一个 xamarin 表单项目。我需要在列表视图中添加一个标签,默认情况下最多显示 2 行,然后显示省略号(...)我还想添加一个阅读更多按钮,使用户能够查看截断的文本。单击按钮时再次需要截断文本。这就像“多看”和“少看”功能。我通过使用 max lines 属性使其显示为 3。请任何人建议我如何实现这一目标。我添加了屏幕截图以供进一步参考。
这是我的 XAML 为标签。
<Label Text="{Binding Note, Mode=TwoWay}" Padding="0,0,0,0" MaxLines="3"
LineBreakMode="TailTruncation" Style="{StaticResource TabContentLabelStyle}"
IsVisible="{Binding IsEdit,Converter={StaticResource BoolConverter}}" />
这是折叠时的外观:
解决方案
根据@anand 所说的内容制作了一个快速示例
创建名为 CustomLabel 的自定义控件
自定义标签.xaml
<ContentView
x:Class="BlankApp3.Controls.CustomLabel"
xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:d="http://xamarin.com/schemas/2014/forms/design"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:prism="http://prismlibrary.com"
mc:Ignorable="d">
<ContentView.Content>
<StackLayout HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
<Label x:Name="customLabel" />
<Label
x:Name="lblReadMore"
FontSize="18"
TextColor="#1a0fa9">
<Label.GestureRecognizers>
<TapGestureRecognizer Tapped="TapGestureRecognizer_Tapped" />
</Label.GestureRecognizers>
</Label>
</StackLayout>
</ContentView.Content>
</ContentView>
背后的代码
using System;
using System.Diagnostics;
using System.Linq;
using Xamarin.Forms;
using Xamarin.Forms.Xaml;
namespace BlankApp3.Controls
{
[XamlCompilation(XamlCompilationOptions.Compile)]
public partial class CustomLabel : ContentView
{
public CustomLabel()
{
InitializeComponent();
}
#region Bindable Property
public static readonly BindableProperty TextProperty = BindableProperty.Create(
propertyName: nameof(TextProperty),
returnType: typeof(string),
declaringType: typeof(CustomLabel),
defaultBindingMode: BindingMode.TwoWay,
propertyChanged: TextPropertyChanged
);
public string Text
{
get { return (string)base.GetValue(TextProperty); }
set { base.SetValue(TextProperty, value); }
}
private static void TextPropertyChanged(BindableObject bindable, object oldValue, object newValue)
{
var control = (CustomLabel)bindable;
if (newValue != null)
{
control.customLabel.Text = (string)newValue;
var ss = control.customLabel.Text.Split().Length;
if (control.customLabel.Text.Split().Length >= 30)
{
control.ShortTextVisible = true;
control.ReadMoreLabel = true;
}
}
}
#endregion Bindable Property
public bool ReadMoreLabel { get; set; }
private bool _shortTextVisible;
public bool ShortTextVisible
{
get => _shortTextVisible;
set { _shortTextVisible = value; ShortTextPropertyChanged(); }
}
private void ShortTextPropertyChanged()
{
if (Text != null && Text.Split().Length >= 30)
{
if (ShortTextVisible)
{
if (customLabel != null && !string.IsNullOrWhiteSpace(customLabel.Text) && customLabel.Text.Split().Length < 100)
{
Debug.WriteLine("");
}
customLabel.Text = string.Join(" ", Text.Split().Take(30));
lblReadMore.Text = "See more";
lblReadMore.IsVisible = true;
}
else
{
customLabel.Text = Text;
lblReadMore.Text = "See less";
}
}
}
private void TapGestureRecognizer_Tapped(object sender, EventArgs e)
{
ShortTextVisible = !ShortTextVisible;
}
}
}
主页.xaml
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage
x:Class="BlankApp3.Views.MainPage"
xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:BlankApp3.Controls"
Title="{Binding Title}"
BackgroundColor="#ffffff">
<CollectionView ItemsSource="{Binding Monkeys}">
<CollectionView.ItemTemplate>
<DataTemplate>
<StackLayout>
<StackLayout Padding="10" Orientation="Horizontal">
<Image
HeightRequest="80"
Source="https://d2gg9evh47fn9z.cloudfront.net/800px_COLOURBOX13204546.jpg"
VerticalOptions="Start" />
<StackLayout HorizontalOptions="FillAndExpand">
<Frame
Margin="10,0,10,0"
BackgroundColor="#f9f9f9"
CornerRadius="10"
HasShadow="False">
<StackLayout>
<Label FontAttributes="Bold" Text="Dr. Gracy David" />
<local:CustomLabel Text="{Binding .}" />
</StackLayout>
</Frame>
<StackLayout Margin="10,0,10,0" Orientation="Horizontal">
<Label Text="12 April,2020" />
<Label Text="3.20pm" />
</StackLayout>
</StackLayout>
</StackLayout>
</StackLayout>
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
</ContentPage>
MainPageViewModal.cs
using Prism.Navigation;
using System.Collections.ObjectModel;
namespace BlankApp3.ViewModels
{
public class MainPageViewModel : ViewModelBase
{
public ObservableCollection<string> Monkeys { get; set; }
public MainPageViewModel(INavigationService navigationService)
: base(navigationService)
{
Title = "Main Page";
Monkeys = new ObservableCollection<string>();
}
public async override void OnNavigatedTo(INavigationParameters parameters)
{
Monkeys = new ObservableCollection<string>()
{
"Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.",
"Simple",
"Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum."
};
}
}
}
推荐阅读
- java - 如何从 JavaFX 中的匿名 MenuItem 中获取文本?
- reactjs - 在 Ant Design 上提交之前如何转换 Form.Item 的值?
- c# - 如何检查是否使用 tweetinvi 发送了推文
- excel - 通过 VBA 更新列时出现“自动化错误”
- php - 通过 udemylaravel.app 访问 laravel homestead 项目时遇到问题,但 192.168.10.10 运行良好
- javascript - 在 reactJS 中编写媒体查询的最佳方法
- angular - 如何将一个类的相同实例传递给打字稿中的另一个类?
- angular - 从 Firebase 实时数据库中检索数据
- java - 如何将复杂的 Xml 转换为 csv?
- python - Keras 混合模型在每个时期都给出相同的结果