Xamarin.Forms Searchbar

  • Artikel

Beispiel herunterladen Das Beispiel herunterladen

ist Xamarin.FormsSearchBar ein Benutzereingabesteuerelement, das zum Initiieren einer Suche verwendet wird. Das SearchBar Steuerelement unterstützt Platzhaltertext, Abfrageeingaben, Suchausführung und Abbruch. Der folgende Screenshot zeigt eine SearchBar Abfrage mit Ergebnissen, die in einem ListViewangezeigt werden:

Screenshot von SearchBar unter iOS und Android

Die SearchBar-Klasse definiert die folgenden Eigenschaften:

  • CancelButtonColor ist ein Color , der die Farbe der Schaltfläche "Abbrechen" definiert.
  • CharacterSpacing vom Typ double: Abstand zwischen den Zeichen des SearchBar-Texts.
  • FontAttributes ist ein FontAttributes Enumerationswert, der bestimmt, ob die SearchBar Schriftart fett, kursiv oder nicht formatiert ist.
  • FontFamily ist ein string , der die schriftartenfamilie bestimmt, die SearchBarvon verwendet wird.
  • FontSize kann ein NamedSize Enumerationswert oder ein double Wert sein, der bestimmte Schriftgrößen plattformübergreifend darstellt.
  • HorizontalTextAlignment ist ein TextAlignment Enumerationswert, der die horizontale Ausrichtung des Abfragetexts definiert.
  • VerticalTextAlignment ist ein TextAlignment Enumerationswert, der die vertikale Ausrichtung des Abfragetexts definiert.
  • Placeholder ist ein string , der den Platzhaltertext definiert, z. B. "Suche...".
  • PlaceholderColor ist ein Color , der die Farbe des Platzhaltertexts definiert.
  • SearchCommand ist eine ICommand , die das Binden von Benutzeraktionen, z. B. Fingerklicks oder Klicks, an Befehle ermöglicht, die in einem ViewModel definiert sind.
  • SearchCommandParameter ist ein object , der den Parameter angibt, der SearchCommandan den übergeben werden soll.
  • Text ist ein , string der den Abfragetext im SearchBarenthält.
  • TextColor ist ein Color , der die Abfragetextfarbe definiert.
  • TextTransform ist ein TextTransform Wert, der die Groß-/Kleinschreibung des SearchBar Texts bestimmt.

Diese Eigenschaften werden von BindableProperty -Objekten unterstützt, was bedeutet, dass die SearchBar angepasst werden kann und das Ziel von Datenbindungen sein kann. Das Angeben von Schriftarteigenschaften für ist mit dem SearchBar Anpassen von Text in anderen Xamarin.Forms Text-Steuerelementen konsistent. Weitere Informationen finden Sie unter Schriftarten in Xamarin.Forms.

Ein SearchBar kann in XAML instanziiert werden. Die optionale Placeholder Eigenschaft kann festgelegt werden, um den Hinweistext im Abfrageeingabefeld zu definieren. Der Standardwert für ist Placeholder eine leere Zeichenfolge, sodass kein Platzhalter angezeigt wird, wenn er nicht festgelegt ist. Das folgende Beispiel zeigt, wie sie in SearchBar XAML instanziieren, indem die optionale Placeholder Eigenschaft festgelegt ist:

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

Ein SearchBar kann auch im Code erstellt werden:

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

SearchBar-Darstellungseigenschaften

Das SearchBar Steuerelement definiert viele Eigenschaften, die die Darstellung des Steuerelements anpassen. Im folgenden Beispiel wird gezeigt, wie sie SearchBar in XAML instanziieren, wobei mehrere Eigenschaften angegeben sind:

<SearchBar Placeholder="Search items..."
           CancelButtonColor="Orange"
           PlaceholderColor="Orange"
           TextColor="Orange"
           TextTransform="Lowercase"
           HorizontalTextAlignment="Center"
           FontSize="Medium"
           FontAttributes="Italic" />

Diese Eigenschaften können auch beim Erstellen eines SearchBar Objekts im Code angegeben werden:

