Xamarin.Forms：创建 SearchBar 并在 ListView 上搜索答案

【问题标题】：Xamarin.Forms: Creating a SearchBar and search on a ListViewXamarin.Forms：创建 SearchBar 并在 ListView 上搜索
【发布时间】：2016-07-08 08:15:36
【问题描述】：

大家好。我目前正在做一个允许用户对客户进行 CRUD 记录并将其保存在数据库中的应用程序。所有创建的记录都显示在 ListView 上。

我想做的是创建一个 SearchBar，它允许我搜索我的 ListView 中的客户记录。在一个单独的程序中，我尝试创建一个搜索栏，但我只能从预定义的 ListView 中搜索记录。

我需要做的搜索栏应该允许我搜索来自数据库的 ListView。

希望你能帮我解决这个问题。

这是我的一些代码。如果您需要查看更多。请告诉我。非常感谢。

CustomerViewModel.cs

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Linq;
using System.Runtime.CompilerServices;
using System.Text;
using System.Threading.Tasks;
using Xamarin.Forms;
using XamarinFormsDemo.Models;
using XamarinFormsDemo.Services;

    namespace XamarinFormsDemo.ViewModels
    {
    public class CustomerVM : INotifyPropertyChanged
    {

        private List<Customer> _customerList;


    public List<Customer> CustomerList
    {
        get { return _customerList; }
        set
        {
            _customerList = value;
            OnPropertyChanged();
        }
    }




    public CustomerVM()
    {
        InitializeDataAsync();
    }

    private async Task InitializeDataAsync()
    {
        var customerServices = new CustomerServices();

        CustomerList = await customerServices.GetCustomerAsync();
    }


    public event PropertyChangedEventHandler PropertyChanged;

    protected virtual void OnPropertyChanged([CallerMemberName] string propertyName = null)
    {
        var handler = PropertyChanged;
        if (handler != null) handler(this, new PropertyChangedEventArgs(propertyName));
        }


    }
}

CustomerPage.xaml

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
         xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
         x:Class="XamarinFormsDemo.Views.ClientListPage"
         xmlns:ViewModels="clr-namespace:XamarinFormsDemo.ViewModels;assembly=XamarinFormsDemo"
         xmlns:controls="clr-namespace:ImageCircle.Forms.Plugin.Abstractions;assembly=ImageCircle.Forms.Plugin.Abstractions"
         BackgroundImage="bg3.jpg"
         Title="Client List">


  <ContentPage.BindingContext>
    <ViewModels:CustomerVM/>
  </ContentPage.BindingContext>


  <StackLayout Orientation="Vertical">



    <ListView x:Name="CustomerListView"
          ItemsSource="{Binding CustomerList}"
          HasUnevenRows="True">
      <ListView.ItemTemplate>
        <DataTemplate>
         <ViewCell>
            <Grid Padding="10" RowSpacing="10" ColumnSpacing="5">
              <Grid.RowDefinitions>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="*"/>
              </Grid.RowDefinitions>
              <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto"/>
                <ColumnDefinition Width="*"/>
              </Grid.ColumnDefinitions>

              <controls:CircleImage Source="icon.png"
                 HeightRequest="66"
                 HorizontalOptions="CenterAndExpand"
                 Aspect="AspectFill"
                 WidthRequest="66"
                 Grid.RowSpan="2"
               />


              <Label Grid.Column="1"
                 Text="{Binding CUSTOMER_NAME}"
                 TextColor="#24e97d"
                 FontSize="24"/>



          <Label Grid.Column="1"
                  Grid.Row="1"
                   Text="{Binding CUSTOMER_CODE}"
                   TextColor="White"
                   FontSize="18"
                   Opacity="0.6"/>


          <Label Grid.Column="1"
              Grid.Row="2"
              Text="{Binding CUSTOMER_CONTACT}"
               TextColor="White"
               FontSize="18"
               Opacity="0.6"/>



        </Grid>
      </ViewCell>
    </DataTemplate>
  </ListView.ItemTemplate>

</ListView>


<StackLayout Orientation="Vertical"
         Padding="30,10,30,10"
         HeightRequest="20"
         BackgroundColor="#24e97d"
         VerticalOptions="Center"
         Opacity="0.5">
  <Label Text="© Copyright 2016   SMESOFT.COM.PH   All Rights Reserved "
         HorizontalTextAlignment="Center"
         VerticalOptions="Center"
         HorizontalOptions="Center" />
    </StackLayout>
  </StackLayout>



</ContentPage>

【问题讨论】：

尝试使用ObservableCollection而不是List
@EgorGromadskiy 我应该把它放在哪里？先生，它会解决我的问题吗？
public List<Customer> CustomerList 到 public ObservableCollection<Customer> CustomerList。我也没有看到SearchBar 和搜索逻辑。
@EgorGromadskiy 先生，它没有解决我的问题。因为我的重点实际上是如何从 ListView 中搜索记录。来自数据库且未预定义的记录。

标签： xaml xamarin xamarin.forms

【解决方案1】：

SearchBar 具有 SearchCommand 属性。将它绑定到视图模型上的一些ICommand。还将SearchBar 的Text 属性绑定到视图模型上的string 属性。将所有记录保存在某个公共集合_allCustomers 和 UI 上仅显示ObservableCollection<Customer> Customers。在此命令的执行方法中，您可以添加：

private void SearchCommandExecute()
{
    var tempRecords = _allCustomers.Where(c=>c.FullName.Contains(Text));
    Customers = new ObservableCollection<Customer>(tempRecords);
}

【讨论】：

如何将搜索栏的 Text 属性绑定到 viewmodel 中的字符串？
<SearchBar Text={Binding TextOnViewModelPropertyName, Mode=TwoWay}>
我在 XAML 中有这段代码：我做对了吗？我将如何在 SearchCommand 中使用 ICommand 代码？我不使用可观察的集合，因为它运行不正常。这是我当前在 viewmodel 中的代码：pastie.org/10906667
您应该将 Text 的 SearchBar 绑定到视图模型上的 string 属性而不是 List。 ICommand 是一种类型。所以更好的方法是将SearchCommand 的SearchBar 绑定到视图模型上ICommand 类型的属性。 ObservableCollection 有什么问题？
我建议您调查与 Xamarin.Forms 开发相关的文章，for example。

【解决方案2】：

这基本上是对 Egor Gromadskiy 答案的补充，但由于其他主题的 cmets 太多，我将其发布在这里。

请记住，当在搜索栏中按下 X 按钮或取消按钮时，不会触发搜索命令。因此，如果您想显示此事件的所有结果，请从 SearchText 属性调用此命令（在这种情况下，SearchText 设置为 null，至少在 iOS 上，对于 Android，请参阅 this forum）。

如果您想要在键入时进行搜索并且不要等到点击“搜索”按钮，也可以这样做。

public string SearchText
{
  get { ... }
  set { 
        ... = value;
        SearchCommand.Execute();
      }
}

【讨论】：