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"
        xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
        xmlns:controls="clr-namespace:Messenger.UI.Controls;assembly=MessengeriOS"
        xmlns:conversationBubble="clr-namespace:Messenger.UI.Controls.ConversationBubble;assembly=MessengeriOS"
        xmlns:local="clr-namespace:Messenger.UI;assembly=MessengeriOS"
        x:Class="Messenger.UI.TextMessagingPage">
    <ContentPage.Resources>
        <ResourceDictionary>

        </ResourceDictionary>
    </ContentPage.Resources>

    <ContentPage.Content>
        <StackLayout>
            <controls:SkyNodeNavigationControl HeightRequest="40"/>

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

        </StackLayout>
    </ContentPage.Content>
</ContentPage>

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)
        {
            base.OnElementChanged(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);
                SetNativeControl(conversationBubbleView);
            }
        }
    }
}

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

http://pastebin.com/iuSntB88

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

Answers

Sign In or Register to comment.