strings randomly cut off in xamarin listview

Question

I'm making a basic Android master/detail app in VS 2019, which was started with the "Blank" mobile template.

I'm just using a grid for the layout. I have the ListView in a frame, which is in a row of the grid. The ItemsSource of the ListView is bound to a generic List:

List<MyObject>

The MyObject class has a Name property. The ListView contains a simple Label in its ViewCell/DataTemplate/ItemTemplate. The Text of the Label is bound to the Name property of the MyObject class.

The problem is that some of the strings displayed are cutoff. Which strings are cutoff seems random. When I tap a row, a Details page is displayed for the item in the tapped row. When I do that and then hit Back, some of the strings that were cutoff are now fully displayed, while other entries either remain cutoff and/or there are entries that were not cutoff, but are now cutoff.

The pic at the link below shows 2 screen shots. The one on the left is before opening the Details page, and the other is after returning from the Details page:

2 screen shots; left is before Details page displayed, the right after

I'm fairly new to Xamarin Forms, so I'm probably missing something basic. The randomness of which entries are cutoff really has me puzzled. Any help would be appreciated.

Here's the XAML for the Frame and ListView:

<!-- items list -->
<Frame  x:Name="ListFrame"                
    Grid.Row="3"    
    VerticalOptions="Fill"
    HorizontalOptions="Fill"
    OutlineColor="Black" 
    Padding="5"
    Margin="4"
    >
    <ListView x:Name="ItemsListView"
        ItemsSource="{Binding Items}"
        SelectedItem="{Binding SelectedCryptoItem}"
        IsRefreshing="{Binding IsRefreshingList}"
        RefreshCommand="{Binding RefreshListCommand}"
        ItemSelected="OnItemSelected"
        CachingStrategy="RecycleElement"
        VerticalScrollBarVisibility="Always"
        RowHeight="24"
        IsPullToRefreshEnabled="True"
        >
        <ListView.ItemTemplate>
            <DataTemplate>
                <ViewCell>
                    <Label Text="{Binding Name}" 
                        LineBreakMode="NoWrap"
                        FontSize="Medium"
                        FontAttributes="Bold" 
                        HorizontalOptions="StartAndExpand"
                        VerticalOptions="CenterAndExpand"
                        />
                </ViewCell>
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>
</Frame>

Hi, adding BackgroundColor="Red" for Lable , then share the screenshot here. I will check that. — Junior Jiang
@Jason If you put your response in a reply, I'd be happy to mark it as the accepted answer — Blaise

Rudy Spano Rudy Spano · Accepted Answer · 2020-08-25T11:11:29

Looking to your code, VerticalOptions and HorizontalOptions are not optimized and can be buggy (regarding cells recycling with different texts ?). You should use HorizontalTextAlignment and VerticalTextAlignment like advised here https://kent-boogaart.com/blog/jason-smith%27s-xamarin-forms-performance-tips. The Label Control will then use the entire space and text will be aligned as you want.

Later, you will probably embedd this Label in a Grid or another Layout if you want a more complex cell (with several controls)

strings randomly cut off in xamarin listview

1 Answers