"SeeMore"功能适用于Xamarin Forms

6
我正在开发一个Xamarin Forms项目。我需要在ListView中添加一个Label,默认情况下最多显示两行,然后显示省略号(...)。此外,我想要添加一个“阅读更多”按钮,使用户可以查看被截断的文本。再次点击该按钮时,文本需要被截断。这就像是“查看更多”和“查看更少”的功能。我已经使用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}}" />

查看更多图片

折叠时应该是这样的:


https://xamarincodingtutorial.blogspot.com/2020/02/xamarin-form-read-more-label-custom.html - Anand
@Anand 这不是他期望的答案。 - Sagar Panwala
2个回答

2
根据@anand所说的内容,制作了一个快速示例。

enter image description here

创建名为 CustomLabel 的自定义控件。

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

MainPage.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."
            };
        }
    }
}

这并没有解决 OP 的问题。他想要在标签后面的省略号之后同一行显示“查看更多”标签。 - Mihail Duchev

0

我们如何限制最多只有3行?如果spanText中没有MaxLine怎么办? - ajit
我相信你像往常一样在标签控件本身上设置了它。 - o_w
1
MaxLine可以添加到标签选项卡本身。但是我看不到第二个span,即seeMore标签。如果我为父级标签添加MaxLine,则只能看到3行。 - ajit

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接