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

Posted 2023-04-13

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

【英文标题】：How to add custom images in a entry (used for a chat) in Xamarin forms macos?

【发布时间】：2021-01-14 07:21:54

【问题描述】：

我正在尝试创建一个支持添加文本和图像（自定义图像）的条目。现在我正在尝试在 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，但是我如何将它合并到前一个字符（或图像）的右侧，我不确定并且需要一些指导。

【问题讨论】：

您好，NSTextField 似乎不包含rightView 的属性，与UITextField 相同。如果好消息会在这里更新，我会研究一下。

非常感谢！还在为此苦苦挣扎

【参考方案1】：

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

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

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

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

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

【讨论】：

非常感谢您的回答。我会检查一下，然后开始调整我的代码。可能会在堆栈上创建一个后续问题，但这肯定会引导我走向正确的方向。非常感谢