Condividi tramite

Xamarin.Forms SearchBar

Xamarin.FormsSearchBar è un controllo di input utente utilizzato per avviare una ricerca. Il SearchBar controllo supporta testo segnaposto, input di query, esecuzione della ricerca e annullamento. Lo screenshot seguente mostra una SearchBar query con i risultati visualizzati in :ListView

Screenshot di SearchBar in iOS e Android

La SearchBar classe definisce le proprietà seguenti:

  • CancelButtonColor è un Color oggetto che definisce il colore del pulsante Annulla.
  • CharacterSpacing, di tipo double, è la spaziatura tra i caratteri del SearchBar testo.
  • FontAttributes è un FontAttributes valore di enumerazione che determina se il SearchBar tipo di carattere è grassetto, corsivo o nessuno dei due.
  • FontFamily è un oggetto string che determina la famiglia di caratteri utilizzata da SearchBar.
  • FontSize può essere un NamedSize valore di enumerazione o un double valore che rappresenta dimensioni specifiche del carattere tra le piattaforme.
  • HorizontalTextAlignment è un TextAlignment valore di enumerazione che definisce l'allineamento orizzontale del testo della query.
  • VerticalTextAlignment è un TextAlignment valore di enumerazione che definisce l'allineamento verticale del testo della query.
  • Placeholder è un string oggetto che definisce il testo segnaposto, ad esempio "Search...".
  • PlaceholderColor è un Color oggetto che definisce il colore del testo segnaposto.
  • SearchCommand è un oggetto ICommand che consente l'associazione di azioni utente, ad esempio tocco di dito o clic, ai comandi definiti in un modello di visualizzazione.
  • SearchCommandParameter è un object oggetto che specifica il parametro che deve essere passato a SearchCommand.
  • Text è un oggetto string contenente il testo della query nell'oggetto SearchBar.
  • TextColor è un Color oggetto che definisce il colore del testo della query.
  • TextTransform è un TextTransform valore che determina la combinazione di maiuscole e minuscole del SearchBar testo.

Queste proprietà sono supportate da BindableProperty oggetti, il che significa che SearchBar è possibile personalizzare e essere la destinazione dei data binding. Specificare le proprietà del tipo di carattere in SearchBar è coerente con la personalizzazione del testo in altri Xamarin.Forms controlli Testo. Per altre informazioni, vedere Tipi di carattere in Xamarin.Forms.

È SearchBar possibile creare un'istanza di un oggetto in XAML. La proprietà facoltativa può essere impostata Placeholder per definire il testo dell'hint nella casella di input della query. Il valore predefinito per è Placeholder una stringa vuota, quindi non verrà visualizzato alcun segnaposto se non è impostato. L'esempio seguente illustra come creare un'istanza di in SearchBar XAML con il set di proprietà facoltativo Placeholder :

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

È anche possibile creare un oggetto SearchBar nel codice:

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

Proprietà dell'aspetto searchBar

Il SearchBar controllo definisce molte proprietà che personalizzano l'aspetto del controllo. L'esempio seguente illustra come creare un'istanza di in SearchBar XAML con più proprietà specificate:

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

Queste proprietà possono essere specificate anche durante la creazione di un SearchBar oggetto nel codice:

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

Lo screenshot seguente mostra il controllo risultante SearchBar :

Screenshot di SearchBar personalizzato in iOS e Android

Nota

In iOS la SearchBarRenderer classe contiene un metodo sostituibile UpdateCancelButton . Questo metodo controlla quando viene visualizzato il pulsante Annulla e può essere sottoposto a override in un renderer personalizzato. Per altre informazioni sui renderer personalizzati, vedere Xamarin.Forms Renderer personalizzati.

Eseguire una ricerca con gestori eventi

È possibile eseguire una ricerca usando il SearchBar controllo associando un gestore eventi a uno degli eventi seguenti:

  • SearchButtonPressed viene chiamato quando l'utente fa clic sul pulsante di ricerca o preme il tasto INVIO.
  • TextChanged viene chiamato ogni volta che viene modificato il testo nella casella di query.

L'esempio seguente mostra un gestore eventi associato all'evento TextChanged in XAML e usa un ListView oggetto per visualizzare i risultati della ricerca:

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

Un gestore eventi può anche essere collegato a un SearchBar oggetto creato nel codice:

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

Il TextChanged gestore eventi nel file code-behind è lo stesso, indipendentemente dal fatto che SearchBar venga creato tramite XAML o codice:

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

L'esempio precedente implica l'esistenza di una DataService classe con un GetSearchResults metodo in grado di restituire elementi che corrispondono a una query. Il SearchBar valore della proprietà del Text controllo viene passato al GetSearchResults metodo e il risultato viene utilizzato per aggiornare la ListView proprietà del ItemsSource controllo. L'effetto complessivo è che i risultati della ricerca vengono visualizzati nel ListView controllo .

L'applicazione di esempio fornisce un'implementazione DataService della classe che può essere usata per testare la funzionalità di ricerca.

Eseguire una ricerca usando un modello di visualizzazione

Una ricerca può essere eseguita senza gestori eventi associando le SearchCommand proprietà e SearchCommandParameter alle ICommand implementazioni. Il progetto di esempio illustra queste implementazioni usando il modello Model-View-ViewModel (MVVM). Per altre informazioni sui data binding con MVVM, vedere Data Binding con MVVM.

Il modello di visualizzazione nell'applicazione di esempio contiene il codice seguente:

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

Nota

Il modello di visualizzazione presuppone l'esistenza di una DataService classe in grado di eseguire ricerche. La DataService classe, inclusi i dati di esempio, è disponibile nell'applicazione di esempio.

Il codice XAML seguente mostra come associare un SearchBar oggetto al modello di visualizzazione di esempio, con un ListView controllo che visualizza i risultati della ricerca:

<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 questo esempio l'oggetto deve essere un'istanza BindingContext della SearchViewModel classe . Associa la SearchCommand proprietà a ICommand PerformSearch nel modello di visualizzazione e associa la SearchBar Text proprietà alla SearchCommandParameter proprietà . La ListView.ItemsSource proprietà è associata alla SearchResults proprietà del modello di visualizzazione.

Per altre informazioni sull'interfaccia ICommand e sui binding, vedere Xamarin.Forms data binding e l'interfaccia ICommand.

  • Last updated on