Xamarin表单：添加清除条目

你能给我指出正确的方向吗：如何在Xamarin中实现。使用行为形成一个清晰的输入按钮。 其行为可能是：在安卓和iOS端点击清除图标时，条目内容将被删除

默认情况下，条目控件没有此项

结果将是：

---

我认为你需要渲染器来实现这一点，例如在android平台集合中

android:drawableRight

。在iOS平台上设置

UITextview

的RightView属性

另一个选项是使用

图像

将

条目

包装在

网格

中

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

---

经过一些研究，我成功地做到了这一点

缩小规模是，您必须在Android项目和iOS项目上分别进行

就像建议的那样，它也可以通过自定义渲染器来完成。但您仍然必须在每个Android/iOS项目上实现它

在android项目端，您可以通过添加如下效果来实现：

注意：在共享代码之前，我必须通知您，您必须在参考资料/drawable中有一个名为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;
        }
    }

现在，您在PCL项目上创建了一个effect类，其中引用了两个ClearEntryEffect类（来自Android/iOS项目）

需要这个effect类，因此可以从声明条目的XAML文件中引用它

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

现在您只需在共享表单项目（在我的例子中是PCL）中将其引用到xaml中：

1） 参照效果所在的命名空间： xmlns:effects=“clr命名空间：YourNamespace.Common.effects”

2） 将效果添加到条目：

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

---

这在Android和iOS上都有效

这是我的xaml

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

新的Xamarin.Forms中添加了
ClearButtonVisibility
属性，因此现在不需要自定义渲染器。例如：

<Entry Text="Xamarin.Forms"
       ClearButtonVisibility="WhileEditing" />



请参见Xamarin.Forms文档。
我想您需要一个自定义渲染器来完成这项工作，而不仅仅是一个行为。您还可以使用自定义控件，使用entry、image和Grid来完成这项工作。要完成这项工作，我还需要“[assembly:ResolutionGroupName（“Effects”）][assembly:ExportEffect（typeof（ClearEntryEffect），“ClearEntryEffect”）]“有必要修复键盘外观的问题。在清除图标上的编辑文本并取消焦点后，键盘将不会再次调用和显示。要在Android中修复它，只需添加！string.IsNullOrEmpty（editText.Text）到OnTouch:if（e.RawX>=（editText.Right-editText.GetCompoundDrawables（）[2].Bounds.Width（））和&！string.IsNullOrEmpty（editText.Text））
    private void OnSearchTap(object sender, EventArgs args)
    {
        search.Text = "";
    }

<Entry Text="Xamarin.Forms"
       ClearButtonVisibility="WhileEditing" />