Xamarin.FormsSuchleisteXamarin.Forms SearchBar

Beispiel herunterladen Herunterladen des BeispielsDownload Sample Download the sample

Der Xamarin.Forms SearchBar ist ein Benutzereingabe-Steuerelement, das zum Initiieren einer Suche verwendet wird.The Xamarin.Forms SearchBar is a user input control used to initiating a search. Das- SearchBar Steuerelement unterstützt Platzhalter Text, Abfrage Eingabe, Such Ausführung und Abbruch.The SearchBar control supports placeholder text, query input, search execution, and cancellation. Der folgende Screenshot zeigt eine SearchBar Abfrage mit Ergebnissen, die in einer angezeigt werden ListView :The following screenshot shows a SearchBar query with results displayed in a ListView:

Bildschirm Abbildung von Searchbar unter IOS und AndroidScreenshot of SearchBar on iOS and Android

Die SearchBar-Klasse definiert die folgenden Eigenschaften:The SearchBar class defines the following properties:

  • CancelButtonColorist eine Color , die die Farbe der Schaltfläche Abbrechen definiert.CancelButtonColor is a Color that defines the color of the cancel button.
  • CharacterSpacing vom Typ double: Abstand zwischen den Zeichen des SearchBar-Texts.CharacterSpacing, of type double, is the spacing between characters of the SearchBar text.
  • FontAttributesEin Enumerationswert, FontAttributes der bestimmt, ob die SearchBar Schriftart fett, kursiv oder keines von beiden ist.FontAttributes is a FontAttributes enum value that determines whether the SearchBar font is bold, italic, or neither.
  • FontFamilyist eine string , die die von verwendete Schriftfamilie bestimmt SearchBar .FontFamily is a string that determines the font family used by the SearchBar.
  • FontSizekann ein NamedSize Enumerationswert oder ein double Wert sein, der bestimmte Schriftgrößen plattformübergreifend darstellt.FontSize can be a NamedSize enum value or a double value that represents specific font sizes across platforms.
  • HorizontalTextAlignmentein TextAlignment Enumerationswert, der die horizontale Ausrichtung des Abfrage Texts definiert.HorizontalTextAlignment is a TextAlignment enum value that defines the horizontal alignment of the query text.
  • VerticalTextAlignmentein TextAlignment Enumerationswert, der die vertikale Ausrichtung des Abfrage Texts definiert.VerticalTextAlignment is a TextAlignment enum value that defines the vertical alignment of the query text.
  • Placeholderist eine string , die den Platzhalter Text definiert, z. b. "Search...".Placeholder is a string that defines the placeholder text, such as "Search...".
  • PlaceholderColorist eine Color , die die Farbe des Platzhalter Texts definiert.PlaceholderColor is a Color that defines the color of the placeholder text.
  • SearchCommandist eine ICommand , die das Binden von Benutzeraktionen (z. b. Finger Tippen oder Klicks) auf Befehle ermöglicht, die für ein ViewModel definiert sind.SearchCommand is an ICommand that allows binding user actions, such as finger taps or clicks, to commands defined on a viewmodel.
  • SearchCommandParameterist eine object , die den Parameter angibt, der an den übergeben werden soll SearchCommand .SearchCommandParameter is an object that specifies the parameter that should be passed to the SearchCommand.
  • Textist eine, string die den Abfragetext in der enthält SearchBar .Text is a string containing the query text in the SearchBar.
  • TextColorist eine Color , die die Farbe für den Abfragetext definiert.TextColor is a Color that defines the query text color.
  • TextTransformein- TextTransform Wert, der die Groß-/Kleinschreibung des Texts bestimmt SearchBar .TextTransform is a TextTransform value that determines the casing of the SearchBar text.

Diese Eigenschaften werden von- BindableProperty Objekten unterstützt. das bedeutet, SearchBar dass angepasst werden kann und das Ziel von Daten Bindungen ist.These properties are backed by BindableProperty objects, which means the SearchBar can be customized and be the target of data bindings. Das Angeben von Schriftart Eigenschaften in entspricht der SearchBar Anpassung von Text in anderen Xamarin.Forms Text Steuerelementen.Specifying font properties on the SearchBar is consistent with customizing text on other Xamarin.Forms Text controls. Weitere Informationen finden Sie unter Schriftarten Xamarin.Forms in .For more information, see Fonts in Xamarin.Forms.

Eine SearchBar kann in XAML instanziiert werden.A SearchBar can be instantiated in XAML. Die optionale- Placeholder Eigenschaft kann so festgelegt werden, dass der Hinweis Text im Eingabefeld der Abfrage definiert wird.Its optional Placeholder property can be set to define the hint text in the query input box. Der Standardwert für Placeholder ist eine leere Zeichenfolge, sodass kein Platzhalter angezeigt wird, wenn er nicht festgelegt ist.The default value for the Placeholder is an empty string so no placeholder will appear if it isn't set. Im folgenden Beispiel wird gezeigt, wie ein SearchBar in XAML mit dem optionalen Eigenschaften Satz instanziiert wird Placeholder :The following example shows how to instantiate a SearchBar in XAML with the optional Placeholder property set:

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

Ein SearchBar kann auch im Code erstellt werden:A SearchBar can also be created in code:

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

Eigenschaften der Searchbar-DarstellungSearchBar appearance properties

Das- SearchBar Steuerelement definiert viele Eigenschaften, die die Darstellung des Steuer Elements anpassen.The SearchBar control defines many properties that customize the appearance of the control. Im folgenden Beispiel wird gezeigt, wie ein SearchBar in XAML mit mehreren angegebenen Eigenschaften instanziiert wird:The following example shows how to instantiate a SearchBar in XAML with multiple properties specified:

