Xamarin.Forms 中是否有等效于 html 数据列表的机制，允许选择预定义值和自由文本条目？

Question

我们正在构建一个 Xamarin 表单应用程序。

其中一个字段应该是一个选择，您可以在其中选择一个预定义值或在文本字段中输入一个自由文本值。

在 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

Xamarin.Forms 中是否有等效的 HTML 数据列表控件，它允许选择值以及自由文本条目？

Xamarin.Forms 没有相同的控件，但您可以创建自定义控件来具有这些功能。

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

努盖特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>

支持类

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 的​​类。

public class ViewModelBase : INotifyPropertyChanged
{
    
    public event PropertyChangedEventHandler PropertyChanged;

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

截图：