SearchBar searchBar = new SearchBar
{
    Placeholder = "Search items...",
    PlaceholderColor = Color.Orange,
    TextColor = Color.Orange,
    TextTransform = TextTransform.Lowercase,
    HorizontalTextAlignment = TextAlignment.Center,
    FontSize = Device.GetNamedSize(NamedSize.Medium, typeof(SearchBar)),
    FontAttributes = FontAttributes.Italic
};

Der folgende Screenshot zeigt das resultierende SearchBar Steuerelement:

Screenshot der angepassten SearchBar unter iOS und Android

Hinweis

Unter iOS enthält die SearchBarRenderer -Klasse eine überschreibbare UpdateCancelButton Methode. Diese Methode steuert, wann die Abbrechen-Schaltfläche angezeigt wird, und kann in einem benutzerdefinierten Renderer überschrieben werden. Weitere Informationen zu benutzerdefinierten Renderern finden Sie unter Xamarin.Forms Benutzerdefinierte Renderer.

Ausführen einer Suche mit Ereignishandlern

Eine Suche kann mithilfe des SearchBar -Steuerelements ausgeführt werden, indem ein Ereignishandler an eines der folgenden Ereignisse angefügt wird:

  • SearchButtonPressed wird aufgerufen, wenn der Benutzer entweder auf die Suchschaltfläche klickt oder die EINGABETASTE drückt.
  • TextChanged wird aufgerufen, wenn der Text im Abfragefeld geändert wird.

Das folgende Beispiel zeigt einen Ereignishandler, der an das TextChanged Ereignis in XAML angefügt ist und zum Anzeigen von Suchergebnissen verwendet wird ListView :

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

Ein Ereignishandler kann auch an einen SearchBar im Code erstellten angefügt werden:

SearchBar searchBar = new SearchBar {/*...*/};
searchBar.TextChanged += OnTextChanged;

Der TextChanged Ereignishandler in der CodeBehind-Datei ist identisch, unabhängig davon, ob der SearchBar über XAML oder Code erstellt wird:

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

Das vorherige Beispiel impliziert das Vorhandensein einer DataService Klasse mit einer GetSearchResults Methode, die Elemente zurückgeben kann, die einer Abfrage entsprechen. Der SearchBar -Eigenschaftswert des Steuerelements Text wird an die GetSearchResults -Methode übergeben, und das Ergebnis wird verwendet, um die ListView -Eigenschaft des Steuerelements ItemsSource zu aktualisieren. Der Gesamteffekt besteht darin, dass Suchergebnisse im ListView -Steuerelement angezeigt werden.

Die Beispielanwendung stellt eine DataService Klassenimplementierung bereit, die zum Testen der Suchfunktionalität verwendet werden kann.

Ausführen einer Suche mithilfe eines Viewmodels

Eine Suche kann ohne Ereignishandler ausgeführt werden, indem die SearchCommand Eigenschaften und SearchCommandParameter an ICommand Implementierungen gebunden werden. Das Beispielprojekt veranschaulicht diese Implementierungen mithilfe des MVVM-Musters (Model-View-ViewModel). Weitere Informationen zu Datenbindungen mit MVVM finden Sie unter Datenbindungen mit MVVM.

Das viewmodel in der Beispielanwendung enthält den folgenden Code:

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();
        }
    }
}

Hinweis

Das Viewmodel geht davon aus, dass eine DataService Klasse vorhanden ist, die Suchvorgänge ausführen kann. Die DataService -Klasse, einschließlich Beispieldaten, ist in der Beispielanwendung verfügbar.

Der folgende XAML-Code zeigt, wie sie an SearchBar das Beispielansichtmodel gebunden werden, wobei ein ListView Steuerelement die Suchergebnisse anzeigt:

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

In diesem Beispiel wird festgelegtBindingContext, dass es sich um eine instance der SearchViewModel -Klasse handelt. Es bindet die SearchCommand -Eigenschaft an die PerformSearchICommand im Viewmodel und bindet die SearchBarText -Eigenschaft an die SearchCommandParameter -Eigenschaft. Die ListView.ItemsSource -Eigenschaft ist an die SearchResults -Eigenschaft des Viewmodels gebunden.

Weitere Informationen zur Schnittstelle und den ICommand Bindungen finden Sie unter Xamarin.Forms Datenbindung und ICommand-Schnittstelle.