Xamarin Forms: Add Clear Entry

Question

Can you point me in the right direction: how can I achieve a clear input button with behavior in Xamarin.Forms. The behavior would be as follows: When you click on the icon to delete the contents of the entry on the Android and iOS side, the content will be deleted.

By default, the recording control does not have this.

Result:

Answer 1

After some research, I managed to do this with effects.

Reducing is what you should do it in the Android project and in the iOS project separately.

Like Jason , this can be done with custom renders. But still you have to implement it in every Android / iOS project.

Android , , :

. , , / ic_clear_icon.png.

/// <summary>
    /// Adding a clear entry effect.
    /// </summary>
    public class ClearEntryEffect : PlatformEffect
    {
        /// <summary>
        /// Attach the effect to the control.
        /// </summary>
        protected override void OnAttached()
        {
            ConfigureControl();
        }

        protected override void OnDetached()
        {
        }

        private void ConfigureControl()
        {
            EditText editText = ((EditText)Control);
            editText.AddTextChangedListener(new OnTextChangedListener(editText));
            editText.FocusChange += EditText_FocusChange;
        }

        /// <summary>
        /// If the entry looses focus, delete the x icon.
        /// </summary>
        /// <param name="sender"></param>
        /// <param name="e"></param>
        private void EditText_FocusChange(object sender, Android.Views.View.FocusChangeEventArgs e)
        {
            var editText = (EditText)sender;
            if (e.HasFocus == false)
                editText.SetCompoundDrawablesRelativeWithIntrinsicBounds(0, 0, 0, 0);
        }
    }

    /// <summary>
    /// Adding an OnTextChangedListener to my entry.
    /// </summary>
    public class OnTextChangedListener : Java.Lang.Object, Android.Text.ITextWatcher
    {
        private EditText _editText;
        public OnTextChangedListener(EditText editText)
        {
            _editText = editText;
        }
        public void AfterTextChanged(IEditable s)
        {
        }

        public void BeforeTextChanged(ICharSequence s, int start, int count, int after)
        {
        }

        public void OnTextChanged(ICharSequence s, int start, int before, int count)
        {
            if (count != 0)
            {
                _editText.SetCompoundDrawablesRelativeWithIntrinsicBounds(0, 0, Resource.Drawable.ic_clear_icon, 0);
                _editText.SetOnTouchListener(new OnDrawableTouchListener());
            }
            else
                _editText.SetCompoundDrawablesRelativeWithIntrinsicBounds(0, 0, 0, 0);
        }
    }

    /// <summary>
    /// Adding a Touch listener so it can be clicked in order to remove the text.
    /// </summary>
    public class OnDrawableTouchListener : Java.Lang.Object, Android.Views.View.IOnTouchListener
    {
        public bool OnTouch(Android.Views.View v, MotionEvent e)
        {
            if (v is EditText && e.Action == MotionEventActions.Up)
            {
                EditText editText = (EditText)v;

                if (editText.Text != null)
                    editText.SetCompoundDrawablesRelativeWithIntrinsicBounds(0, 0, Resource.Drawable.ic_clear_icon, 0);

                if (editText.GetCompoundDrawables()[2] != null)
                {
                    //If the region on which i tapped is the region with the X the text will be cleaned
                    if (e.RawX >= (editText.Right - editText.GetCompoundDrawables()[2].Bounds.Width()))
                    {
                        editText.Text = string.Empty;
                        return true;
                    }
                }
            }

            return false;
        }
    }

iOS . :

 public class ClearEntryEffect : PlatformEffect
    {
        protected override void OnAttached()
        {
            ConfigureControl();
        }

        protected override void OnDetached()
        {
        }

        private void ConfigureControl()
        {
            ((UITextField)Control).ClearButtonMode = UITextFieldViewMode.WhileEditing;
        }
    } 

PCL, ClearEntryEffect ( Android/iOS).

, XAML, .

public class ClearEntryEffect : RoutingEffect
    {
       public ClearEntryEffect() : base("Effects.ClearEntryEffect")
        {
        }
    }

(PCL ) xaml:

1) , : xmlns: effects = "clr-namespace: YourNamespace.Common.Effects"

2) :

<Entry x:Name="OrderNo"
Text="{Binding OrderNo, Mode=TwoWay}"
   <Entry.Effects>
       <effects:ClearEntryEffect/>
   </Entry.Effects>
</Entry>

Answer 2

, , , Android- android:drawableRight. iOS RightView UITextview.

Entry Grid Image.

   <Grid>
            <Entry></Entry>
            <Image Source="your image"
                   HeightRequest="24" // some height
                   WidthRequest="24" //some width
                   HorizontalOptions="End"
                   .... some margins>
            </Image>
   </Grid>

Answer 3

This works on both Android and iOS.

Here is my haml.

<Grid>
   <Entry x:Name="search" TextChanged="SearchChanged" Placeholder="Search"/>
   <Image x:Name="clearSearch" Source="delete.png" HeightRequest="16" WidthRequest="16" HorizontalOptions="End">
         <Image.GestureRecognizers>
               <TapGestureRecognizer Tapped="OnSearchTap" NumberOfTapsRequired="1" />
         </Image.GestureRecognizers>
   </Image>
</Grid>

Here is my C #

    private void OnSearchTap(object sender, EventArgs args)
    {
        search.Text = "";
    }