Forum Xamarin.Forms
We are excited to announce that the Xamarin Forums are moving to the new Microsoft Q&A experience. Q&A is the home for technical questions and answers at across all products at Microsoft now including Xamarin!

We encourage you to head over to Microsoft Q&A for .NET for posting new questions and get involved today.

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=""


            <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.