Xamarin Forms: Alignment issue with HorizontalOptions property

Question

Xamarin Forms: Alignment issue with HorizontalOptions property

Sreejith Sree 1,251

I have implemented a chat UI in my project. Send messages are showing on the left side and received messages are showing on the right side.

For showing messages on the left and right side I have created a new variable on the model class like below:

private LayoutOptions horizontalOptions;
public LayoutOptions HorizontalOptions
{
    get => horizontalOptions;
    set
    {
        horizontalOptions = value;
        NotifyPropertyChanged(nameof(horizontalOptions));
    }
}

Based on the username value I set the HorizontalOptions value like below:

string myUsername = "myusername";
string tweetUser = username in the message;
if (myUsername == tweetUser)
{
    tweet.HorizontalOptions = LayoutOptions.StartAndExpand;
}
else
{
    tweet.HorizontalOptions = LayoutOptions.EndAndExpand;
}

This feature is working fine when loading messages initially. When I send a new message the alignment is breaking. Some messages are moving to the left and some are moving to the right. If I tap the editor after sending a new message the alignment issues are going. Don't know what is the real issue behind this.

I have uploaded a sample project here.

Also, one screen recorder video here.

0 comments

Answer accepted by question author

0 additional answers

Your answer

Answer 1

Hello,

Welcome to our Microsoft Q&A platform!

For this function, you could use the DataTemplateSelector to consume a different style for the incoming message and outgoing message.

Check the code:

   <ContentPage.Resources>  
       <ResourceDictionary>  
           <local:CustomDataTemplateSelector x:Key="MessageTemplateSelector"/>  
       </ResourceDictionary>  
   </ContentPage.Resources>  
   <ContentPage.Content>  
       <StackLayout>  
           <ListView ...  
               ItemTemplate="{StaticResource MessageTemplateSelector}" />  
           ...  
       </StackLayout>  
   </ContentPage.Content>

Model class

   public class MessageModel  
   {  
       private bool isIncoming;  
       public bool IsIncoming  
       {  
           get => isIncoming;  
           set  
           {  
               isIncoming = value;  
               NotifyPropertyChanged(nameof());  
           }  
       }  
       ...  
   }

Custom message DataTemplateSelector class.

   public class CustomDataTemplateSelector : DataTemplateSelector  
   {  
       private readonly DataTemplate incomingDataTemplate;  
       private readonly DataTemplate outgoingDataTemplate;  
     
       public MyDataTemplateSelector()  
       {  
           this.incomingDataTemplate = new DataTemplate(typeof(IncomingViewCell));  
           this.outgoingDataTemplate = new DataTemplate(typeof(OutgoingViewCell));  
       }  
       protected override DataTemplate OnSelectTemplate(object item, BindableObject container)  
       {  
           var messageVm = item as MessageModel;  
           if (messageVm == null)  
               return null;  
           return messageVm.IsIncoming ? this.incomingDataTemplate : this.outgoingDataTemplate;  
       }  
   }

You could refer to this link: https://github.com/jamesmontemagno/app-monkeychat

Best Regards,

Jarvan Zhang

If the response is helpful, please click "Accept Answer" and upvote it.

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

Share via

Xamarin Forms: Alignment issue with HorizontalOptions property

0 additional answers

Your answer