Xamarin 窗体将占位符添加到 iOS 编辑器

Question

您将如何在适用于iOS的Xamarin Forms中向编辑器添加占位符？

我尝试通过自定义渲染器添加为 Control.Layer，但找不到与之相关的属性。

请帮忙。

Answer 1

尝试以下代码，该代码最初由 User149286 在 Microsoft Xamarin 论坛上建议：

PCL：

using System;
using Xamarin.Forms;
namespace ABC.CustomViews
{
    public class PlaceholderEditor : Editor
    {
        public static readonly BindableProperty PlaceholderProperty =
            BindableProperty.Create<PlaceholderEditor, string>(view => view.Placeholder, String.Empty);
        public PlaceholderEditor()
        {
        }
        public string Placeholder
        {
            get
            {
                return (string)GetValue(PlaceholderProperty);
            }
            set
            {
                SetValue(PlaceholderProperty, value);
            }
        }
    }
}

iOS （CustomeRenderer） ：

using UIKit;
using ABC.CustomViews;
using ABC.iOS.CustomRenderer;
using Xamarin.Forms;
using Xamarin.Forms.Platform.iOS;
[assembly: ExportRenderer(typeof(PlaceholderEditor), typeof(PlaceholderEditorRenderer))]
namespace ABC.iOS.CustomRenderer
{
    public class PlaceholderEditorRenderer : EditorRenderer
    {
        private string Placeholder { get; set; }
        protected override void OnElementChanged(ElementChangedEventArgs<Editor> e)
        {
            base.OnElementChanged(e);
            var element = this.Element as PlaceholderEditor;
            if (Control != null && element != null)
            {
                Placeholder = element.Placeholder;
                Control.TextColor = UIColor.LightGray;
                Control.Text = Placeholder;
                Control.ShouldBeginEditing += (UITextView textView) =>
                {
                    if (textView.Text == Placeholder)
                    {
                        textView.Text = "";
                        textView.TextColor = UIColor.Black; // Text Color
                    }
                    return true;
                };
                Control.ShouldEndEditing += (UITextView textView) =>
                {
                    if (textView.Text == "")
                    {
                        textView.Text = Placeholder;
                        textView.TextColor = UIColor.LightGray; // Placeholder Color
                    }
                    return true;
                };
            }
        }
    }
}

用法：

  _replyEditor = new PlaceholderEditor
  {
        Placeholder = "Placeholder Text"
  };

Answer 2

下面是安卓的代码

using System;
using MyApp;
using MyApp.Droid;
using Xamarin.Forms;
using Xamarin.Forms.Platform.Android;
[assembly: ExportRenderer(typeof(CustomEditor), typeof(CustomEditorRenderer))]
namespace MyApp.Droid
{

    public class CustomEditorRenderer : EditorRenderer
    {
        public CustomEditorRenderer()
        {
        }
        protected override void OnElementChanged(ElementChangedEventArgs<Editor> e)
        {
            base.OnElementChanged(e);
            if (e.NewElement != null)
            {
                var element = e.NewElement as CustomEditor;
                this.Control.Hint = element.Placeholder;
                Control.Gravity = Android.Views.GravityFlags.Start;
                Control.SetBackgroundColor(global::Android.Graphics.Color.White);
                Control.SetPadding(15,15,15,15);
            }
        }
   }

Answer 3

下面是一个 Xamarin 窗体版本，它允许将 placehodler 包含在编辑器的初始值设定项中，并且如果在代码中设置 Text 属性，还可以处理一致的行为（即，如果 Editor.Text="，它将以浅灰色显示占位符。

using System;
using Xamarin.Forms;
namespace CrowdWisdom.Controls
{
public class EditorPlaceHolder : Editor
{
    String placeHolderText = "";
    public EditorPlaceHolder(String placeholder)
    {
        Text = placeholder;
        TextColor = Color.LightGray;
        this.Focused += EditorPlaceHolder_Focused;
        this.Unfocused += EditorPlaceHolder_Unfocused;
        this.placeHolderText = placeholder;
    }
    private void EditorPlaceHolder_Focused(object sender, FocusEventArgs e) //triggered when the user taps on the Editor to interact with it
    {
        if (Empty())
        {
            base.Text = "";
            this.TextColor = Color.Black;
        }
    }
    private void EditorPlaceHolder_Unfocused(object sender, FocusEventArgs e) //triggered when the user taps "Done" or outside of the Editor to finish the editing
    {
        if (Empty()) //if there is text there, leave it, if the user erased everything, put the placeholder Text back and set the TextColor to gray
        {
            this.Text = placeHolderText;
            this.TextColor = Color.LightGray;
        }
    }
    public String PlaceHolderText
    {
        get
        {
            return this.placeHolderText;
        }
        set
        {
            if (this.Empty())
            {
                this.Text = value;
                this.TextColor = Color.LightGray;
            }
            this.placeHolderText = value;
        }
    }
    public bool Empty()
    {
        return (this.Text.Equals("") || this.Text.Equals(this.placeHolderText));
    }
    public virtual new string Text
    {
        get
        {
            return base.Text;
        }
        set
        {
            base.Text = value;
            if (Empty())
            {
                this.TextColor = Color.LightGray;
                base.Text = this.placeHolderText;
            }
            else
            {
                this.TextColor = Color.Black;
            }
        }
    }
}
}

Answer 4

Xamarin 窗体将占位符添加到适用于 Android 的编辑器

using System;
using System.Collections.Generic;
using System.Text;
using Xamarin.Forms;
namespace MyCare.Renderers
{
    class PlaceholderEditor : Editor
    {
        public static readonly BindableProperty PlaceholderProperty = BindableProperty.Create<PlaceholderEditor, string>(view => view.Placeholder, String.Empty);
        public PlaceholderEditor()
        {
        }
        public string Placeholder
        {
            get
            {
                return (string)GetValue(PlaceholderProperty);
            }
            set
            {
                SetValue(PlaceholderProperty, value);
            }
        }
    }
}
//Renderer
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using Android.App;
using Android.Content;
using Android.OS;
using Android.Runtime;
using Android.Views;
using Android.Widget;
using Xamarin.Forms;
using MyCare.Renderers;
using MyCare.Droid.Renderers;
using Xamarin.Forms.Platform.Android;
[assembly: ExportRenderer(typeof(PlaceholderEditor), typeof(PlaceholderEditorRenderer))]
namespace MyCare.Droid.Renderers
{
    class PlaceholderEditorRenderer : EditorRenderer
    {
        private string Placeholder { get; set; }
        protected override void OnElementChanged(ElementChangedEventArgs<Editor> e)
        {
            base.OnElementChanged(e);
            var element = this.Element as PlaceholderEditor;
            if (Control != null && element != null)
            {
                Placeholder = element.Placeholder;
                Control.SetTextColor(Android.Graphics.Color.Black);
                Control.SetHintTextColor(Android.Graphics.Color.LightGray);
                Control.Hint = element.Placeholder;
                Control.SetBackgroundColor(Android.Graphics.Color.Transparent);
            }
        }
    }
}

Answer 5

继承自 Jay 的解决方案。下面是 XAML 中的用法

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
         xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
         xmlns:cstCtrl="clr-namespace:TeamCollaXform.Views"
         x:Class="TeamCollaXform.Views.MailComposePage">

。

<cstCtrl:PlaceholderEditor Grid.Row="2" x:Name="txtContent" Text="" HeightRequest="750" Placeholder="Compose..."/>