Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Xamarin.Forms Vertical StackLayout in ListView displays only one (first) Child

<ListView 
    ItemsSource="{Binding Messages}"
    Grid.ColumnSpan="2"
    HeightRequest="100">
    <ListView.ItemTemplate>
        <DataTemplate>
            <ViewCell>
                <ViewCell.View>
                    <StackLayout>
                        <Label
                            Text="{Binding When}"
                            XAlign="Center"/>
                        <StackLayout
                            BackgroundColor="Gray"
                            Orientation="Vertical"
                            VerticalOptions="Center">
                            <Label
                                Text="{Binding Message}"
                                XAlign="Start"/>
                            <Label
                                Text="{Binding Sender}"
                                XAlign="Start"
                                TextColor="Red"/>

                        </StackLayout>
                    </StackLayout>
                 </ViewCell.View>
            </ViewCell>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

I am rendering a custom ListView in Xamarin.Forms application. The StackLayout which contains two Labels (to which "Message" and "Sender" has been bound), currently displays only one child. With the code above, it displays only "Message". If I change code to be

<StackLayout
      BackgroundColor="Gray"
      Orientation="Vertical"
      VerticalOptions="Center">
      <Label
         Text="{Binding Sender}"
         XAlign="Start"
         TextColor="Red"/>
      <Label
          Text="{Binding Message}"
          XAlign="Start"/>
  </StackLayout>

it displays only sender. In short it is displaying only first child. What have I done wrong here ?

like image 786
Sreeraj Avatar asked Dec 19 '22 04:12

Sreeraj


1 Answers

Issue was similar to what @Grisha had pointed out. RowHeight was proving to be lesser, and the second StackLayout was getting clipped.

The solution was to set HasUnevenRows property of the ListView to be TRUE. Thus, RowHeight was calculated automatically.

like image 123
Sreeraj Avatar answered May 25 '23 05:05

Sreeraj