Wyszukiwanie powłoki .NET MAUI

Przeglądanie przykładu

Powłoka interfejsu użytkownika aplikacji wieloplatformowej platformy .NET (.NET MAUI) obejmuje zintegrowane funkcje wyszukiwania udostępniane przez klasę SearchHandler . Możliwość wyszukiwania można dodać do strony, ustawiając Shell.SearchHandler dołączoną właściwość do obiektu podklasowanego SearchHandler . Spowoduje to dodanie pola wyszukiwania w górnej części strony:

Po wprowadzeniu zapytania w polu Query wyszukiwania właściwość jest aktualizowana i przy każdej aktualizacji jest wykonywana OnQueryChanged metoda. Tę metodę można zastąpić, aby wypełnić obszar sugestii wyszukiwania danymi:

Następnie po wybraniu wyniku z obszaru sugestii wyszukiwania metoda jest wykonywana OnItemSelected . Tę metodę można przesłonić, aby odpowiednio reagować, na przykład przechodząc do strony szczegółów.

Tworzenie programu SearchHandler

Funkcje wyszukiwania można dodać do aplikacji Shell, klasy SearchHandler podrzędnej i zastąpić OnQueryChanged metody i OnItemSelected :

public class AnimalSearchHandler : SearchHandler
{
    public IList<Animal> Animals { get; set; }
    public Type SelectedItemNavigationTarget { get; set; }

    protected override void OnQueryChanged(string oldValue, string newValue)
    {
        base.OnQueryChanged(oldValue, newValue);

        if (string.IsNullOrWhiteSpace(newValue))
        {
            ItemsSource = null;
        }
        else
        {
            ItemsSource = Animals
                .Where(animal => animal.Name.ToLower().Contains(newValue.ToLower()))
                .ToList<Animal>();
        }
    }

    protected override async void OnItemSelected(object item)
    {
        base.OnItemSelected(item);

        // Let the animation complete
        await Task.Delay(1000);

        ShellNavigationState state = (App.Current.MainPage as Shell).CurrentState;
        // The following route works because route names are unique in this app.
        await Shell.Current.GoToAsync($"{GetNavigationTarget()}?name={((Animal)item).Name}");
    }

    string GetNavigationTarget()
    {
        return (Shell.Current as AppShell).Routes.FirstOrDefault(route => route.Value.Equals(SelectedItemNavigationTarget)).Key;
    }
}

Przesłonięcia OnQueryChanged mają dwa argumenty: oldValue, który zawiera poprzednie zapytanie wyszukiwania i newValue, który zawiera bieżące zapytanie wyszukiwania. Obszar sugestii wyszukiwania można zaktualizować, ustawiając SearchHandler.ItemsSource właściwość na kolekcję zawierającą IEnumerable elementy zgodne z bieżącym zapytaniem wyszukiwania.

Po wybraniu wyniku wyszukiwania przez użytkownika OnItemSelected zastąpienie jest wykonywane, a właściwość jest ustawiona SelectedItem . W tym przykładzie metoda przechodzi do innej strony, która wyświetla dane dotyczące wybranego Animalelementu . Aby uzyskać więcej informacji na temat nawigacji, zobacz Nawigacja w powłoce.

Uwaga

Można ustawić dodatkowe SearchHandler właściwości w celu kontrolowania wyglądu pola wyszukiwania.

Korzystanie z programu SearchHandler

Podklasy SearchHandler mogą być używane przez ustawienie dołączonej Shell.SearchHandler właściwości do obiektu typu podklasy na stronie zużywania:

<ContentPage ...
             xmlns:controls="clr-namespace:Xaminals.Controls">
    <Shell.SearchHandler>
        <controls:AnimalSearchHandler Placeholder="Enter search term"
                                      ShowsResults="true"
                                      DisplayMemberName="Name" />
    </Shell.SearchHandler>
    ...
</ContentPage>

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

