xaml - Xamarin.Forms:创建 SearchBar

Question

大家好。我正在尝试创建一个在 ListView 上进行搜索的 SearchBar。 ListView 上的记录是从 Visual Studio 中的数据库中检索的。

我已经尝试了一些代码，但无法使其正常工作。我只是 Xamarin.Forms 的新手。希望你们能帮助我。

这些是我试过的一些代码:

CustomerList.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">


    <SearchBar x:Name="searchcustomer"
            Placeholder="Search"
           Text="{Binding SearchedText, Mode=TwoWay}"
           SearchCommand="{Binding SearchCommand}"/>

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

CustomerViewModel.cs

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

namespace XamarinFormsDemo.ViewModels
{
    public class CustomerVM : INotifyPropertyChanged
    {


        private void SearchCommandExecute()
        {
            var tempRecords = _customerList.Where(c => c.CUSTOMER_NAME.Contains(SearchedText));
            CustomerList = new List<Customer>(tempRecords);
        }
        public ICommand SearchCommand { get; set; }




        private string _searchedText; 
        public string SearchedText
        {
            get { return _searchedText; }
            set { _searchedText = value; OnPropertyChanged(); }
        }


        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();
            SearchCommand = new Command(() => Debug.WriteLine("Command executed"));
        }


        public event PropertyChangedEventHandler PropertyChanged;

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

    }
}

如果您需要查看更多代码，请告诉我。非常感谢。

Answer 1

第一:改变

 private List<Customer> _customerList;

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

对于

private ObservableList <Customer> _customerList;

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

然后改变这个

private void SearchCommandExecute()
    {
        var tempRecords = _customerList.Where(c => c.CUSTOMER_NAME.Contains(SearchedText));
        CustomerList = new List<Customer>(tempRecords);
    }

到

private void SearchCommandExecute()
    {
        var tempRecords = _customerList.Where(c => c.CUSTOMER_NAME.Contains(SearchedText));
        CustomerList.Clear();
        foreach (var item in tempRecords)
        {
             CustomerList.Add(item);
        }
    }

基本上您需要使用可观察列表来通知 View 有关更改并避免每次都创建一个新实例。