Is there any control for achieving truncate the label & show the full text when click the arrow - xamarin.forms

Question

I have developed the xamarin forms project. I need to truncate the text as default then show the remaining text once the button clicked. Again the text need to be truncated when click the button. It is like "See more" & "See less" functionality. Please anyone suggest me how to achieve this. I have added the screenshot for further reference.
This is how it should look when expanded:
And this is how it should look like when collapsed:

Answer 1

First of all I think you have the carets wrong. The downward caret is usually the one for an expanded control and vice versa. At the end it's up to you, but you should stick to common UX idioms unless you have a very good reason not to.
If one line of preview text would suffice there is quite an easy solution for your issue: You can set the LineBreakMode of the label when your view is clicked:
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="Test_SO.ExpansibleControl">
<ContentView.GestureRecognizers>
<TapGestureRecognizer Command="{Binding ClickCommand}" />
</ContentView.GestureRecognizers>
<ContentView.Content>
<Grid RowSpacing="10" Padding="10">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"></RowDefinition>
</Grid.RowDefinitions>
<Label Text="{Binding Text}" LineBreakMode="{Binding LineBreakMode}" HorizontalOptions="StartAndExpand" />
<Label Grid.Column="1" Text="{Binding CaretCharacter}" HorizontalOptions="End" />
</Grid>
</ContentView.Content>
</ContentView>
Just a short outline of what I've done
Added a Grid to ExpansibleControl
Within the grid there is a Label for the text
The Text is bound to the Text property of a viewmodel (see below)
The LineBreakMode is bound to the LineBreakMode of a viewmodel
Furthermore a second Label is added for the caret
This would be an image in a real app, but for the purpose of demonstration a Label will suffice
The Text is bound to the CaretCharacter property of our viewmodel
Furthermore I've added a TapGestureRecognizer and bound its Command to the ClickCommand property of out viewmodel.
Viewmodel
As stated above, the views in our ExpansibleControl are bound to a viewmodel. Here is the respective code
public class ExpansibleControlViewModel : INotifyPropertyChanged
{
private char _caretCharacter;
private bool _isCollapsed;
private LineBreakMode _lineBreakMode;
private string _text;
public ExpansibleControlViewModel()
{
ClickCommand = new Command(OnClick);
}
public event PropertyChangedEventHandler PropertyChanged;
public char CaretCharacter
{
get => _caretCharacter;
private set
{
if (_caretCharacter == value)
{
return;
}
_caretCharacter = value;
OnPropertyChanged();
}
}
public Command ClickCommand { get; private set; }
public bool IsCollapsed
{
get => _isCollapsed;
set
{
_isCollapsed = value;
if (_isCollapsed)
{
LineBreakMode = LineBreakMode.TailTruncation;
CaretCharacter = '<';
}
else
{
LineBreakMode = LineBreakMode.WordWrap;
CaretCharacter = 'v';
}
}
}
public LineBreakMode LineBreakMode
{
get => _lineBreakMode;
private set
{
if (_lineBreakMode == value)
{
return;
}
_lineBreakMode = value;
OnPropertyChanged();
}
}
public string Text
{
get
{
return _text;
}
set
{
if (_text == value)
{
return;
}
_text = value;
OnPropertyChanged();
}
}
protected virtual void OnPropertyChanged([CallerMemberName] string propertyName = null)
{
PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
}
private void OnClick()
{
ToggleIsCollapsed();
}
private void ToggleIsCollapsed()
{
IsCollapsed = !IsCollapsed;
}
}
The viewmodel implements INotifyPropertyChanged to inform the view that properties have changed (otherwise the bound views would not be updated when a value changes). Due to CallerMemberNameAttribute the name of the property that calls OnPropertyChanged is automatically passed in the propertyName parameter when the optional parameter is omitted.
IsCollapsed:bool is rather a helper, to simplify the code and reveal intention. When the callback for ClickCommand is called, IsCollapsed is inverted. When it has changed, we set the LineBreakMode and the CaretCharacter to the according values. The setters of those in turn call OnPropertyChanged to raise the PropertyChanged event and the UI updates. By setting the LineBreakMode we "tell" the label either to truncate the text or to break text at words (there are other options).
What if you need a larger portion of text?
There are some options you can go with here.
You could for example fix the LineBreakMode to WordWrap and set the HeightRequest of the Label to a value >0 to show just a portion of the text and to -1 to show the whole text. In that case you could overlay a gradient from transparent to your background color, to fade out text from top to bottom, as a hint that there is more text to show.
Another option is to manipulate the text itself. You could have a writeable property OriginalText and a read-only property Text and just truncate the text "by hand".
Anyway, for both options you will have to take care that it scales across platforms, which may or may not be an easy endeavour.

Answer 2

With latest Xamarin Forms 3.3 there is a new attribute "MaxLines" for Labels, see https://blog.verslu.is/xamarin/xamarin-forms-xamarin/maxlines-label-xamarin-forms/ . This should help if you need to display on multiple lines.