Forum Xamarin Xamarin.iOS

ListView HasUnevenRows does not work on iOS > v.11 with custom view-cell and data template selector.

Jmosh13Jmosh13 USMember ✭✭

Hi,

We have a PCL Xamarin Forms app that we recently upgraded XF from 3.6.0.220655 to the latest stable version (4.5.0.356). In testing, we found that the custom view cells in our ListViews with HasUnevenRows = true no longer honored that setting and most of our content in view is cut-off and not displaying properly. Works fine on devices with iOS 10.3.1, but no nothing newer. Works fine on Android, but is a show-stopper in iOS.

Most of these view cells are comprised of a combination of grids and stack-layouts along with labels and images.

Any help, advice or workarounds would be greatly appreciated.

Thanks.

Answers

  • LandLuLandLu Member, Xamarin Team Xamurai

    What does your cell look like?
    I created a single label cell like:

    <DataTemplate>
        <ViewCell>
            <StackLayout>
                <Label Text="{Binding}"/>
            </StackLayout>
        </ViewCell>
    </DataTemplate>
    

    I added two items in the source(A short one and a long one). Both of them could auto-resize the height. Could you please share your samples here?

  • Jmosh13Jmosh13 USMember ✭✭
    edited March 10

    My ViewCell in one circumstance looks like this:

    <ViewCell.View>
        <Grid BackgroundColor="White" RowSpacing="0" ColumnSpacing="0">
          <Grid.ColumnDefinitions>
            <ColumnDefinition Width="10"></ColumnDefinition>
            <ColumnDefinition Width="Auto"></ColumnDefinition>
            <ColumnDefinition Width="*"></ColumnDefinition>
            <ColumnDefinition Width="10"></ColumnDefinition>
          </Grid.ColumnDefinitions>
    
                <Grid.RowDefinitions>
                    <RowDefinition Height="10"></RowDefinition>
                    <RowDefinition Height="Auto"></RowDefinition>
                    <RowDefinition Height="Auto"></RowDefinition>
                    <RowDefinition Height="Auto"></RowDefinition>
                    <RowDefinition Height="10"></RowDefinition>
                    <RowDefinition Height="1"></RowDefinition>
                </Grid.RowDefinitions>
                <StackLayout Grid.Row="1" Grid.Column="1" Grid.ColumnSpan="2" 
                       Orientation="Horizontal" VerticalOptions="Start" HorizontalOptions="FillAndExpand" Spacing="0"            
                       Margin="0,0,0,0">
                    <Image x:Name="CSIconImage"
                   Source="Csimage16X16.png" HeightRequest="16" WidthRequest="16" IsVisible="{Binding}"
                   Margin="0,0,6,0"
                   VerticalOptions="Center" />
                    <Label x:Name="MLineOne"
                   FontSize="16"
                   VerticalTextAlignment="Center"
                   HorizontalTextAlignment="Start"
                   FormattedText="{Binding}" >
                    </Label>
                </StackLayout>
    
                <Label x:Name="SText
                   Grid.Row="2"
                   Grid.Column="1"
                   Grid.ColumnSpan="2"
                   VerticalTextAlignment="Center"
                   HorizontalTextAlignment="Start"
                   HorizontalOptions="StartAndExpand"
                   VerticalOptions="Start"
                   FontSize="14"
                   Margin="0,4,0,4"
                   TextColor="{StaticResource BrownishGrey}"
                   Text="{Binding}" >
            </Label>
    
            <Label x:Name="MThree
                   Grid.Row="3"
                   Grid.Column="1"
                   VerticalTextAlignment="Center"
                   HorizontalOptions="FillAndExpand"
                   VerticalOptions="Start"
                   FontSize="14"
                   FormattedText="{Binding}" />     
    
            <Label x:Name="MDate""
                   Grid.Row="3"
                   Grid.Column="2"
                   VerticalTextAlignment="Center"
                   VerticalOptions="Start"
                   HorizontalOptions="EndAndExpand"
                   FontSize="14"
                   FormattedText="{Binding}" />
    
            <BoxView x:Name="DetailBoxViewSeparator"
                Grid.Row="5" Grid.Column="0" Grid.ColumnSpan="4"
                Color="{Binding CellSeparatorColor}"
                HeightRequest="1"/>
        </Grid>
      </ViewCell.View>
    </ViewCell>
    
  • LandLuLandLu Member, Xamarin Team Xamurai

    I tried your template, it renders to different size like:

    The second cell is larger than the others.

  • Jmosh13Jmosh13 USMember ✭✭

    We are using a DataTemplateSelector to determine what sort of item template should be used and there are multiple types of data templates being used at any one time in the list view. Thats where the issue is on iOS, but not on Android which draws it correctly every time.

  • LandLuLandLu Member, Xamarin Team Xamurai

    Could you please share a sample here to help me reproduce your issue?

  • Jmosh13Jmosh13 USMember ✭✭

    So I started to create the sample app to reproduce, and was unable to do so. Then I looked more closely at what we were doing on affected screens and realized one of the custom view cells we utilize as a header row had its height set explicitly to 45 pixels. This caused every row to adhere to a 45 pixel height regardless of template type. Once I removed that, everything worked as expected. What a pain but finally was able to find what we were doing differently.

    Thanks so much for your help though. Needed to take that step back and see what we were doing differently.

  • LandLuLandLu Member, Xamarin Team Xamurai

    ListView has its own header:
    https://docs.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/listview/customizing-list-appearance#headers-and-footers
    Did you use it to build your architecture?
    If you can't provide the sample here we can't reproduce the issue to help you further.

Sign In or Register to comment.