I have a listview with three different cell contents inside only one of it shows on that cell through binding checks. I did not set the height of the view cell but set the vertical option of its stack layout child to 'fill'. Now, this works on android but mysteriously not on iOs. I already set the hasuneven rows to true but upon tapping each cell, I noticed that the height is the same. I'll show the xaml code and the item source code:
<ListView
x:Name = "lvConversations"
VerticalOptions = "FillAndExpand"
HorizontalOptions = "FillAndExpand"
IsGroupingEnabled = "false"
SeparatorVisibility = "None"
HasUnevenRows = "true"
ItemSelected = "messageSelected"
BackgroundColor = "#F8F8F8"
>
<ListView.ItemTemplate>
<DataTemplate>
<local:ScaledViewCell>
<local:ScaledStackLayout
VerticalOptions = "Fill"
HorizontalOptions = "FillAndExpand"
Orientation = "Vertical"
Spacing = "0">
<local:ScaledStackLayout
VerticalOptions = "Fill"
HorizontalOptions = "FillAndExpand"
Orientation = "Vertical"
Spacing = "0"
IsVisible = "{Binding isGroupHeader, Converter = {StaticResource inverter}}"
BackgroundColor = "Transparent">
<!-- OUTGOING -->
<local:ScaledStackLayout
HorizontalOptions = "FillAndExpand" Orientation = "Horizontal"
IsVisible = "{Binding isOutgoing}">
<local:ScaledStackLayout
VerticalOptions = "Fill"
HorizontalOptions = "EndAndExpand"
BackgroundColor = "Transparent"
Orientation = "Vertical"
Margin = "21,14,15,0"
Spacing = "0">
<local:ScaledStackLayout
Orientation = "Horizontal"
VerticalOptions = "Fill"
HorizontalOptions = "EndAndExpand"
Spacing = "0"
>
<local:CorneredView
CornerRadius = "15"
BackgroundColor = "#d3eaf6"
VerticalOptions = "Fill"
HorizontalOptions = "End"
>
<Label
VerticalOptions = "Fill"
HorizontalOptions = "Fill"
Text = "{Binding message}"
FontSize = "10"
TextColor = "Black"
Margin = "7,10,7,10"
LineBreakMode = "WordWrap"
/>
</local:CorneredView>
<Image
Margin = "0,11,7,0"
Source = "ic_msg_arrow_outgoing"
WidthRequest = "5"
HeightRequest = "10"
Aspect = "AspectFit"
BackgroundColor = "Transparent"
VerticalOptions = "Start"
/>
<ffimageloading:CachedImage
WidthRequest = "37"
HeightRequest = "37"
BackgroundColor = "Transparent"
VerticalOptions = "Start"
Aspect = "AspectFill"
Source = "{Binding sender.imageUrl}"
DownsampleToViewSize = "true"
DownsampleUseDipUnits = "true"
>
<ffimageloading:CachedImage.Transformations>
<fftransformations:CircleTransformation>
<x:Arguments>
<x:Double>2</x:Double>
<x:String>#FF8A07</x:String>
</x:Arguments>
</fftransformations:CircleTransformation>
</ffimageloading:CachedImage.Transformations>
</ffimageloading:CachedImage>
</local:ScaledStackLayout>
<Label
Margin = "0,3,0,0"
VerticalOptions = "Center"
HorizontalOptions = "Start"
Text = "{Binding formattedDateSent}"
HeightRequest = "10"
FontSize = "8"
TextColor = "#4D212121"/>
</local:ScaledStackLayout>
</local:ScaledStackLayout>
<!--INCOMING-->
<local:ScaledStackLayout
WidthRequest = "284"
VerticalOptions = "Fill"
BackgroundColor = "Transparent"
Orientation = "Vertical"
Margin = "15,14,21,0"
Spacing = "0"
IsVisible = "{Binding isOutgoing, Converter = {StaticResource inverter}}">
<local:ScaledStackLayout
Orientation = "Horizontal"
WidthRequest = "284"
VerticalOptions = "Fill"
Spacing = "0"
>
<ffimageloading:CachedImage
WidthRequest = "37"
HeightRequest = "37"
BackgroundColor = "Transparent"
VerticalOptions = "Start"
Aspect = "AspectFill"
Source = "{Binding sender.imageUrl}"
DownsampleToViewSize = "true"
DownsampleUseDipUnits = "true"
>
<ffimageloading:CachedImage.Transformations>
<fftransformations:CircleTransformation>
<x:Arguments>
<x:Double>2</x:Double>
<x:String>#FF8A07</x:String>
</x:Arguments>
</fftransformations:CircleTransformation>
</ffimageloading:CachedImage.Transformations>
</ffimageloading:CachedImage>
<Image
Margin = "7,15,0,0"
Source = "ic_msg_arrow_incoming"
WidthRequest = "5"
HeightRequest = "10"
Aspect = "AspectFit"
BackgroundColor = "Transparent"
VerticalOptions = "Start"
/>
<local:CorneredView
WidthRequest = "235"
VerticalOptions = "Fill"
CornerRadius = "15"
BackgroundColor = "#ECECEC"
IsClippedToBounds = "true"
>
<Label
VerticalOptions = "Fill"
HorizontalOptions = "FillAndExpand"
Text = "{Binding message}"
FontSize = "10"
TextColor = "Black"
Margin = "7,10,7,10"
LineBreakMode = "WordWrap"
/>
</local:CorneredView>
</local:ScaledStackLayout>
<Label
Margin = "0,3,0,0"
VerticalOptions = "Center"
HorizontalOptions = "End"
Text = "{Binding formattedDateSent}"
HeightRequest = "10"
FontSize = "8"
TextColor = "#4D212121"/>
</local:ScaledStackLayout>
</local:ScaledStackLayout>
<!--Message Group-->
<local:ScaledStackLayout
Margin = "0"
Padding = "0"
Spacing = "0"
Orientation = "Vertical"
VerticalOptions = "Fill"
IsVisible = "{Binding isGroupHeader}"
BackgroundColor = "Transparent"
>
<!--label and button-->
<local:ScaledStackLayout
Margin = "9,0,9,0"
HeightRequest = "19"
Orientation = "Horizontal"
Padding = "0,5,7,0"
BackgroundColor = "Transparent">
<Label
Text = "{Binding groupHeaderTitle}"
HorizontalOptions = "FillAndExpand"
HeightRequest = "8"
FontSize = "8"
TextColor = "#212121"
VerticalTextAlignment = "Center"
HorizontalTextAlignment = "Center"
BackgroundColor = "Transparent"/>
</local:ScaledStackLayout>
<BoxView
Margin = "9,0,9,0"
HorizontalOptions = "FillAndExpand"
HeightRequest = "1"
BackgroundColor = "#4D212121"/>
</local:ScaledStackLayout>
</local:ScaledStackLayout>
</local:ScaledViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
I will also attach the photos on both android and iOs
As you can see, the cells are overlapping.
The code I used to populate the listview is this:
public void OnSuccess(JObject response, BaseAPI caller)
{
if (Constants.isDebug)
{
JObject json = TestData.getTestData("conversation_messages_listed.json");
response = json;
}
ObservableCollection<Message> arrMessages = JsonConvert.DeserializeObject<ObservableCollection<Message>>(response["messages"].ToString(), new JsonSerializerSettings()
{
NullValueHandling = NullValueHandling.Ignore,
MissingMemberHandling = MissingMemberHandling.Ignore
});
lvConversations.ItemsSource = arrMessages;
}
Please help, I'm new to xamarin.