Xamarin Forms实现内嵌图片Entry及iOS/Android渲染方案

以下方案完全兼容iOS、Android双平台，支持直接绑定邮箱验证状态自动切换图标，无需依赖已废弃的第三方控件库。

第一步：共享层自定义控件定义 #

在共享项目中创建继承自Entry的自定义控件，添加状态绑定所需的可绑定属性：

// 放在共享项目的Controls目录下即可
public class IconEntry : Entry
{
    /// <summary>
    /// 绑定邮箱是否已验证的状态属性
    /// </summary>
    public static readonly BindableProperty IsEmailVerifiedProperty = BindableProperty.Create(
        nameof(IsEmailVerified),
        typeof(bool),
        typeof(IconEntry),
        default(bool));

    public bool IsEmailVerified
    {
        get => (bool)GetValue(IsEmailVerifiedProperty);
        set => SetValue(IsEmailVerifiedProperty, value);
    }

    /// <summary>
    /// 验证通过时显示的图标
    /// </summary>
    public static readonly BindableProperty VerifiedIconProperty = BindableProperty.Create(
        nameof(VerifiedIcon),
        typeof(ImageSource),
        typeof(IconEntry),
        default(ImageSource));

    public ImageSource VerifiedIcon
    {
        get => (ImageSource)GetValue(VerifiedIconProperty);
        set => SetValue(VerifiedIconProperty, value);
    }

    /// <summary>
    /// 未验证时显示的图标
    /// </summary>
    public static readonly BindableProperty UnverifiedIconProperty = BindableProperty.Create(
        nameof(UnverifiedIcon),
        typeof(ImageSource),
        typeof(IconEntry),
        default(ImageSource));

    public ImageSource UnverifiedIcon
    {
        get => (ImageSource)GetValue(UnverifiedIconProperty);
        set => SetValue(UnverifiedIconProperty, value);
    }

    /// <summary>
    /// 图标与输入文本的间距
    /// </summary>
    public static readonly BindableProperty IconSpacingProperty = BindableProperty.Create(
        nameof(IconSpacing),
        typeof(int),
        typeof(IconEntry),
        8);

    public int IconSpacing
    {
        get => (int)GetValue(IconSpacingProperty);
        set => SetValue(IconSpacingProperty, value);
    }
}

第二步：Android平台渲染器实现 #

在Android项目中添加自定义渲染器，利用原生EditText的右侧复合绘制能力承载图标，监听状态变化自动切换：

[assembly: ExportRenderer(typeof(IconEntry), typeof(IconEntryRenderer))]
namespace YourApp.Droid.Renderers
{
    public class IconEntryRenderer : EntryRenderer
    {
        public IconEntryRenderer(Context context) : base(context) { }

        protected override void OnElementChanged(ElementChangedEventArgs<Entry> e)
        {
            base.OnElementChanged(e);
            if (Control != null && e.NewElement is IconEntry entry)
            {
                // 预留图标显示空间，避免输入文本覆盖图标
                Control.SetPadding(Control.PaddingLeft, Control.PaddingTop, 
                    Control.PaddingRight + 50, Control.PaddingBottom);
                UpdateIconState();
            }
        }

        protected override void OnElementPropertyChanged(object sender, PropertyChangedEventArgs e)
        {
            base.OnElementPropertyChanged(sender, e);
            // 监听验证状态变化，实时更新图标
            if (e.PropertyName == IconEntry.IsEmailVerifiedProperty.PropertyName)
            {
                UpdateIconState();
            }
        }

        private void UpdateIconState()
        {
            var entry = Element as IconEntry;
            if (entry == null) return;

            var currentSource = entry.IsEmailVerified ? entry.VerifiedIcon : entry.UnverifiedIcon;
            if (currentSource == null)
            {
                Control.SetCompoundDrawablesRelativeWithIntrinsicBounds(null, null, null, null);
                return;
            }

            var iconDrawable = currentSource.GetDrawableAsync(Context).Result;
            // 固定图标尺寸，避免拉伸变形，可根据设计稿调整数值
            iconDrawable.SetBounds(0, 0, 36, 36);
            Control.SetCompoundDrawablesRelativeWithIntrinsicBounds(null, null, iconDrawable, null);
            Control.CompoundDrawablePadding = entry.IconSpacing;
        }
    }
}

第三步：iOS平台渲染器实现 #

在iOS项目中添加自定义渲染器，利用原生UITextField的RightView承载图标：

[assembly: ExportRenderer(typeof(IconEntry), typeof(IconEntryRenderer))]
namespace YourApp.iOS.Renderers
{
    public class IconEntryRenderer : EntryRenderer
    {
        private UIImageView _iconContainer;
        protected override void OnElementChanged(ElementChangedEventArgs<Entry> e)
        {
            base.OnElementChanged(e);
            if (Control != null && e.NewElement is IconEntry entry)
            {
                _iconContainer = new UIImageView(new CGRect(0, 0, 18, 18))
                {
                    ContentMode = UIViewContentMode.ScaleAspectFit
                };
                Control.RightView = _iconContainer;
                // 输入状态下始终显示图标
                Control.RightViewMode = UITextFieldViewMode.Always;
                UpdateIconState();
            }
        }

        protected override void OnElementPropertyChanged(object sender, PropertyChangedEventArgs e)
        {
            base.OnElementPropertyChanged(sender, e);
            if (e.PropertyName == IconEntry.IsEmailVerifiedProperty.PropertyName)
            {
                UpdateIconState();
            }
        }

        private void UpdateIconState()
        {
            var entry = Element as IconEntry;
            if (entry == null || _iconContainer == null) return;

            var currentSource = entry.IsEmailVerified ? entry.VerifiedIcon : entry.UnverifiedIcon;
            _iconContainer.Image = currentSource?.GetUIImageAsync().Result;
        }
    }
}

快速替代方案（无需写平台渲染代码） #

如果不想实现自定义渲染器，可以直接用Grid布局叠放实现：

• Grid只设1行1列
• Entry放在Grid里，设置右侧内边距留出图标位置
• Image放在Grid里，设置HorizontalOptions="End"，绑定状态切换图标源
  这种方式双端表现一致，开发成本更低，适合简单场景。

使用示例 #

在XAML页面中直接引用控件，绑定对应ViewModel属性即可：

<StackLayout Padding="24" Spacing="16">
    <local:IconEntry
        Placeholder="请输入邮箱地址"
        Keyboard="Email"
        HeightRequest="48"
        VerifiedIcon="ic_verified.png"
        UnverifiedIcon="ic_unverified.png"
        IsEmailVerified="{Binding IsUserEmailConfirmed}"/>
</StackLayout>

注意：使用前将图标文件放到Android项目的Resources/drawable目录、iOS项目的Resources目录，确保生成操作设置正确。如果需要把图标放在输入框左侧，只需要调整Android端复合绘制的位置参数、iOS端改用LeftView即可，逻辑完全一致。

内容的提问来源于stack exchange，提问作者SarPa