Shell.SetSearchHandler(this, new AnimalSearchHandler
{
    Placeholder = "Enter search term",
    ShowsResults = true,
    DisplayMemberName = "Name"
});

Metoda AnimalSearchHandler.OnQueryChanged zwraca ListAnimal obiekt . Właściwość DisplayMemberName jest ustawiona Name na właściwość każdego Animal obiektu, a więc dane wyświetlane w obszarze sugestii będą każdą nazwą zwierzęcia.

Właściwość jest ustawiona ShowsResults na truewartość , dzięki czemu sugestie wyszukiwania są wyświetlane, gdy użytkownik wprowadza zapytanie wyszukiwania:

W miarę zmiany zapytania wyszukiwania obszar sugestii wyszukiwania jest aktualizowany:

Po wybraniu MonkeyDetailPage wyniku wyszukiwania zostanie wyświetlona strona szczegółów na temat wybranej małpy:

Definiowanie wyglądu elementu wyników wyszukiwania

Oprócz wyświetlania string danych w wynikach wyszukiwania wygląd każdego elementu wyników wyszukiwania można zdefiniować, ustawiając SearchHandler.ItemTemplate właściwość na wartość DataTemplate:

<ContentPage ...
             xmlns:controls="clr-namespace:Xaminals.Controls">    
    <Shell.SearchHandler>
        <controls:AnimalSearchHandler Placeholder="Enter search term"
                                      ShowsResults="true">
            <controls:AnimalSearchHandler.ItemTemplate>
                <DataTemplate>
                    <Grid Padding="10"
                          ColumnDefinitions="0.15*,0.85*">
                        <Image Source="{Binding ImageUrl}"
                               HeightRequest="40"
                               WidthRequest="40" />
                        <Label Grid.Column="1"
                               Text="{Binding Name}"
                               FontAttributes="Bold"
                               VerticalOptions="Center" />
                    </Grid>
                </DataTemplate>
            </controls:AnimalSearchHandler.ItemTemplate>
       </controls:AnimalSearchHandler>
    </Shell.SearchHandler>
    ...
</ContentPage>

Elementy określone w elemencie DataTemplate definiują wygląd każdego elementu w obszarze sugestii. W tym przykładzie DataTemplate układ w obiekcie jest zarządzany przez element Grid. Obiekt Grid zawiera Image obiekt i Label obiekt, który jest powiązany z właściwościami każdego Monkey obiektu.

Poniższy zrzut ekranu przedstawia wynik tworzenia szablonów każdego elementu w obszarze sugestii:

Aby uzyskać więcej informacji na temat szablonów danych, zobacz Szablony danych.

Widoczność pola wyszukiwania

Domyślnie po dodaniu elementu SearchHandler w górnej części strony pole wyszukiwania jest widoczne i w pełni rozwinięte. To zachowanie można jednak zmienić, ustawiając SearchHandler.SearchBoxVisibility właściwość na jeden z SearchBoxVisibility elementów członkowskich wyliczenia:

• Hidden — pole wyszukiwania nie jest widoczne ani dostępne.
• Collapsible — pole wyszukiwania jest ukryte, dopóki użytkownik nie wykona akcji, aby go ujawnić. W systemie iOS pole wyszukiwania jest ujawniane przez pionowe odbijanie zawartości strony, a w systemie Android pole wyszukiwania jest ujawniane przez naciśnięcie ikony znaku zapytania.
• Expanded — pole wyszukiwania jest widoczne i w pełni rozwinięte. Jest to wartość domyślna SearchBoxVisibility właściwości.

Ważne

W systemie iOS pole wyszukiwania zwijanego wymaga systemu iOS 11 lub nowszego.

W poniższym przykładzie pokazano, jak ukryć pole wyszukiwania:

<ContentPage ...
             xmlns:controls="clr-namespace:Xaminals.Controls">
    <Shell.SearchHandler>
        <controls:AnimalSearchHandler SearchBoxVisibility="Hidden"
                                      ... />
    </Shell.SearchHandler>
    ...
</ContentPage>

