Xamarin 表单的 SeeMore 功能

Question

我正在开发一个 xamarin 表单项目。我需要在列表视图中添加一个标签，默认情况下最多显示 2 行，然后显示 elipses(...) 我还想添加一个 readmore 按钮，使用户能够查看截断的文本。再次单击按钮时需要截断文本。这就像“多看”和“少看”功能。我通过使用 max lines 属性使它显示 3。请任何人建议我如何实现这一目标。我添加了屏幕截图以供进一步参考。

这是我的 XAML For 标签。

<Label Text="{Binding Note, Mode=TwoWay}" Padding="0,0,0,0" MaxLines="3"
       LineBreakMode="TailTruncation" Style="{StaticResource TabContentLabelStyle}" 
       IsVisible="{Binding IsEdit,Converter={StaticResource BoolConverter}}" />

这是折叠时的外观：

Answer 1

根据 @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."
            };
        }
    }
}