Forum Xamarin.Forms

Announcement:

The Xamarin Forums have officially moved to the new Microsoft Q&A experience. Microsoft Q&A is the home for technical questions and answers at across all products at Microsoft now including Xamarin!

To create new threads and ask questions head over to Microsoft Q&A for .NET and get involved today.

Xamarin Forms iOS Label does not display correctly in ListView

xeshanxeshan Member
edited August 2020 in Xamarin.Forms

Hello,

I have an iOS ListView that has a Datagrid with a Group Header Template. The issue I am having is when a label within the Gridview attempts to display in iOS, the label is displaying partially.

ie.

When it First Loads

If you were to click on the Dates in DataView..you can see the label overlaying dates...

XAML code

<ListView x:Name ="lstView"
IsGroupingEnabled="true"

                       SeparatorVisibility="None"
                  HorizontalOptions="FillAndExpand"
                  VerticalOptions="FillAndExpand" 
                HasUnevenRows="true">
                    <ListView.GroupHeaderTemplate>
                        <DataTemplate>
                            <ViewCell >

                            <Grid RowSpacing="0" BackgroundColor="#00AEEF">
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="*" />
                                    <RowDefinition Height="*"/>                                    

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

                                </Grid.ColumnDefinitions>


                                <StackLayout Grid.Row="0"  HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" >


                                    <Label Grid.Row="0" Text="{Binding LongName}" Padding="10" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" FontAttributes="Bold" TextColor="White" FontSize="Large" ></Label>

                                </StackLayout>


                                <StackLayout Grid.Row="1" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">



                                    <Label x:Name="HeaderDesc" Text="{Binding HeaderDescription}" Padding="10,20" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" TextColor="White" FontSize="Medium" FontAttributes="Italic"></Label>



                                </StackLayout>



                               </Grid>




                            </ViewCell>

                        </DataTemplate>
                    </ListView.GroupHeaderTemplate>
                    <ListView.ItemTemplate>
                        <DataTemplate>

                        <!--TextCell Text="{Binding startDate}"
                                   TextColor="#00AEEF"

                                 >


                        </TextCell-->
                        <ViewCell Height="45">

                            <StackLayout   HorizontalOptions="FillAndExpand"                                            
                                       Spacing="10" 
                                        Padding="7,0,0,10"
                                       Opacity="0.9"
                                       >

                                <Label
                                        Text="{Binding startDate}"  
                                   FontSize="Subtitle"
                                   TextColor="#00AEEF" 
                                   FontAttributes="None" 
                                   VerticalOptions="Center" 
                                   HorizontalOptions="FillAndExpand" />
                            </StackLayout>

                        </ViewCell>

                    </DataTemplate>






                </ListView.ItemTemplate>



            </ListView>

As you can see the second label, (HeaderDesc) is not appearing properly..you have to click on the DataTemplate field to see it. Options I have tried include, removing the stack layout, and setting the height to 20 or auto; but still same issue persists. I just cannot get Row 1 contents to display correctly.

Your direction would be very much appreciated.

Thank you!

Answers

  • YelinzhYelinzh Member, Xamarin Team Xamurai
    edited August 2020

    The issue may be caused by the caching problem. To fix this, try to set the CachingStrategy to RecycleElementAndDataTemplate or RecycleElement to improve the scrolling performance for the ListView.

    <ListView CachingStrategy="RecycleElementAndDataTemplate" ...>
        ...
    </ListView>
    
Sign In or Register to comment.