Pasek wyszukiwania

Interfejs użytkownika aplikacji wieloplatformowej platformy .NET (.NET MAUI) SearchBar to kontrolka 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 systemu SearchBar iOS przedstawia zapytanie z wynikami wyświetlanymi w pliku ListView:

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

• CancelButtonColor jest elementem Color definiującym kolor przycisku anulowania.
• HorizontalTextAlignment jest wartością wyliczeniową TextAlignment , która definiuje wyrównanie w poziomie tekstu zapytania.
• 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
• VerticalTextAlignment jest wartością wyliczeniową TextAlignment , która definiuje wyrównanie w pionie tekstu zapytania.

Te właściwości są wspierane przez BindableProperty obiekty, co oznacza, że mogą być obiektami docelowymi powiązań danych i stylizowanymi.

Ponadto SearchBar definiuje SearchButtonPressed zdarzenie, które jest wywoływane po kliknięciu przycisku wyszukiwania lub naciśnięciu Enter.

SearchBar pochodzi z InputView klasy, z której dziedziczy następujące właściwości:

• CharacterSpacing, typu double, ustawia odstępy między znakami we wprowadzonym tekście.
• CursorPosition, typu int, definiuje położenie kursora w edytorze.
• FontAttributes, typu FontAttributes, określa styl tekstu.
• FontAutoScalingEnabled, typu bool, określa, czy tekst będzie odzwierciedlać preferencje skalowania ustawione w systemie operacyjnym. Wartość domyślna tej właściwości to true.
• FontFamily, typu string, definiuje rodzinę czcionek.
• FontSize, typu double, definiuje rozmiar czcionki.
• IsReadOnly, typu bool, określa, czy użytkownik nie powinien modyfikować tekstu. Wartość domyślna tej właściwości to false.
• IsSpellCheckEnabled, typu bool, określa, czy sprawdzanie pisowni jest włączone.
• IsTextPredictionEnabled, typu bool, określa, czy włączono przewidywanie tekstu i automatyczną korektę tekstu.
• Keyboard, typu Keyboard, określa miękką klawiaturę wejściową wyświetlaną podczas wprowadzania tekstu.
• MaxLength, typu int, definiuje maksymalną długość danych wejściowych.
• Placeholder, typu string, definiuje tekst wyświetlany, gdy kontrolka jest pusta.
• PlaceholderColor, typu Color, definiuje kolor tekstu zastępczego.
• SelectionLength, typu int, reprezentuje długość zaznaczonego tekstu w kontrolce.
• Text, typu string, definiuje tekst wprowadzony w kontrolce.
• TextColor, typu Color, definiuje kolor wprowadzonego tekstu.
• TextTransform, typu TextTransform, określa wielkość liter wprowadzonego tekstu.

Te właściwości są wspierane przez BindableProperty obiekty, co oznacza, że mogą być obiektami docelowymi powiązań danych i stylizowanymi.

Ponadto InputView definiuje TextChanged zdarzenie, które jest zgłaszane, gdy tekst w Entry zmianach. Obiekt TextChangedEventArgs , który towarzyszy TextChanged zdarzeniu, ma NewTextValue właściwości i OldTextValue , które określają odpowiednio nowy i stary tekst.

Tworzenie paska wyszukiwania

Aby utworzyć pasek wyszukiwania, utwórz SearchBar obiekt i ustaw jego Placeholder właściwość na tekst, który nakazuje użytkownikowi wprowadzenie terminu wyszukiwania.

W poniższym przykładzie XAML pokazano, jak utworzyć element SearchBar:

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

Równoważny kod języka C# to:

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

Uwaga

W systemie iOS klawiatura wprowadzania nietrwałego może obejmować pole wprowadzania tekstu, gdy pole znajduje się w dolnej części ekranu, co utrudnia wprowadzanie tekstu. Jednak w aplikacji .NET MAUI dla systemu iOS strony automatycznie przewijają się, gdy klawiatura nietrwała będzie obejmować pole wprowadzania tekstu, aby pole było powyżej klawiatury nietrwałej wprowadzania. Metodę KeyboardAutoManagerScroll.Disconnect w Microsoft.Maui.Platform przestrzeni nazw można wywołać, aby wyłączyć to domyślne zachowanie. Metodę KeyboardAutoManagerScroll.Connect można wywołać, aby ponownie włączyć zachowanie po jej wyłączeniu.

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, który jest wywoływany, gdy użytkownik kliknie przycisk wyszukiwania lub naciśnie Enter.
• TextChanged, który jest nazywany za każdym razem, gdy tekst w polu zapytania zostanie zmieniony. To zdarzenie jest dziedziczone z InputView klasy.

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

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

W tym przykładzie TextChanged zdarzenie jest ustawione na program obsługi zdarzeń o nazwie OnTextChanged. Ta procedura obsługi znajduje się w pliku za pomocą kodu:

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

W tym przykładzie DataService klasa z GetSearchResults metodą służy do zwracania elementów odpowiadających zapytaniu. 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 pliku ListView.

Wyszukiwanie przy użyciu modelu viewmodel

Wyszukiwanie można wykonać bez procedur obsługi zdarzeń przez powiązanie SearchCommand właściwości z implementacją ICommand . Aby uzyskać więcej informacji na temat poleceń, zobacz Commanding (Polecenie).

W poniższym przykładzie przedstawiono klasę viewmodel zawierającą ICommand właściwość o nazwie PerformSearch:

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

Poniższy przykład XAML używa SearchViewModel klasy :

<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 BindingContext parametr jest ustawiony na wystąpienie SearchViewModel klasy . Właściwość SearchBar.SearchCommand wiąże się z PerformSearch właściwością viewmodel, a SearchCommandParameter właściwość wiąże się z właściwością SearchBar.Text . ListView.ItemsSource Podobnie właściwość jest powiązana z właściwością SearchResults modelu viewmodel.

Ukryj i pokaż miękką klawiaturę wejściową

Klasa SoftInputExtensions w Microsoft.Maui przestrzeni nazw udostępnia szereg metod rozszerzeń, które obsługują interakcję z klawiaturą nietrwałą wprowadzania w kontrolkach obsługujących wprowadzanie tekstu. Klasa definiuje następujące metody:

• IsSoftInputShowing, który sprawdza, czy urządzenie jest obecnie wyświetlane miękkie klawiatury wejściowej.
• HideSoftInputAsync, który podejmie próbę ukrycia miękkiej klawiatury wejściowej, jeśli jest ona obecnie wyświetlana.
• ShowSoftInputAsync, który podejmie próbę wyświetlenia klawiatury nietrwałej wprowadzania, jeśli jest ona obecnie ukryta.

W poniższym przykładzie pokazano, jak ukryć klawiaturę wprowadzania nietrwałego SearchBar na nazwie searchBar, jeśli jest ona obecnie wyświetlana:

if (searchBar.IsSoftInputShowing())
   await searchBar.HideSoftInputAsync(System.Threading.CancellationToken.None);