<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:These properties can also be specified when creating a SearchBar object in code:

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:The following screenshot shows the resulting SearchBar control:

Screenshot der angepassten Suchleiste unter IOS und AndroidScreenshot of customized SearchBar on iOS and Android

Hinweis

Unter IOS enthält die- SearchBarRenderer Klasse eine über schreibbare UpdateCancelButton Methode.On iOS, the SearchBarRenderer class contains an overridable UpdateCancelButton method. Diese Methode steuert, wann die Schaltfläche Abbrechen angezeigt wird, und kann in einem benutzerdefinierten Renderer überschrieben werden.This method controls when the cancel button appears, and can be overridden in a custom renderer. Weitere Informationen zu benutzerdefinierten renderatoren finden Sie unter Xamarin.Forms benutzerdefinierte Renderer.For more information about custom renderers, see Xamarin.Forms Custom Renderers.

Ausführen einer Suche mit Ereignis HandlernPerform a search with event handlers

Eine Suche kann mit dem-Steuerelement ausgeführt werden SearchBar , indem ein Ereignishandler an eines der folgenden Ereignisse angefügt wird:A search can be executed using the SearchBar control by attaching an event handler to one of the following events:

  • SearchButtonPressedwird aufgerufen, wenn der Benutzer entweder auf die Such Schaltfläche klickt oder die EINGABETASTE drückt.SearchButtonPressed is called when the user either clicks the search button or presses the enter key.
  • TextChangedwird aufgerufen, wenn der Text im Abfragefeld geändert wird.TextChanged is called anytime the text in the query box is changed.

Das folgende Beispiel zeigt einen Ereignishandler, der an das- TextChanged Ereignis in XAML angehängt ist und einen verwendet ListView , um Suchergebnisse anzuzeigen:The following example shows an event handler attached to the TextChanged event in XAML and uses a ListView to display search results:

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

Ein Ereignishandler kann auch an einen angefügt werden, SearchBar der im Code erstellt wurde:An event handler can also be attached to a SearchBar created in code:

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

Der TextChanged Ereignishandler in der Code Behind-Datei ist identisch, unabhängig davon, ob der SearchBar über XAML oder Code erstellt wird:The TextChanged event handler in the code-behind file is the same, whether the SearchBar is created via XAML or code:

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

Das vorherige Beispiel impliziert das vorhanden sein einer- DataService Klasse mit einer- GetSearchResults Methode, mit der Elemente zurückgegeben werden können, die einer Abfrage entsprechen.The previous example implies the existence of a DataService class with a GetSearchResults method capable of returning items that match a query. Der SearchBar - Text Eigenschafts Wert des Steuer Elements wird an die GetSearchResults -Methode und das Ergebnis zum Aktualisieren der ListView -Eigenschaft des Steuer Elements verwendet ItemsSource .The SearchBar control's Text property value is passed to the GetSearchResults method and the result is used to update the ListView control's ItemsSource property. Der Gesamteffekt besteht darin, dass die Suchergebnisse im-Steuerelement angezeigt werden ListView .The overall effect is that search results are displayed in the ListView control.

Die Beispielanwendung bietet eine DataService Klassen Implementierung, die zum Testen der Such Funktionalität verwendet werden kann.The sample application provides a DataService class implementation that can be used to test search functionality.

Ausführen einer Suche mit einem ViewModelPerform a search using a viewmodel

Eine Suche kann ohne Ereignishandler ausgeführt werden, indem die SearchCommand -Eigenschaft und die-Eigenschaft SearchCommandParameter an Implementierungen gebunden werden ICommand .A search can be executed without event handlers by binding the SearchCommand and SearchCommandParameter properties to ICommand implementations. Das Beispiel Projekt veranschaulicht diese Implementierungen mithilfe des Model-View-ViewModel (MVVM)-Musters.The sample project demonstrates these implementations using the Model-View-ViewModel (MVVM) pattern. Weitere Informationen zu Daten Bindungen mit MVVM finden Sie unter Daten Bindungen mit MVVM.For more information about data bindings with MVVM, see Data Bindings with MVVM.

Das ViewModel in der Beispielanwendung enthält den folgenden Code:The viewmodel in the sample application contains the following 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 Klasse vorhanden ist, die DataService Suchvorgänge ausführen kann.The viewmodel assumes the existence of a DataService class capable of performing searches. Die- DataService Klasse, einschließlich Beispiel Daten, ist in der-Beispielanwendung verfügbar.The DataService class, including example data, is available in the sample application.

Der folgende XAML-Code zeigt, wie ein SearchBar an das ViewModel-Beispiel gebunden wird, wobei ein- ListView Steuerelement die Suchergebnisse anzeigt:The following XAML shows how to bind a SearchBar to the example viewmodel, with a ListView control displaying the search results:

<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 BindingContext wird als eine Instanz der-Klasse festgelegt SearchViewModel .This example sets the BindingContext to be an instance of the SearchViewModel class. Sie bindet die SearchCommand -Eigenschaft an das PerformSearch ICommand -Objekt im ViewModel und bindet die-Eigenschaft SearchBar Text an die- SearchCommandParameter Eigenschaft.It binds the SearchCommand property to the PerformSearch ICommand in the viewmodel, and binds the SearchBar Text property to the SearchCommandParameter property. Die- ListView.ItemsSource Eigenschaft ist an die- SearchResults Eigenschaft von ViewModel gebunden.The ListView.ItemsSource property is bound to the SearchResults property of the viewmodel.

Weitere Informationen zur ICommand -Schnittstelle und-Bindungen finden Sie unter Xamarin.Forms Datenbindung und die ICommand-Schnittstelle.For more information about the ICommand Interface and bindings, see Xamarin.Forms data binding and the ICommand interface.