如何在 Xamarin 表单 macos 的条目（用于聊天）中添加自定义图像？

Question

我正在尝试创建一个支持添加文本和图像（自定义图像）的条目。现在我正在尝试在 macOS 中实现这一点。

到目前为止，我所做的是创建一个自定义控件，其中有一个图像列表，如果将新图像添加到条目中，我将添加到该控件中。添加后，它的想法是让它放在最后一个文本（或图像）的右侧。

控制：

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 渲染器：

[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;
    }
}
}

我现在的问题是将这一切绑定在一起。我创建了一个GetImageView，我可以在其中获得一个 NSView，但是我如何将它合并到前一个字符（或图像）的右侧，我不确定并且需要一些指导。

Answer 1

在此之前，我想说的是 Xamarin for MacOS 仍处于预览阶段，对于入门级，仍有一些功能待开发，可能会影响您的应用程序，如果您要发布您的应用程序，您应该仔细考虑和测试应用程序。您可以找到条目here的状态

如果我正确理解了您的问题，您正在尝试创建一个自定义条目，可以像这样将文本和图像放入其中：

文本[IMG1]abc[IMG2]...

这里有一些可能会提供一些想法的东西：how to implement a label with a image in the center。

它利用NSTextAttachment 来保存图像，并利用 NSMutableAttributedString]4 来保存整个字符串。不同之处在于，它只有一个图像，但您将在条目中有多个图像，因此您可能需要一个字典来将字符串中的占位符映射到实际图像。