Xamarin.Forms Searchbar

  • Artículo
  • 5 minutos para leer

Ejemplo de descarga Descarga del ejemplo

es Xamarin.FormsSearchBar un control de entrada de usuario que se usa para iniciar una búsqueda. El SearchBar control admite texto de marcador de posición, entrada de consulta, ejecución de búsqueda y cancelación. En la captura de pantalla siguiente SearchBar se muestra una consulta con los resultados mostrados en ListView :

de pantalla deSearchBar en iOS y Android

La clase SearchBar define las propiedades siguientes:

Estas propiedades están copiadas por objetos , lo que BindableProperty significa que se puede personalizar y ser el destino de los enlaces de SearchBar datos. La especificación de propiedades de fuente SearchBar en es coherente con la personalización de texto en otros Xamarin.Forms Text controls . Para obtener más información, vea Fonts in Xamarin.Forms.

Se SearchBar puede crear una instancia de en XAML. Su propiedad Placeholder opcional se puede establecer para definir el texto de la sugerencia en el cuadro de entrada de consulta. El valor predeterminado de es una cadena vacía, por lo que no aparecerá ningún marcador Placeholder de posición si no está establecido. En el ejemplo siguiente se muestra cómo crear una instancia de SearchBar en XAML con la propiedad opcional Placeholder establecida:

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

También SearchBar se puede crear un en el código:

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

Propiedades de apariencia de SearchBar

El SearchBar control define muchas propiedades que personalizan la apariencia del control. En el ejemplo siguiente se muestra cómo crear una instancia de SearchBar en XAML con varias propiedades especificadas:

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

Estas propiedades también se pueden especificar al crear un SearchBar objeto en el código:

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

En la captura de pantalla siguiente se muestra el SearchBar control resultante:

Captura de pantalla de SearchBar personalizada eniOSy Android

Nota:

En iOS, la SearchBarRenderer clase contiene un método UpdateCancelButton reemplazable. Este método controla cuándo aparece el botón Cancelar y se puede invalidar en un representador personalizado. Para obtener más información sobre los representadores personalizados, vea Xamarin.Forms Custom Renderers .

Realizar una búsqueda con controladores de eventos

Una búsqueda se puede ejecutar mediante el SearchBar control adjuntando un controlador de eventos a uno de los siguientes eventos:

  • SearchButtonPressed Se llama a cuando el usuario hace clic en el botón de búsqueda o presiona la tecla Entrar.
  • TextChanged Se llama a cada vez que se cambia el texto del cuadro de consulta.

En el ejemplo siguiente se muestra un controlador de eventos asociado al TextChanged evento en XAML y se usa para mostrar los ListView resultados de la búsqueda:

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

Un controlador de eventos también se puede adjuntar a un SearchBar objeto creado en el código:

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

El TextChanged controlador de eventos del archivo de código subyacente es el mismo, tanto si se SearchBar crea a través de XAML como de código:

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

El ejemplo anterior implica la existencia de una DataService clase con un método capaz de devolver elementos que coinciden con una GetSearchResults consulta. El SearchBar valor de propiedad del control se pasa al método y el resultado se usa para actualizar la Text propiedad del GetSearchResultsListViewItemsSource control. El efecto general es que los resultados de la búsqueda se muestran en el ListView control .

La aplicación de ejemplo proporciona una DataService implementación de clase que se puede usar para probar la funcionalidad de búsqueda.

Realizar una búsqueda mediante un modelo de vista

Una búsqueda se puede ejecutar sin controladores de eventos enlazando las SearchCommand propiedades y a las SearchCommandParameterICommand implementaciones. El proyecto de ejemplo muestra estas implementaciones mediante el patrón Model-View-ViewModel (MVVM). Para obtener más información sobre los enlaces de datos con MVVM, vea Enlaces de datos con MVVM.

El modelo de vista de la aplicación de ejemplo contiene el código siguiente:

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:

El modelo de vista asume la existencia de una DataService clase capaz de realizar búsquedas. La DataService clase , incluidos los datos de ejemplo, está disponible en la aplicación de ejemplo.

El código XAML siguiente muestra cómo enlazar un objeto al modelo de vista de ejemplo, con SearchBar un control que muestra los ListView resultados de la búsqueda:

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

En este ejemplo se BindingContext establece para que sea una instancia de la clase SearchViewModel . Enlaza la propiedad SearchCommand a en el modelo de vista y enlaza la propiedad a la propiedad PerformSearchICommandSearchBarTextSearchCommandParameter . La ListView.ItemsSource propiedad está enlazada a la propiedad del SearchResults modelo de vista.

Para obtener más información sobre ICommand la interfaz y los enlaces, vea y la interfaz Xamarin.Forms data bindingICommand.