Having a really hard time getting Autolayout Constraints to properly size Items in a ListView

CullenJCullenJ USMember ✭✭
edited March 2017 in Xamarin.Forms

I am working on a Xamarin Forms project with a custom renderer. The goal is to ultimately create text bubbles in the iOS Style, but right now I'm just struggling to get messages to display properly. Here's my XAML:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"


            <controls:SkyNodeNavigationControl HeightRequest="40"/>

            <ListView ItemsSource="{Binding Messages}" SeparatorVisibility="None" HasUnevenRows="True" RowHeight="-1" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
                            <conversationBubble:ConversationBubbleView Text="{Binding Text}" Time="{Binding Time}" Direction="{Binding Direction}"/>


As you can see, I'm using a custom view called ConversationBubbleView that has a Binding Property for Text (the message body), Time (Sent/Received Time), and Direction (Sent or received, denoted by a string "MO" or "MT" respectively).

I wrote a custom renderer for this view in my iOS project that looks like this:

using Messenger.UI.Controls.ConversationBubble;
using Messenger.iOS.Controls.ConversationBubble;
using Xamarin.Forms;
using Xamarin.Forms.Platform.iOS;
using System;

[assembly: ExportRenderer(typeof(ConversationBubbleView), typeof(ConversationBubbleViewRenderer))]
namespace Messenger.iOS.Controls.ConversationBubble
    class ConversationBubbleViewRenderer: ViewRenderer<ConversationBubbleView, UIConversationBubbleView>
        UIConversationBubbleView conversationBubbleView;

        protected override void OnElementChanged(ElementChangedEventArgs<ConversationBubbleView> e)

            if (Control == null)
                // Instantiate the native control and assign it to the Control property with the SetNativeControl method
                conversationBubbleView = new UIConversationBubbleView(e.NewElement.Text, e.NewElement.Time, e.NewElement.Direction);

Which finally gets us to the interesting part, the custom iOS control called UIConversationBubbleView:


I'm adding constraints to each label and to the container view so that the height is unambiguous. However, when I test this out with iOS using dummy data, it looks like this:

My guess is that the view is not calculating the height correctly. What can I do to get it to render the items as a list?

Best Answer


Sign In or Register to comment.