Read more less feature for label

[Ajith Gopalakrishnan]

Hi

I am having a list Listview. I need a label to be placed within the listiew cell. Such that if label contain more than 2 lines it should be trucated with elipses(...), and Read more option is to be displayed. If I click on that read more whole content is to be displayed with read less option. If the label content has less than 2 lines see more is not required to be shown. I have limited the no of displayed by maxLines property for label. Is there a way to achieve the seeLess/seeMore feature ?

[Lakshmi Natarajan]

Hi Ajith, 

 

Thank you for using Syncfusion products. 

 

We have checked the reported query “Read more less feature for Label” from our end. We would like to inform you that you can achieve your requirement using MaxLines property of Label. You can update the MaxLines of the Label in the see more button clicked event. To update the runtime size changes set AutoFitMode as DynamicHeight for SfListView.  

 

Xaml: Set MaxLines as 2 for Label. Set AutoFitMode as DynamicHeight for SfListView. Use converter to handle the visibility of the buttons based on label text length. 

<?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:local="clr-namespace:ListViewXamarin" 

             xmlns:sync="clr-namespace:Syncfusion.ListView.XForms;assembly=Syncfusion.SfListView.XForms" 

             x:Class="ListViewXamarin.MainPage"> 

    <ContentPage.BindingContext> 

        <local:ViewModel /> 

    </ContentPage.BindingContext> 

 

    <ContentPage.Resources> 

        <ResourceDictionary> 

            <local:VisibilityConverter x:Key="VisibilityConverter"/> 

        </ResourceDictionary> 

   </ContentPage.Resources> 

 

    <Grid RowSpacing="0" ColumnSpacing="0" Padding="0" Margin="0"> 

        <sync:SfListView x:Name="listView"  

                    AutoFitMode="DynamicHeight" 

                    ItemsSource="{Binding BookInfo}"  

                    ItemSpacing="3" 

                    SelectionBackgroundColor="#d3d3d3"> 

 

            <sync:SfListView.ItemTemplate> 

                <DataTemplate> 

                    <Grid BackgroundColor="Beige"> 

                        <Grid.Behaviors> 

                            <local:Behavior/> 

                        </Grid.Behaviors> 

                        <Grid.RowDefinitions> 

                            <RowDefinition Height="Auto"/> 

                            <RowDefinition Height="Auto"/> 

                        </Grid.RowDefinitions> 

                        <Label x:Name="label" Text="{Binding BookDescription}" MaxLines="2" Opacity=" 0.54" TextColor="#000000" FontSize="13"/> 

                        <Button x:Name="seeMoreButton" Text="See more..." Grid.Row="1" IsVisible="{Binding LineLength, Converter={StaticResource VisibilityConverter}, ConverterParameter=SeeMore}" BackgroundColor="Transparent"/> 

                        <Button x:Name="seeLessButton" Text="See less..." Grid.Row="1" IsVisible="{Binding LineLength, Converter={StaticResource VisibilityConverter}, ConverterParameter=SeeLess}" BackgroundColor="Transparent"/> 

                    </Grid> 

                </DataTemplate> 

            </sync:SfListView.ItemTemplate> 

        </sync:SfListView> 

    </Grid> 

</ContentPage> 

 

ViewModel: Set the length of the text. 

        internal ObservableCollection<BookInfo> GetBookInfo() 

        { 

            var bookInfo = new ObservableCollection<BookInfo>(); 

 

            for (int i = 0; i < BookDescriptions.Count(); i++) 

            { 

                var book = new BookInfo() { BookDescription = BookDescriptions[i], LineLength = BookDescriptions[i].Length }; 

                bookInfo.Add(book); 

            } 

            return bookInfo; 

        } 

 

 

Converter: Handle the button visibility based on the lengh of the text. 

public class VisibilityConverter : IValueConverter 

{ 

    public object Convert(object value, Type targetType, object parameter, CultureInfo culture) 

    { 

        if ((int)value > 300) 

