Xamarin.Forms Searchbar

  • Artykuł

Download Sample Pobieranie przykładu

To kontrolka Xamarin.FormsSearchBar danych wejściowych użytkownika używana do inicjowania wyszukiwania. Kontrolka SearchBar obsługuje tekst zastępczy, wprowadzanie zapytań, wykonywanie wyszukiwania i anulowanie. Poniższy zrzut ekranu przedstawia SearchBar zapytanie z wynikami wyświetlanymi w pliku ListView:

Screenshot of SearchBar on iOS and Android

Klasa SearchBar definiuje następujące właściwości:

  • CancelButtonColor jest elementem Color definiującym kolor przycisku anulowania.
  • CharacterSpacing, typu double, to odstęp między znakami SearchBar tekstu.
  • FontAttributes jest wartością wyliczeniową FontAttributes , która określa, czy czcionka SearchBar jest pogrubiona, kursywa, czy też nie.
  • FontFamily jest elementem określającym string rodzinę czcionek używaną przez element SearchBar.
  • FontSize może być wartością wyliczeniową NamedSize lub wartością reprezentującą double określone rozmiary czcionek na różnych platformach.
  • HorizontalTextAlignment jest wartością wyliczeniową TextAlignment , która definiuje wyrównanie w poziomie tekstu zapytania.
  • VerticalTextAlignment jest wartością wyliczeniową TextAlignment , która definiuje wyrównanie w pionie tekstu zapytania.
  • Placeholder jest elementem definiującym string tekst zastępczy, taki jak "Wyszukaj...".
  • PlaceholderColor jest elementem Color definiującym kolor tekstu zastępczego.
  • SearchCommand to element ICommand , który umożliwia tworzenie powiązań akcji użytkownika, takich jak naciśnięcia palca lub kliknięcia, do poleceń zdefiniowanych w modelu widoków.
  • SearchCommandParameterjest parametremobject, który określa parametr, który powinien zostać przekazany do .SearchCommand
  • Text jest tekstem string zapytania w elemecie SearchBar.
  • TextColor jest elementem Color definiującym kolor tekstu zapytania.
  • TextTransform jest wartością określającą TextTransform wielkość SearchBar liter tekstu.

Te właściwości są wspierane przez BindableProperty obiekty, co oznacza SearchBar , że można dostosować i być obiektem docelowym powiązań danych. Określanie właściwości czcionki na obiekcie SearchBar jest spójne z dostosowywaniem tekstu w innych Xamarin.Forms kontrolkach Tekst. Aby uzyskać więcej informacji, zobacz Czcionki w pliku Xamarin.Forms.

Wystąpienie elementu można SearchBar utworzyć w języku XAML. Można ustawić jego opcjonalną Placeholder właściwość, aby zdefiniować tekst wskazówki w polu wprowadzania zapytania. Wartość domyślna parametru Placeholder jest pustym ciągiem, więc symbol zastępczy nie będzie wyświetlany, jeśli nie zostanie ustawiony. W poniższym przykładzie pokazano, jak utworzyć wystąpienie elementu SearchBar w języku XAML przy użyciu opcjonalnego Placeholder zestawu właściwości:

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

Element SearchBar można również utworzyć w kodzie:

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

Właściwości wyglądu paska wyszukiwania

Kontrolka SearchBar definiuje wiele właściwości, które dostosują wygląd kontrolki. W poniższym przykładzie pokazano, jak utworzyć wystąpienie elementu SearchBar w języku XAML z wieloma określonymi właściwościami:

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

Te właściwości można również określić podczas tworzenia SearchBar obiektu w kodzie:

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

Poniższy zrzut ekranu przedstawia wynikowy SearchBar formant:

Screenshot of customized SearchBar on iOS and Android

Uwaga

W systemie iOS SearchBarRenderer klasa zawiera metodę zastępowalną UpdateCancelButton . Ta metoda określa, kiedy pojawi się przycisk anulowania i może zostać zastąpiony w niestandardowym programie renderatora. Aby uzyskać więcej informacji na temat niestandardowych modułów renderujących, zobacz Xamarin.Forms Niestandardowe programy renderowane.

Wyszukiwanie za pomocą programów obsługi zdarzeń

Wyszukiwanie można wykonać za pomocą kontrolki SearchBar , dołączając program obsługi zdarzeń do jednego z następujących zdarzeń:

  • SearchButtonPressed jest wywoływana, gdy użytkownik kliknie przycisk wyszukiwania lub naciśnie klawisz Enter.
  • TextChanged jest wywoływana za każdym razem, gdy tekst w polu zapytania zostanie zmieniony.

Poniższy przykład przedstawia procedurę obsługi zdarzeń dołączoną do TextChanged zdarzenia w języku XAML i używa elementu do ListView wyświetlania wyników wyszukiwania:

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

Program obsługi zdarzeń można również dołączyć do utworzonego SearchBar w kodzie:

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

Procedura TextChanged obsługi zdarzeń w pliku za pomocą kodu jest taka sama, niezależnie od tego, czy SearchBar jest tworzona za pomocą kodu XAML, czy kodu:

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

W poprzednim przykładzie oznacza istnienie DataService klasy z metodą, która może zwracać elementy zgodne z GetSearchResults zapytaniem. SearchBar Wartość właściwości kontrolki Text jest przekazywana do GetSearchResults metody, a wynik jest używany do aktualizowania ListView właściwości kontrolkiItemsSource. Ogólny efekt polega na tym, że wyniki wyszukiwania są wyświetlane w kontrolce ListView .

Przykładowa aplikacja udostępnia implementację DataService klasy, która może służyć do testowania funkcji wyszukiwania.

Wyszukiwanie przy użyciu modelu viewmodel

Wyszukiwanie można wykonać bez procedur obsługi zdarzeń przez powiązanie SearchCommand właściwości i SearchCommandParameter z ICommand implementacjami. Przykładowy projekt demonstruje te implementacje przy użyciu wzorca Model-View-ViewModel (MVVM). Aby uzyskać więcej informacji na temat powiązań danych za pomocą maszyny MVVM, zobacz Powiązania danych z maszyną MVVM.

Model viewmodel w przykładowej aplikacji zawiera następujący kod:

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

Uwaga

Model viewmodel zakłada istnienie DataService klasy zdolnej do wykonywania wyszukiwań. Klasa DataService , w tym przykładowe dane, jest dostępna w przykładowej aplikacji.

Poniższy kod XAML pokazuje, jak powiązać element z SearchBar przykładowym modelem viewmodel z kontrolką ListView wyświetlającą wyniki wyszukiwania:

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

W tym przykładzie ustawiono BindingContext klasę jako wystąpienie SearchViewModel klasy . Wiąże właściwość z SearchCommandPerformSearchICommand właściwością w modelu viewmodel i wiąże SearchBarText właściwość z właściwością .SearchCommandParameter Właściwość ListView.ItemsSource jest powiązana z właściwością SearchResults modelu viewmodel.

Aby uzyskać więcej informacji na temat interfejsu ICommand i powiązań, zobaczXamarin.Formspowiązanie danych i interfejs ICommand.