Good morning

I am struggling with detection if label`s text is higher than container. I tried to find some already done solution but couldn't find anything. Before I would start to implement some runtime solution in code behind I decided to ask you if I missed some knowledge.

I have and CarouselView which custom DataTemplate as below:

                      <Frame BorderColor="DarkGray"
                       CornerRadius="9"
                       HorizontalOptions="Center"
                       VerticalOptions="CenterAndExpand">
                            <StackLayout>
                                <Label Text="{Binding Feed.Title}" 
                                       TextColor="Black" 
                                       FontSize="Title" 
                                       HorizontalTextAlignment="Center"/>
                                <Image MinimumHeightRequest="200"
                                       MinimumWidthRequest="200">
                                    <Image.Source>
                                        <UriImageSource CachingEnabled="true"
                                                        Uri="{Binding Feed.ImageSource.AbsoluteUri}"
                                                        CacheValidity="1"/>
                                    </Image.Source>
                                </Image>
                                <Label 
                                                        Text="{Binding Feed.Description}" 
                                                        TextColor="Gray"
                                                        FontSize="Subtitle"/>
                            </StackLayout>
                        </Frame>
                    </DataTemplate>

When second label`s text is big it get sank in parent view as on picture:

As the solution I would like to remove not cut / not visible text and add three dots. Is there any done solution or I should try to do runtime height measurements?

Thanks!

CodePudding user response：

Sounds like it isn't correctly determining the available height.

Does it do better if use Grid instead of StackLayout?

<Grid RowDefinitions="Auto,Auto,*">
    <Label Grid.Row="0" ... />
    <Image Grid.Row="1" ... />
    <Label Grid.Row="2" LineBreakMode="TailTruncation" ... />
</Grid>

Note the use of* for Row 2. This should tell Xamarin layout to use exactly the remaining height.

And "TailTruncation" for the ellipsis.

Also, I'm curious if it works better if you remove the surrounding <Frame>. If it does work better without that, then its a bug in nested layout.

CodePudding user response：

A easy way is to create a custom control to show the determined number of rows and show the three dots when you do not want to show the text which hided.

Xaml:

 <ContentView.Content>
    <StackLayout>
        <Label x:Name="LabelContent" MaxLines="4"></Label>
        <Label Text="..."></Label>
    </StackLayout>
</ContentView.Content>

Code hehind:

public partial class CustomControl1 : ContentView
{

    public CustomControl1()
    {
        InitializeComponent();

    }

    private string _text;
    public string Text
    {
        get { return _text; }
        set
        {
            _text = value;
            OnPropertyChanged();
        }
    }
    public static readonly BindableProperty TextProperty = BindableProperty.Create(
             nameof(Text),
             typeof(string),
             typeof(CustomControl1),
             string.Empty,
             propertyChanged: (bindable, oldValue, newValue) =>
             {
                 var control = bindable as CustomControl1;
                 //var changingFrom = oldValue as string;
                 //var changingTo = newValue as string;
                 control.LabelContent.Text = newValue.ToString();
             });
}

Usage:

 <CarouselView ItemsSource="{Binding feeds}">
        <CarouselView.ItemTemplate>
            <DataTemplate>
                <Frame BorderColor="DarkGray"
                   CornerRadius="9"
                   HorizontalOptions="Center"
                   VerticalOptions="CenterAndExpand">
                    <StackLayout>
                        <Label Text="{Binding Title}" 
                                   TextColor="Black" 
                                   FontSize="Title" 
                                   HorizontalTextAlignment="Center"/>
                        <Image MinimumHeightRequest="200" Source="{Binding  ImageSource}"
                                   MinimumWidthRequest="200">

                        </Image>
                        <local:CustomControl1 Text="{Binding Description}"/>
                    </StackLayout>
                </Frame>
            </DataTemplate>
        </CarouselView.ItemTemplate>
    </CarouselView>

You could create a custom control LargeLabel to show the hidden text as well when you create the three dots. You could check the link for more details. how to Add “View More” and view less at the end of label after 3 lines