            return parameter.ToString() == "SeeMore" ? true : false; 

        return false; 

    } 

 

    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture) 

    { 

        throw new NotImplementedException(); 

    } 

} 

 

Behavior: To view the whole text on button clicked event. 

public class Behavior : Behavior<Grid> 

{ 

    Label Label; 

    Button SeeMoreButton; 

    Button SeeLessButton; 

 

    protected override void OnAttachedTo(Grid bindable) 

    { 

        Label = bindable.FindByName<Label>("label"); 

        SeeMoreButton = bindable.FindByName<Button>("seeMoreButton"); 

        SeeLessButton = bindable.FindByName<Button>("seeLessButton"); 

 

        SeeMoreButton.Clicked += SeeMoreButton_Clicked; 

        SeeLessButton.Clicked += SeeLessButton_Clicked; 

 

        base.OnAttachedTo(bindable); 

    } 

 

    private void SeeMoreButton_Clicked(object sender, EventArgs e) 

    { 

        SeeMoreButton.IsVisible = false; 

        SeeLessButton.IsVisible = true; 

        Label.MaxLines = 10; 

    } 

 

    private void SeeLessButton_Clicked(object sender, EventArgs e) 

    { 

        SeeLessButton.IsVisible = false; 

        SeeMoreButton.IsVisible = true; 

        Label.MaxLines = 2; 

    } 

} 

 

We have prepared a sample based on your requirement and attached in the following link for more reference, 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/154648-1869478651 

 

Screenshot: 

 

 

Please let us know if you need further assistance. 

 

Regards, 

Lakshmi Natarajan 

 

[Ajith Gopalakrishnan]

Hi Lekshmi,

Thanks for the reply. I am having some issue in tackling the issue. My problem is that i am not able to resolve the label name at the behaviour 

 Label = bindable.FindByName<Label>("label");

My ListView dataTemplate is bit complex it needs many labels to be organized, Here I have a grid inside DataTemplate then There is Grid within the grid and Stack View. I have Tried by adding the behavior in outermost grid and also inside grid with no success. I have added the xaml

