Read more option for label text in xamarin.forms

hyderabadihyderabadi USMember ✭✭✭

Can any one help me on this?
I want set read more option for multiline text end of label when i click on that read more it will expand or navigate to the any other page. Please help me on this .

Thanks in advance.

Answers

  • JamesLaveryJamesLavery GBBeta, University ✭✭✭✭✭

    The easiest option is to create a Custom Control with your multiline text and then a button to perform the 'read more' functionality.

  • hyderabadihyderabadi USMember ✭✭✭

    @JamesLavery Can you Please send me any link if you have any for reference.

    Thanks.

  • JamesLaveryJamesLavery GBBeta, University ✭✭✭✭✭

    Here's a quick and dirty implementation.

    It consists of a custom ContentView with bindable properties:

    • Text - the text to display
    • Expanded - whether the control is expanded or not
    • Command - the command to execute when the button in the control is tapped

    Note that the PageModel is based on FreshMvvm, so it implements INotifyPropertyChanged and property updates automatically trigger the PropertyChanged.

    Control layout LargeTextLabel.xaml

    <?xml version="1.0" encoding="UTF-8"?>
    <ContentView
        xmlns ="http://xamarin.com/schemas/2014/forms"
        xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
        x:Class="LargeTextLabelDemo.LargeTextLabel">
        <ContentView.Content>
            <StackLayout
                Orientation="Vertical">
                <Label
                    BackgroundColor="Beige"
                    HeightRequest="50"
                    x:Name="SmallLabel" IsVisible="true"/>
                <Label
                    BackgroundColor="BurlyWood"
               HeightRequest="200"
                    x:Name="FullLabel" IsVisible="false"/>
                <Button
                    Text="See More"
                    x:Name="ExpandContractButton" />
            </StackLayout>
        </ContentView.Content>
    </ContentView>
    

    Control code behind LargeTextLabel.xaml.cs

    using System.Windows.Input;
    using Xamarin.Forms;
    
    namespace LargeTextLabelDemo
    {
        public partial class LargeTextLabel : ContentView
        {
    
            public LargeTextLabel()
            {
                InitializeComponent();
            }
    
            #region Expanded
            public static readonly BindableProperty ExpandedProperty = BindableProperty.Create(
                            nameof(LargeTextLabel),
                typeof(bool),
                typeof(ContentView),
                false,
                BindingMode.TwoWay,
                propertyChanged: (bindable, oldValue, newValue) =>
                {
                    if (newValue != null && bindable is LargeTextLabel control)
                    {
                        var actualNewValue = (bool)newValue;
                        control.SmallLabel.IsVisible = !actualNewValue;
                        control.FullLabel.IsVisible = actualNewValue;
                        control.ExpandContractButton.Text = actualNewValue ? "See Less" : "See More";
                    }
                });
    
            public bool Expanded { get; set; }
            #endregion Expanded
    
            #region Text
            public static readonly BindableProperty TextProperty = BindableProperty.Create(
                            nameof(LargeTextLabel),
                typeof(string),
                typeof(ContentView),
                default(string),
                BindingMode.TwoWay,
                propertyChanged: (bindable, oldValue, newValue) =>
                {
                    if (newValue != null && bindable is LargeTextLabel control)
                    {
                        var actualNewValue = (string)newValue;
                        control.SmallLabel.Text = actualNewValue;
                        control.FullLabel.Text = actualNewValue;
                    }
                });
    
            public string Text { get; set; }
            #endregion Text
    
            #region Command
            public static readonly BindableProperty CommandProperty = BindableProperty.Create(
                            nameof(LargeTextLabel),
                typeof(ICommand),
                typeof(ContentView),
                default(Command),
                BindingMode.TwoWay,
                propertyChanged: (bindable, oldValue, newValue) =>
                {
                    if (newValue != null && bindable is LargeTextLabel control)
                    {
                        var actualNewValue = (ICommand)newValue;
                        control.ExpandContractButton.Command = actualNewValue;
                    }
                });
    
            public ICommand Command { get; set; }
            #endregion Command
        }
    }
    

    MainPage.xaml

    <?xml version="1.0" encoding="utf-8"?>
    <ContentPage
        xmlns     ="http://xamarin.com/schemas/2014/forms"
        xmlns:x    ="http://schemas.microsoft.com/winfx/2009/xaml"
        xmlns:views="clr-namespace:LargeTextLabelDemo;assembly=LargeTextLabelDemo"
        xmlns:local="clr-namespace:LargeTextLabelDemo"
        x:Class    ="LargeTextLabelDemo.MainPage">
        <ContentView>
            <Grid
                BackgroundColor="Bisque">
                <local:LargeTextLabel
                    Command ="{Binding ExpandContractCommand}"
                    Text    ="{Binding LabelText}"
                    Expanded="{Binding TextExpanded}" />
            </Grid>
        </ContentView>
    </ContentPage>
    

    MainPageModel.cs

    using System;
    using System.Threading.Tasks;
    using System.Windows.Input;
    using Rg.Plugins.Popup.Extensions;
    using FreshMvvm;
    using Xamarin.Forms;
    
    namespace LargeTextLabelDemo
    {
        internal class MainPageModel : FreshBasePageModel
        {
    
            public MainPageModel()
            {
                Title = "Main Page";
                LabelText = "Can any one help me on this?\nI want set read more option for multiline text end of label when i click on that read more it will expand or navigate to the any other page. Please help me on this .\n\nThanks in advance.";
            }
    
            #region Bound Properties
            public string Title { get; set; }
    
            public bool TextExpanded
            {
                get;
                set;
            }
    
            public string LabelText { get; set; }
            #endregion Bound Properties
    
            #region Commands
            private ICommand _ExpandContractCommand;
            public ICommand ExpandContractCommand
            {
                get
                {
                    if (_ExpandContractCommand == null)
                    {
                        _ExpandContractCommand = new Command(() => {
                            TextExpanded = !TextExpanded;
                        });
                    }
    
                    return _ExpandContractCommand;
                }
            }
            #endregion Commands
        }
    }
    

    Resulting output:

  • hyderabadihyderabadi USMember ✭✭✭

    Oh, Thanks for your reply. will try this.
    Thanks again.

Sign In or Register to comment.