Xamarin.Forms Searchbar

  • Article

Télécharger l’exemple Télécharger l’exemple

est Xamarin.FormsSearchBar un contrôle d’entrée utilisateur utilisé pour lancer une recherche. Le contrôle prend en charge le SearchBar texte d’espace réservé, l’entrée de requête, l’exécution de la recherche et l’annulation. La capture d’écran suivante montre une SearchBar requête avec les résultats affichés dans un ListView:

Capture d’écran de SearchBar sur iOS et Android

La SearchBar classe définit les propriétés suivantes :

  • CancelButtonColor est un Color qui définit la couleur du bouton Annuler.
  • CharacterSpacing, de type double, est l’espacement entre les caractères du SearchBar texte.
  • FontAttributes est une FontAttributes valeur d’énumération qui détermine si la SearchBar police est gras, italique ou non.
  • FontFamilyest un string qui détermine la famille de polices utilisée par .SearchBar
  • FontSize peut être une NamedSize valeur d’énumération ou une double valeur qui représente des tailles de police spécifiques sur les plateformes.
  • HorizontalTextAlignment est une TextAlignment valeur d’énumération qui définit l’alignement horizontal du texte de la requête.
  • VerticalTextAlignment est une TextAlignment valeur d’énumération qui définit l’alignement vertical du texte de la requête.
  • Placeholder est un string qui définit le texte de l’espace réservé, par exemple « Rechercher... ».
  • PlaceholderColor est un Color qui définit la couleur du texte de l’espace réservé.
  • SearchCommand est un qui permet de ICommand lier des actions utilisateur, telles que des appuis ou des clics au doigt, à des commandes définies sur un mode d’affichage.
  • SearchCommandParameter est un object qui spécifie le paramètre qui doit être passé au SearchCommand.
  • Textest un string contenant le texte de la requête dans .SearchBar
  • TextColor est un Color qui définit la couleur du texte de requête.
  • TextTransform est une TextTransform valeur qui détermine la casse du SearchBar texte.

Ces propriétés sont soutenues par BindableProperty des objets, ce qui signifie que le SearchBar peut être personnalisé et être la cible des liaisons de données. La spécification des propriétés de police sur le est cohérente avec la SearchBar personnalisation du texte sur d’autres Xamarin.Forms contrôles de texte. Pour plus d’informations, consultez Polices dans Xamarin.Forms.

Un SearchBar peut être instancié en XAML. Sa propriété facultative Placeholder peut être définie pour définir le texte d’indicateur dans la zone d’entrée de requête. La valeur par défaut de est Placeholder une chaîne vide. Aucun espace réservé n’apparaît donc s’il n’est pas défini. L’exemple suivant montre comment instancier un SearchBar en XAML avec l’ensemble de propriétés facultatives Placeholder :

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

Un SearchBar peut également être créé dans le code :

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

Propriétés d’apparence de la barre de recherche

Le SearchBar contrôle définit de nombreuses propriétés qui personnalisent l’apparence du contrôle. L’exemple suivant montre comment instancier un SearchBar en XAML avec plusieurs propriétés spécifiées :

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

Ces propriétés peuvent également être spécifiées lors de la création d’un SearchBar objet dans le 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
};

La capture d’écran suivante montre le contrôle résultant SearchBar :

Barre Capture d’écran de la barre de recherche personnalisée sur iOS et de la

Notes

Sur iOS, la SearchBarRenderer classe contient une méthode substituable UpdateCancelButton . Cette méthode contrôle le moment où le bouton Annuler apparaît et peut être remplacée dans un renderer personnalisé. Pour plus d’informations sur les convertisseurs personnalisés, consultez Xamarin.Forms Renderers personnalisés.

Effectuer une recherche avec des gestionnaires d’événements

Une recherche peut être exécutée à l’aide du SearchBar contrôle en attachant un gestionnaire d’événements à l’un des événements suivants :

  • SearchButtonPressed est appelé lorsque l’utilisateur clique sur le bouton de recherche ou appuie sur la touche Entrée.
  • TextChanged est appelé chaque fois que le texte de la zone de requête est modifié.

L’exemple suivant montre un gestionnaire d’événements attaché à l’événement TextChanged en XAML et utilise un ListView pour afficher les résultats de la recherche :

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

Un gestionnaire d’événements peut également être attaché à un SearchBar objet créé dans le code :

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

Le TextChanged gestionnaire d’événements dans le fichier code-behind est le même, que le SearchBar soit créé via XAML ou le code :

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

L’exemple précédent implique l’existence d’une DataService classe avec une GetSearchResults méthode capable de retourner des éléments qui correspondent à une requête. La SearchBar valeur de propriété du Text contrôle est passée à la GetSearchResults méthode et le résultat est utilisé pour mettre à jour la ListView propriété du ItemsSource contrôle. L’effet global est que les résultats de la recherche sont affichés dans le ListView contrôle.

L’exemple d’application fournit une DataService implémentation de classe qui peut être utilisée pour tester la fonctionnalité de recherche.

Effectuer une recherche à l’aide d’un viewmodel

Une recherche peut être exécutée sans gestionnaires d’événements en liant les SearchCommand propriétés et SearchCommandParameter à ICommand des implémentations. L’exemple de projet illustre ces implémentations à l’aide du modèle Model-ViewModel (MVVM). Pour plus d’informations sur les liaisons de données avec MVVM, consultez Liaisons de données avec MVVM.

Le modèle de vue dans l’exemple d’application contient le code suivant :

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

Notes

Le viewmodel suppose l’existence d’une DataService classe capable d’effectuer des recherches. La DataService classe, y compris les exemples de données, est disponible dans l’exemple d’application.

Le code XAML suivant montre comment lier un SearchBar à l’exemple viewmodel, avec un ListView contrôle affichant les résultats de la recherche :

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

Cet exemple montre comment définir le BindingContext comme un instance de la SearchViewModel classe . Il lie la SearchCommand propriété à dansICommandPerformSearchle viewmodel et lie la SearchBarText propriété à la SearchCommandParameter propriété . La ListView.ItemsSource propriété est liée à la SearchResults propriété du viewmodel.

Pour plus d’informations sur l’interface ICommand et les liaisons, consultez Xamarin.Forms Liaison de données et interface ICommand.