Fokus pola wyszukiwania

Naciśnięcie w polu wyszukiwania wywołuje klawiaturę ekranową, a pole wyszukiwania zyskuje fokus danych wejściowych. Można to również osiągnąć programowo, wywołując metodę Focus , która próbuje ustawić fokus danych wejściowych na polu wyszukiwania i zwraca true wartość w przypadku powodzenia. Gdy pole wyszukiwania zyskuje fokus, Focused zdarzenie jest wyzwalane, a wywoływana jest metoda zastępowalna OnFocused .

Gdy pole wyszukiwania ma fokus wejściowy, naciśnięcie innego miejsca na ekranie odrzuca klawiaturę ekranową, a pole wyszukiwania traci fokus wejściowy. Można to również osiągnąć programowo, wywołując metodę Unfocus . Gdy pole wyszukiwania utraci fokus, Unfocused zdarzenie zostanie wyzwolone, a wywołana jest metoda zastępowalna OnUnfocus .

Stan fokusu pola wyszukiwania można pobrać za pośrednictwem IsFocused właściwości, która zwraca true , jeśli SearchHandler aktualnie ma fokus wejściowy.

Klawiatura programu SearchHandler

Klawiatura, która jest wyświetlana, gdy użytkownicy wchodzą w interakcję z elementem SearchHandler , można ustawić programowo za pomocą Keyboard właściwości na jedną z następujących właściwości z Keyboard klasy:

• Chat — używany do tworzenia tekstu i miejsc, w których emoji są przydatne.
• Default — klawiatura domyślna.
• Email — używane podczas wprowadzania adresów e-mail.
• Numeric — używane podczas wprowadzania liczb.
• Plain — używany podczas wprowadzania tekstu bez żadnego określonego KeyboardFlags .
• Telephone – używane podczas wprowadzania numerów telefonów.
• Text — używany podczas wprowadzania tekstu.
• Url — służy do wprowadzania ścieżek plików i adresów internetowych.

Można to zrobić w języku XAML w następujący sposób:

<SearchHandler Keyboard="Email" />

Klasa Keyboard ma również metodę Create fabryki, która może służyć do dostosowywania klawiatury przez określenie wielkich liter, sprawdzania pisowni i zachowania sugestii. KeyboardFlags Wartości wyliczenia są określane jako argumenty metody, przy czym zwracana jest niestandardowa Keyboard wartość . Wyliczenie KeyboardFlags zawiera następujące wartości:

• None — do klawiatury nie są dodawane żadne funkcje.
• CapitalizeSentence – wskazuje, że pierwsza litera pierwszego wyrazu każdego wprowadzonego zdania zostanie automatycznie wpisana literą.
• Spellcheck — wskazuje, że sprawdzanie pisowni będzie wykonywane na wprowadzonym tekście.
• Suggestions — wskazuje, że uzupełnianie wyrazów będzie oferowane dla wprowadzonego tekstu.
• CapitalizeWord — wskazuje, że pierwsza litera każdego wyrazu będzie automatycznie wielkich liter.
• CapitalizeCharacter — wskazuje, że każdy znak będzie automatycznie wielkich liter.
• CapitalizeNone — wskazuje, że nie nastąpi automatyczna kapitalizowanie.
• All — wskazuje, że w wprowadzonym tekście wystąpi sprawdzanie pisowni, uzupełnianie wyrazów i wielkie litery zdań.

Poniższy przykład kodu XAML pokazuje, jak dostosować wartość domyślną Keyboard , aby oferować uzupełnianie wyrazów i wielką literę każdego wprowadzonego znaku:

<SearchHandler Placeholder="Enter search terms">
    <SearchHandler.Keyboard>
        <Keyboard x:FactoryMethod="Create">
            <x:Arguments>
                <KeyboardFlags>Suggestions,CapitalizeCharacter</KeyboardFlags>
            </x:Arguments>
        </Keyboard>
    </SearchHandler.Keyboard>
</SearchHandler>