AutoScale Label Xamarin

Question

I am working on an app that displays results from a RSS feed. I am trying to show the Title and the Date in the same row of a Stacklayout.

Xaml Code:

StackLayout>
    <Label Text="60 Second Sports" FontAttributes="Bold" HorizontalOptions="Center"/>
    <ListView x:Name="mainArticleRssList" IsPullToRefreshEnabled="True" Refreshing="ListItems_Refreshing" ItemTapped="RssList_ItemTapped">
        <ListView.ItemTemplate>
            <DataTemplate>
                <ViewCell>
                    <StackLayout Padding="15,0,15,0">
                        <Label Text="{Binding Title}" 
                               LineBreakMode="WordWrap"
                               MaxLines="2"/>
                        <Label Text="{Binding PublishedDate}" 
                               LineBreakMode="WordWrap"
                               MaxLines="1"/>
                    </StackLayout>
                </ViewCell>
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>
    <controls:AdMobView />
</StackLayout>

Here is what it looks like:

What I Expect:

I want the Title to auto scale to fit in the same row as the date. Is it possible to set a width for the entire row and then have the two labels fit inside of the row?

Other fruits of a few hours of googling:

Here are some of the links I found, but some are old and not sure if they work.
This one is old Auto Scale Text Size
This one didn't work Auto-scaling label fontsize in Xamarin

I also found a couple Nuget packages, but i don't think i need to do that. https://baskren.github.io/Forms9Patch/ https://forums.xamarin.com/discussion/43468/autosize-font-label

Hello. Author of Forms9Patch here. This is exactly why Forms9Patch.Label element was written. Autosizing is something that doesn't work as well as it should on most platforms - even iOS falls short in some regards. — baskren, Apr 24 '19 at 13:49

score 0 · Answer 1 · answered Apr 12 '19 at 06:59

Use Grid Layout inside stack layout to achive it

<ListView x:Name="mainArticleRssList" IsPullToRefreshEnabled="True" HasUnevenRows="True" Refreshing="ListItems_Refreshing" ItemTapped="RssList_ItemTapped">
        <ListView.ItemTemplate>
            <DataTemplate>
                <ViewCell>
                    <StackLayout Padding="15,0,15,0">
                     <Grid x:Name="grd">
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="7*"/>
                                    <ColumnDefinition Width="3*"/>
                                    </Grid.ColumnDefinitions>
                        <Label Text="{Binding Title}" 
                               LineBreakMode="WordWrap"
                               MaxLines="2"/>
                        <Label Text="{Binding PublishedDate}" Grid.Column="1"
                               LineBreakMode="WordWrap"
                               MaxLines="1"/>
                </Grid>
                    </StackLayout>
                </ViewCell>
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>

Use this code and it will work for you.

score 0 · Answer 2 · answered Apr 12 '19 at 07:09

Is that your needs like this screenshot?

You can use Grid to achieved that.

 <ContentPage.Content>
       <StackLayout>
          <Label Text="Xamarin.Forms native cell" HorizontalTextAlignment="Center" />
           <ListView x:Name="listView" CachingStrategy="RecycleElement" 
        ItemSelected="OnItemSelected">
            <ListView.ItemTemplate>
                <DataTemplate>
                    <ViewCell>

                        <Grid>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="*" />

                        </Grid.RowDefinitions>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="3*" />
                            <ColumnDefinition Width="1*" />
                            </Grid.ColumnDefinitions>

                            <Label Text="{Binding Title}" Grid.Row="0" Grid.Column="0" 
                           LineBreakMode="TailTruncation"
                           MaxLines="2" />
                            <Label Text="{Binding PublishedDate}" Grid.Row="0" Grid.Column="1" 
                           LineBreakMode="WordWrap"
                           MaxLines="1"/>
                        </Grid>
                    </ViewCell>


                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
    </StackLayout>
</ContentPage.Content>

If title is too long, you can setLineBreakMode="TailTruncation" it will automatically truncate when the label reaches the end of the container.

Do you have any updates? If the reply help to you, please mark the reply as answer. — Leon, Apr 15 '19 at 01:36

AutoScale Label Xamarin

2 Answers2