Forum Xamarin.Forms
We are excited to announce that the Xamarin Forums are moving to the new Microsoft Q&A experience. Q&A is the home for technical questions and answers at across all products at Microsoft now including Xamarin!

We encourage you to head over to Microsoft Q&A for .NET for posting new questions and get involved today.

Xamarin Forms iOS Label does not display correctly in ListView

xeshanxeshan Member
edited August 18 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

  • JarvanJarvan Member, Xamarin Team Xamurai
    edited August 18

    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.