<Grid>

    <Grid.Behaviors>

        <behaviors:Behavior/>

    </Grid.Behaviors>

    <Grid Margin="0,15,0,0">

        <Grid.ColumnDefinitions>

            <ColumnDefinition Width="Auto" />

            <ColumnDefinition Width="*" />

        </Grid.ColumnDefinitions>

        <avatarView:SfAvatarView VerticalOptions="StartAndExpand" HorizontalOptions="Center" ContentType="Custom"

                                 ImageSource="{Binding ImagePath}" WidthRequest="40" HeightRequest="40" BorderWidth="0" CornerRadius="25"/>

        <StackLayout Grid.Column="1">

            <cards:SfCardView Padding="1" HasShadow="False" CornerRadius="5" BackgroundColor="#f9f9f9">

                <StackLayout x:Name="LVItemParentStack" >

                    <Grid>

                        <Grid.ColumnDefinitions>

                            <ColumnDefinition Width="Auto" />

                            <ColumnDefinition Width="*" />

                        </Grid.ColumnDefinitions>

                        <StackLayout Grid.Column="1" Padding="5,0,5,5" Spacing="1">

                            <Label Text="{Binding DisplayName, Mode=TwoWay}" Padding="0,5,0,0" MaxLines="2"

                               Style="{StaticResource LabelNotesBoldStyle}" TextColor="{StaticResource Gray-700}"/>

   

                            <!--seemore-->

                            <Grid BackgroundColor="Beige" IsVisible="{Binding IsEdit,Converter={StaticResource BoolConverter}}">

                                <Grid.Behaviors>

                                    <behaviors:Behavior/>

                                </Grid.Behaviors>

                                <Grid.RowDefinitions>

                                    <RowDefinition Height="Auto"/>

                                    <RowDefinition Height="Auto"/>

                                </Grid.RowDefinitions>

                                <Label x:Name="expandLabel" Text="{Binding Note}" MaxLines="2" Opacity=" 0.54" TextColor="#000000" FontSize="13"/>

                                <Button x:Name="expandButton" Text="SEE MORE" Grid.Row="1" BackgroundColor="Transparent" HorizontalOptions="Start"/>

                            </Grid>

                            <textInputLayout:SfTextInputLayout

                                x:Name="EditnotesLayout" CharMaxLength="2000" Hint="{StaticResource WriteANote}"

                                LeadingViewPosition="Inside" ShowCharCount="True" ShowHelperText="False" ShowHint="False"

                                HorizontalOptions="FillAndExpand" Padding="5" ContainerBackgroundColor="WhiteSmoke"

                                IsVisible="{Binding IsEdit}">

                            </textInputLayout:SfTextInputLayout>

                        </StackLayout>

                    </Grid>

                </StackLayout>

            </cards:SfCardView>

            <StackLayout Orientation="Horizontal" Margin="0,-12,0,-6">

                    <StackLayout Orientation="Horizontal">

                        <Label Text="{Binding LastModifiedDateTime, StringFormat='{0: dd MMMM yyyy}'}"

                               Style="{StaticResource TabContentLabelStyle}"

                               FontSize="10"

                               VerticalOptions="CenterAndExpand" />

                        <Label Text="{Binding LastModifiedDateTime, StringFormat='{}{0: hh:mm tt}'}"

                               Style="{StaticResource TabContentLabelStyle}"

                               FontSize="10"

                               VerticalOptions="CenterAndExpand" />

                    </StackLayout>

                    <StackLayout Orientation="Horizontal" HorizontalOptions="EndAndExpand" x:Name="TItem" IsVisible="{Binding PersonId,Converter={StaticResource UserVisibilityConverter}}">

                        <ImageButton Source="delete.png" IsVisible="{Binding IsEdit,Converter={StaticResource BoolConverter}}" Scale=".8"/>

                        <ImageButton Source="edit.png" IsVisible="{Binding IsEdit,Converter={StaticResource BoolConverter}}" Scale=".8"/>

                        <ImageButton Source="cancel.png" IsVisible="{Binding IsEdit}" Scale=".7"/>

                        <ImageButton Source="tick.png" IsVisible="{Binding IsEdit}" Scale=".7"/>

                    </StackLayout>

                </StackLayout>

        </StackLayout>

    </Grid>

</Grid>

what's the way for using the solution in this case..

[Lakshmi Natarajan]

Hi Ajith, 

 

Thank you the update. 

 

We have checked the reported query “Issue in getting the child element in the behaviors” from our end. Based on the code snippets provided, we suggest you to get the child element in the behavior using ChildAdded event of the parent element. You need to add the behavior for the direct parent element (see more grid) of the label and not for the outer most grid. In the behavior class, trigger ChildAdded event for the Grid and get the child from the ElementEventArgs. Please refer the following code snippets for more reference, 

 

Behavior: 

public class Behavior : Behavior<Grid> 

{ 

    Label Label; 

    Button Button; 

 

    protected override void OnAttachedTo(Grid bindable) 

    {  

        bindable.ChildAdded += Bindable_ChildAdded; 

 

        base.OnAttachedTo(bindable); 

    } 

 

    private void Bindable_ChildAdded(object sender, ElementEventArgs e) 

    { 

        if (e.Element is Label) 

            Label = e.Element as Label; 

        else if(e.Element is Button) 

            Button = e.Element as Button; 

        //Also, you can get the element using StyleId 'e.Element.StyleId == "expandButton"' 

    } 

} 

 

 

You can also refer to our online document regarding the same using the following link, 

KB link: https://www.syncfusion.com/kb/11287/how-to-access-a-named-listview-inside-a-xaml-datatemplate-in-xamarin-forms-sflistview 

 

Please let us know if you need further assistance. 

 

Regards, 

Lakshmi Natarajan