Bagikan melalui

Searchbar

  • Artikel

.NET Multi-platform App UI (.NET MAUI) SearchBar adalah kontrol input pengguna yang digunakan untuk memulai pencarian. Kontrol SearchBar mendukung teks tempat penampung, input kueri, eksekusi pencarian, dan pembatalan. Cuplikan layar iOS berikut menunjukkan SearchBar kueri dengan hasil yang ditampilkan dalam :ListView

Cuplikan layar Bilah Pencarian.

SearchBar menentukan properti berikut:

  • CancelButtonColor adalah Color yang mendefinisikan warna tombol batalkan.
  • HorizontalTextAlignment adalah TextAlignment nilai enum yang menentukan perataan horizontal teks kueri.
  • SearchCommand adalah yang ICommand memungkinkan mengikat tindakan pengguna, seperti ketukan jari atau klik, ke perintah yang ditentukan pada viewmodel.
  • SearchCommandParameterobject adalah yang menentukan parameter yang harus diteruskan ke SearchCommand.
  • VerticalTextAlignment adalah TextAlignment nilai enum yang menentukan perataan vertikal teks kueri.

Properti ini didukung oleh BindableProperty objek, yang berarti bahwa properti ini dapat menjadi target pengikatan data, dan ditata.

Selain itu, SearchBar menentukan SearchButtonPressed peristiwa, yang dinaikkan saat tombol pencarian diklik, atau tombol enter ditekan.

SearchBar berasal dari InputView kelas , dari mana ia mewarisi properti berikut:

  • CharacterSpacing, dari jenis double, mengatur penspasian antar karakter dalam teks yang dimasukkan.
  • CursorPosition, dari jenis int, mendefinisikan posisi kursor dalam editor.
  • FontAttributes, dari jenis FontAttributes, menentukan gaya teks.
  • FontAutoScalingEnabled, dari jenis bool, menentukan apakah teks akan mencerminkan preferensi penskalaan yang diatur dalam sistem operasi. Nilai default properti ini adalah true.
  • FontFamily, dari jenis string, mendefinisikan keluarga font.
  • FontSize, dari jenis double, mendefinisikan ukuran font.
  • IsReadOnly, dari jenis bool, menentukan apakah pengguna harus dicegah untuk memodifikasi teks. Nilai default properti ini adalah false.
  • IsSpellCheckEnabled, dari jenis bool, mengontrol apakah pemeriksaan ejaan diaktifkan.
  • IsTextPredictionEnabled, dari jenis bool, mengontrol apakah prediksi teks dan koreksi teks otomatis diaktifkan.
  • Keyboard, dari jenis Keyboard, menentukan keyboard input lunak yang ditampilkan saat memasukkan teks.
  • MaxLength, dari jenis int, mendefinisikan panjang input maksimum.
  • Placeholder, dari jenis string, menentukan teks yang ditampilkan saat kontrol kosong.
  • PlaceholderColor, dari jenis Color, menentukan warna teks tempat penampung.
  • SelectionLength, dari jenis int, mewakili panjang teks yang dipilih dalam kontrol.
  • Text, dari jenis string, menentukan teks yang dimasukkan ke dalam kontrol.
  • TextColor, dari jenis Color, menentukan warna teks yang dimasukkan.
  • TextTransform, dari jenis TextTransform, menentukan casing teks yang dimasukkan.

Properti ini didukung oleh BindableProperty objek, yang berarti bahwa properti ini dapat menjadi target pengikatan data, dan ditata.

Selain itu, InputView menentukan TextChanged peristiwa, yang dimunculkan saat teks dalam Entry perubahan. Objek TextChangedEventArgs yang menyertai TextChanged peristiwa memiliki NewTextValue properti dan OldTextValue , yang masing-masing menentukan teks baru dan lama.

Untuk membuat bilah pencarian, buat SearchBar objek dan atur propertinya Placeholder ke teks yang menginstruksikan pengguna untuk memasukkan istilah pencarian.

Contoh XAML berikut menunjukkan cara membuat SearchBar:

<SearchBar Placeholder="Search items..." />

Kode C# yang setara adalah:

SearchBar searchBar = new SearchBar { Placeholder = "Search items..." };

Catatan

Di iOS, keyboard input lunak dapat mencakup bidang input teks saat bidang berada di dekat bagian bawah layar, sehingga sulit untuk memasukkan teks. Namun, dalam aplikasi .NET MAUI iOS, halaman secara otomatis menggulir saat keyboard input lunak akan mencakup bidang entri teks, sehingga bidang berada di atas keyboard input lunak. Metode KeyboardAutoManagerScroll.Disconnect ini, di Microsoft.Maui.Platform namespace, dapat dipanggil untuk menonaktifkan perilaku default ini. Metode KeyboardAutoManagerScroll.Connect ini dapat dipanggil untuk mengaktifkan kembali perilaku setelah dinonaktifkan.

