Is there an equivalent of html datalist in Xamarin.Forms, mechanism that would allow to select predefined values but also a free-text entry?

Question

我們正在構建一個 Xamarin forms 應用程序。

其中一個字段應該是 select，您可以在其中選擇一個預定義值或在文本字段中輸入自由文本值。

在 HTML 中，可以使用<datalist>解決它

 <input list="browsers" name="browser" id="browser"> <datalist id="browsers"> <option value="Edge"> <option value="Firefox"> <option value="Chrome"> <option value="Opera"> <option value="Safari"> </datalist>

Xamarin.Forms 中是否有等效的 HTML 數據列表控件，允許選擇值和自由文本條目？

如果沒有，如何在 iOS 和 Android 中實現這種功能（選擇值和自由文本）？ 因為它確實感覺像是一個很常見的場景。

Answer 1

回答

我推薦使用Syncfusion.Xamarin.SfAutoComplete NuGet Package 。

注意： Syncfusion 可以通過其社區許可證免費使用。

我整理了一個示例應用程序，演示如何使用Syncfusion.Xamarin.SfAutoComplete ： https://github.com/brminnick/AutoCompleteSample

演練

要查看本演練中完成的代碼，請訪問https://github.com/brminnick/AutoCompleteSample

1.安裝Syncfusion.Xamarin.SfAutoComplete NuGet Package

1. In Visual Studio, add the Syncfusion.Xamarin.SfAutoComplete NuGet Package to your iOS project, Android project and .NET Standard Project (if applicable).

2.在iOS上初始化Syncfusion.Xamarin.SfAutoComplete

1. 在iOS項目中，打開AppDelegate.cs
2. 在AppDelegate.cs文件中，在AppDelegate.FinishedLaunching方法中，添加new Syncfusion.SfAutoComplete.XForms.iOS.SfAutoCompleteRenderer(); ，像這樣：

[Register(nameof(AppDelegate))]
public partial class AppDelegate : global::Xamarin.Forms.Platform.iOS.FormsApplicationDelegate
{
    public override bool FinishedLaunching(UIApplication app, NSDictionary options)
    {
        new Syncfusion.SfAutoComplete.XForms.iOS.SfAutoCompleteRenderer();

        global::Xamarin.Forms.Forms.Init();
        LoadApplication(new App());

        return base.FinishedLaunching(app, options);
    }
}

3.在Xamarin.Forms中使用Syncfusion.Xamarin.SfAutoComplete

這是使用 Syncfusion.Xamarin.SfAutoComplete 的 Xamarin.Forms 應用程序的示例：

using System.Collections.Generic;
using Syncfusion.SfAutoComplete.XForms;
using Xamarin.Forms;

namespace AutoCompleteSample
{
    public class App : Application
    {
        public App() => MainPage = new AutoCompletePage();
    }

    class AutoCompletePage : ContentPage
    {
        public AutoCompletePage()
        {
            Content = new SfAutoComplete
            {
                HeightRequest = 40,
                AutoCompleteSource = new List<string>
                {
                    "Edge",
                    "Firefox",
                    "Chrome",
                    "Opera",
                    "Safari",
                }
            };
        }
    }
}

演示

這個 GIF 是使用這個完整的示例應用程序生成的： https://github.com/brminnick/AutoCompleteSample

Answer 2

Xamarin.Forms 中是否有等效的 HTML 數據列表控件，它允許選擇值和自由文本條目？

Xamarin.Forms 沒有相同的控件，但您可以創建自定義控件以具有這些功能。

包含 Listview、Entry 和 Stacklayout 的自定義控件。

nuget XLabs.Forms

Install-Package XLabs.Forms -Version 2.0.5782

https://github.com/XLabs/Xamarin-Forms-Labs/blob/master/src/Forms/XLabs.Forms/Controls/AutoCompleteView.cs

然后使用這個自定義控件 AutoCompleteView。

<ContentPage.Resources>
    <!--  this isn't working yet  -->
    <DataTemplate x:Key="SugestionItemTemplate">
        <ViewCell Height="60">
            <ViewCell.View>
                <StackLayout HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
                    

                    <Label Text="{Binding .}" VerticalOptions="Center" />
                </StackLayout>
            </ViewCell.View>
        </ViewCell>
    </DataTemplate>
</ContentPage.Resources>
<ContentPage.Content>
    <StackLayout>
        <local:AutoCompleteView
            Placeholder="type 'firstname'"
            SearchCommand="{Binding SearchCommand}"
            SelectedItem="{Binding SelectedItem}"
            ShowSearchButton="False"
            SuggestionItemDataTemplate="{StaticResource SugestionItemTemplate}"
            Suggestions="{Binding Items, Mode=TwoWay}" />
    </StackLayout>
</ContentPage.Content>

背襯class

public class listviewmodel:ViewModelBase
{
    public ObservableCollection<string> Items { get; set; }
    private Command<string> _searchCommand;
    private string _selecteditem;

    public listviewmodel()
    {
        Items = new ObservableCollection<string>();
        Items.Add("cherry");
        Items.Add("cherry1");
        Items.Add("cherry2");
        Items.Add("cherry3");
        Items.Add("cherry4");
        Items.Add("wendy");
        Items.Add("barry");
        Items.Add("nico");
        Items.Add("leo");
    }
    public Command<string> SearchCommand
    {
        get
        {
            return _searchCommand ?? (_searchCommand = new Command<string>(
                obj => { },
                obj => !string.IsNullOrEmpty(obj.ToString())));
        }
    }


    public string SelectedItem
    {
        get
        {
            return _selecteditem;
        }
        set
        {
            _selecteditem = value;
            RaisePropertyChanged("SelectedItem");
        }
    }
}

viewmodelbase 是一個實現 INotifyPropertyChanged 的 class。

public class ViewModelBase : INotifyPropertyChanged
{
    
    public event PropertyChangedEventHandler PropertyChanged;

    
    public void RaisePropertyChanged(string propertyName)
    {
        PropertyChangedEventHandler handler = PropertyChanged;
        if (handler != null)
        {
            handler(this, new PropertyChangedEventArgs(propertyName));
        }
    }
}

截圖：

Answer 3

您可以使用“Xamarin 芯片”組件。 原因

• 它支持幾乎所有的布局
• 具有 Input、Choice、Filter 和 Action 類型的顯示
• 您可以 select 單選、多選或輸入新的
• 大量的 UI 自定義選項

https://help.syncfusion.com/xamarin/chips/overview

問候， N Baua