How to add custom images in a entry (used for a chat) in Xamarin forms macos?

Issue

I am trying to create an entry that supports the addition of both text but also images (custom ones). Right now i am trying to achieve this in macOS.

What I have gone ahead and done so far is to create a custom control, where i have a List of images, that i add to if a new image is added to the entry. Once added, the idea is for it to go on the right side of the last text (or image).

Control:

public class ChatEntry : Entry
{
    public ChatEntry()
    {
        this.HeightRequest = 50;
    }

    public static readonly BindableProperty ImageProperty =
        BindableProperty.Create(nameof(Images), typeof(List<string>), typeof(ChatEntry), string.Empty);

    public static readonly BindableProperty LineColorProperty =
        BindableProperty.Create(nameof(LineColor), typeof(Xamarin.Forms.Color), typeof(ChatEntry), Color.White);

    public static readonly BindableProperty ImageHeightProperty =
        BindableProperty.Create(nameof(ImageHeight), typeof(int), typeof(ChatEntry), 40);

    public static readonly BindableProperty ImageWidthProperty =
        BindableProperty.Create(nameof(ImageWidth), typeof(int), typeof(ChatEntry), 40);

    public Color LineColor
    {
        get { return (Color)GetValue(LineColorProperty); }
        set { SetValue(LineColorProperty, value); }
    }

    public int ImageWidth
    {
        get { return (int)GetValue(ImageWidthProperty); }
        set { SetValue(ImageWidthProperty, value); }
    }

    public int ImageHeight
    {
        get { return (int)GetValue(ImageHeightProperty); }
        set { SetValue(ImageHeightProperty, value); }
    }

    public List<string> Images
    {
        get { return (List<string>)GetValue(ImageProperty); }
        set { SetValue(ImageProperty, value); }
    }
}

MacOS renderer:

[assembly: ExportRenderer(typeof(ChatEntry), typeof(ChatEntryRenderer))]
namespace Project.MacOS.Renderers
{
public class ChatEntryRenderer : EntryRenderer
{
    protected override void OnElementChanged(ElementChangedEventArgs<Entry> e)
    {
        base.OnElementChanged(e);

        if (e.OldElement != null || e.NewElement == null)
            return;

        var element = (ChatEntry)this.Element;
        var textField = this.Control;
        if (element.Images != null)
        {
            // TODO : Logic GetImageView
        }

        CALayer bottomBorder = new CALayer
        {
            Frame = new CGRect(0.0f, element.HeightRequest - 1, this.Frame.Width, 1.0f),
            BorderWidth = 2.0f,
            BorderColor = element.LineColor.ToCGColor()
        };

        textField.Layer.AddSublayer(bottomBorder);
        textField.Layer.MasksToBounds = true;
    }

    private NSView GetImageView(string imagePath, int height, int width)
    {
        var uiImageView = new NSImageView()
        {
            Frame = new RectangleF(0, 0, width, height)
        };

        uiImageView.Image = NSImage.ImageNamed(imagePath);

        NSView objLeftView = new NSView(new System.Drawing.Rectangle(0, 0, width + 10, height));
        objLeftView.AddSubview(uiImageView);

        return objLeftView;
    }
}
}

Issue i have now is to bind this all together. I have created a GetImageView where I can get in return a NSView, but how i incorporate this so that it places on the right side of the prior character (or image), i am unsure and would need some guidance.

Solution

Before everything, I'd like to say that Xamarin for MacOS is still in preview, for Entry, there's still some features that pending development and may affect your app, you should consider and test carefully if you're gonna release your app. You can find status for entry here

If I understood your problem correctly, you're trying to create a custom entry that can put both texts and images inside like this:

text[IMG1]abc[IMG2]...

and here's something that might give some ideas: how to implement a label with a image in the center.

It's leveraging NSTextAttachment to hold the image and NSMutableAttributedString]4 to hold the entire string in entry. The difference is that, it only have one image, but you're going to have several images in the entry, so you'll probably need a dictionary to map the placeholder in the string with the actual image.

Answered By - Nicole Lu - MSFT