CODEWITHSUNDEEP
xamlxamarinxamarin.forms
Sreeraj
Sreeraj

Reputation: 2434

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 ?

Upvotes: 4

Views: 4958

Answers (1)

Sreeraj
Sreeraj

Reputation: 2434

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.

Upvotes: 11

Related Questions