Melakukan pencarian dengan penanganan aktivitas

Pencarian dapat dijalankan menggunakan SearchBar kontrol dengan melampirkan penanganan aktivitas ke salah satu peristiwa berikut:

  • SearchButtonPressed, yang dipanggil ketika pengguna mengklik tombol pencarian atau menekan tombol enter.
  • TextChanged, yang dipanggil kapan saja teks dalam kotak kueri diubah. Kejadian ini diwariskan dari InputView kelas .

Contoh XAML berikut menunjukkan penanganan aktivitas yang dilampirkan ke TextChanged peristiwa dan menggunakan ListView untuk menampilkan hasil pencarian:

<SearchBar TextChanged="OnTextChanged" />
<ListView x:Name="searchResults" >

Dalam contoh ini, TextChanged peristiwa diatur ke penanganan aktivitas bernama OnTextChanged. Handler ini terletak di file code-behind:

void OnTextChanged(object sender, EventArgs e)
{
    SearchBar searchBar = (SearchBar)sender;
    searchResults.ItemsSource = DataService.GetSearchResults(searchBar.Text);
}

Dalam contoh ini, DataService kelas dengan metode digunakan untuk mengembalikanitem yang cocok dengan GetSearchResults kueri. Nilai SearchBar properti kontrol Text diteruskan ke GetSearchResults metode dan hasilnya digunakan untuk memperbarui ListView properti kontrol ItemsSource . Efek keseluruhan adalah bahwa hasil pencarian ditampilkan di ListView.

Melakukan pencarian menggunakan viewmodel

Pencarian dapat dijalankan tanpa penanganan aktivitas dengan mengikat SearchCommand properti ke ICommand implementasi. Untuk informasi selengkapnya tentang perintah, lihat Memerintahkan.

Contoh berikut menunjukkan kelas viewmodel yang berisi ICommand properti bernama PerformSearch:

public class SearchViewModel : INotifyPropertyChanged
{
    public event PropertyChangedEventHandler PropertyChanged;

    protected virtual void NotifyPropertyChanged([CallerMemberName] string propertyName = "")
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }

    public ICommand PerformSearch => new Command<string>((string query) =>
    {
        SearchResults = DataService.GetSearchResults(query);
    });

    private List<string> searchResults = DataService.Fruits;
    public List<string> SearchResults
    {
        get
        {
            return searchResults;
        }
        set
        {
            searchResults = value;
            NotifyPropertyChanged();
        }
    }
}

Catatan

Viewmodel mengasumsikan keberadaan kelas yang DataService mampu melakukan pencarian.

Contoh XAML berikut menggunakan SearchViewModel kelas :

<ContentPage ...>
    <ContentPage.BindingContext>
        <viewmodels:SearchViewModel />
    </ContentPage.BindingContext>
    <StackLayout>
        <SearchBar x:Name="searchBar"
                   SearchCommand="{Binding PerformSearch}"
                   SearchCommandParameter="{Binding Text, Source={x:Reference searchBar}}"/>
        <ListView x:Name="searchResults"
                  ItemsSource="{Binding SearchResults}" />
    </StackLayout>
</ContentPage>

Dalam contoh ini, BindingContext diatur ke instans SearchViewModel kelas. Properti SearchBar.SearchCommand mengikat properti PerformSearch viewmodel, dan SearchCommandParameter properti mengikat ke SearchBar.Text properti . Demikian pula, ListView.ItemsSource properti terikat ke SearchResults properti viewmodel.

Sembunyikan dan tampilkan keyboard input lunak

Kelas SoftInputExtensions , di Microsoft.Maui namespace, menyediakan serangkaian metode ekstensi yang mendukung interaksi dengan keyboard input lunak pada kontrol yang mendukung input teks. Kelas menentukan metode berikut:

  • IsSoftInputShowing, yang memeriksa untuk melihat apakah perangkat saat ini menunjukkan keyboard input lunak.
  • HideSoftInputAsync, yang akan mencoba menyembunyikan keyboard input lunak jika saat ini ditampilkan.
  • ShowSoftInputAsync, yang akan mencoba menampilkan keyboard input lunak jika saat ini disembunyikan.

Contoh berikut menunjukkan cara menyembunyikan keyboard input lunak pada SearchBar bernama searchBar, jika saat ini ditampilkan:

if (searchBar.IsSoftInputShowing())
   await searchBar.HideSoftInputAsync(System.Threading.CancellationToken.None);