Reputation: 199

Xamarin Forms adding a placeholder to an Editor for iOS

How would you add a placeholder to an Editor in Xamarin Forms for iOS?

I tried adding through custom renderer as Control.Layer but could not find a property related to it.

Please help.

Upvotes: 2

Answers (5)

anon

Reputation:

Try the following code, originally suggested by User149286 on Microsoft Xamarin forums:

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

Usage :

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

Upvotes: 7

CodeSi

Reputation: 421

Inherit from Jay's solution. Here is a usage in 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..."/>

Upvotes: 0

Anh Duy

Reputation: 1183

Xamarin Forms adding a placeholder to an Editor for 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);

            }
        }
    }
}

Upvotes: 0

GGizmos

Reputation: 3773

Here is a Xamarin forms version that allows a placehodler to be included in the initializer of the Editor, and also handles consistent behavior if the Text property is set in code (i.e. if Editor.Text="" it will show the placeholder in light gray.

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

        }

    }
}
}

Upvotes: 1

AbdulBasit

Reputation: 1409

below is the code for android

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

   }

Upvotes: 2

Xamarin Forms adding a placeholder to an Editor for iOS

Answers (5)

Related Questions