Xamarin Forms：具有内联标记支持的自定义条目 [关闭]

Posted 2023-03-25

【中文标题】Xamarin Forms：具有内联标记支持的自定义条目 [关闭]

【英文标题】：Xamarin Forms: custom entry with inline tag support [closed]

【发布时间】：2018-01-23 19:51:41

【问题描述】：

我正在尝试构建一个 XF 应用程序，它允许用户输入文本并标记地点列表（类似于您在 WhatsApp、Outlook 应用程序甚至 Twitter 的主题标签上标记某人的方式）。我仍然从 XF 开始。谁能指出我正确的方向？我发现最多的是 TagEntryView 插件，它很棒，但我需要能够在线标记“地点”。

示例： 我明天想见@Paris、@Chennai。

提前致谢:)

【参考方案1】：

我想提供一些关于我们自己使用 XF 创建这样一个控件的想法，而不是直接使用第三方库。 （顺便说一下，我不知道有哪个第三方库支持这个功能。）

正如我们常说的：实现 Custom Renderers 以使用来自 PCL 的目标平台的本机控件。

所以在这里根据您的要求，我们可以尝试自定义一个Entry。

在 PCL 中像这样创建我们的条目：

public class TagEntry : Entry

那么，对于安卓平台：

[assembly: ExportRenderer(typeof(TagEntry), typeof(TagEntryRenderer))]

namespace YourNameSpace.Droid

    public class TagEntryRenderer : EntryRenderer
    
        protected override void OnElementChanged(ElementChangedEventArgs<Entry> e)
        
            base.OnElementChanged(e);

            if (e.NewElement != null)
                Control.AfterTextChanged += Control_AfterTextChanged;

            if (e.OldElement != null)
                Control.AfterTextChanged -= Control_AfterTextChanged;
        

        private void Control_AfterTextChanged(object sender, AfterTextChangedEventArgs e)
        
            //detect if '@' is entered.
            if (e.Editable.LastOrDefault() == '@')
            
                //show a popup list for selection.
                //I here use a simple menu for testing, you should be able to change it to your list popup.
                PopupMenu popup = new PopupMenu(Xamarin.Forms.Forms.Context, Control);
                popup.MenuInflater.Inflate(Resource.Menu.testmenu, popup.Menu);
                popup.Show();
                popup.MenuItemClick += (ss, ee) =>
                
                    var item = ee.Item.TitleFormatted;
                    e.Editable.Delete(e.Editable.Length() - 1, e.Editable.Length());
                    SpannableString spannable = new SpannableString("@" + item);
                    spannable.SetSpan(new ForegroundColorSpan(android.Graphics.Color.Blue), 0, item.Length() + 1, SpanTypes.ExclusiveExclusive);
                    e.Editable.Append(spannable);
                    popup.Dismiss();
                ;
            
        
    

渲染图像：

订阅原生控件的TextChanged事件是个思路，如果你也对UWP平台的实现感兴趣，可以试试。对于ios平台？抱歉，我也不熟……

【讨论】：

如何显示具有预定义值的列表并且方向应该向上？命名空间是什么？

我也需要iOS版本以及如何制作标签以便可以一次删除所选项目而不是逐字符删除。