Pasek wyszukiwania

The .NET Multi-platform App UI (.NET MAUI) SearchBar is a user input control used to initiating a search. Kontrolka SearchBar obsługuje tekst zastępczy, wprowadzanie zapytań, wykonywanie wyszukiwania i anulowanie. The following iOS screenshot shows a SearchBar query with results displayed in a ListView:

SearchBar defines the following properties:

• CancelButtonColor is a Color that defines the color of the cancel button.
• HorizontalTextAlignment is a TextAlignment enum value that defines the horizontal alignment of the query text.
• SearchCommand is an ICommand that allows binding user actions, such as finger taps or clicks, to commands defined on a viewmodel.
• SearchCommandParameter is an object that specifies the parameter that should be passed to the SearchCommand.
• VerticalTextAlignment is a TextAlignment enum value that defines the vertical alignment of the query text.

These properties are backed by BindableProperty objects, which means that they can be targets of data bindings, and styled.

In addition, SearchBar defines a SearchButtonPressed event, which is raised when the search button is clicked, or the enter key is pressed.

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

• CharacterSpacing, of type double, sets the spacing between characters in the entered text.
• CursorPosition, of type int, defines the position of the cursor within the editor.
• FontAttributes, of type FontAttributes, determines text style.
• FontAutoScalingEnabled, of type bool, defines whether the text will reflect scaling preferences set in the operating system. Wartość domyślna tej właściwości to true.
• FontFamily, of type string, defines the font family.
• FontSize, of type double, defines the font size.
• IsReadOnly, of type bool, defines whether the user should be prevented from modifying text. Wartość domyślna tej właściwości to false.
• IsSpellCheckEnabled, typu bool, kontroluje, czy sprawdzanie pisowni jest włączone.
• IsTextPredictionEnabled, typu bool, kontroluje, czy włączono przewidywanie tekstu i automatyczną korektę tekstu.
• Keyboard, typu Keyboard, określa wirtualną klawiaturę wyświetlaną podczas wprowadzania tekstu.
• MaxLength, of type int, defines the maximum input length.
• Placeholder, of type string, defines the text that's displayed when the control is empty.
• PlaceholderColor, typu Color, definiuje kolor tekstu zastępczego.
• SelectionLength, of type int, represents the length of selected text within the control.
• Text, typu string, definiuje wprowadzony tekst w kontrolce.
• TextColor, typu Color, definiuje kolor wprowadzonego tekstu.
• TextTransform, of type TextTransform, specifies the casing of the entered text.

These properties are backed by BindableProperty objects, which means that they can be targets of data bindings, and styled.

In addition, InputView defines a TextChanged event, which is raised when the text in the Entry changes. The TextChangedEventArgs object that accompanies the TextChanged event has NewTextValue and OldTextValue properties, which specify the new and old text, respectively.

Tworzenie paska wyszukiwania

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

The following XAML example shows how to create a 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 ekranowa może zasłaniać pole wprowadzania tekstu, gdy pole znajduje się w dolnej części ekranu, co utrudnia wprowadzanie tekstu. However, in a .NET MAUI iOS app, pages automatically scroll when the soft input keyboard would cover a text entry field, so that the field is above the soft input keyboard. Metodę KeyboardAutoManagerScroll.Disconnect w przestrzeni nazw Microsoft.Maui.Platform można wywołać, aby wyłączyć to domyślne zachowanie. Metodę KeyboardAutoManagerScroll.Connect można wywołać, aby ponownie włączyć funkcję po jej wyłączeniu.

Wykonaj wyszukiwanie za pomocą programów obsługi zdarzeń

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

• SearchButtonPressed, which is called when the user either clicks the search button or presses the enter key.
• TextChanged, który jest wywoływany za każdym razem, gdy tekst w polu zapytania zostanie zmieniony. To zdarzenie jest dziedziczone z klasy InputView.

Poniższy przykład XAML pokazuje program obsługi zdarzeń dołączony do zdarzenia TextChanged i używa ListView do wyświetlania wyników wyszukiwania:

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

In this example, the TextChanged event is set to an event handler named OnTextChanged. This handler is located in the code-behind file:

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

W tym przykładzie klasa DataService z metodą GetSearchResults służy do zwracania elementów odpowiadających zapytaniu. The SearchBar control's Text property value is passed to the GetSearchResults method and the result is used to update the ListView control's ItemsSource property. The overall effect is that search results are displayed in the ListView.

Perform a search using a viewmodel

Wyszukiwanie można wykonać bez procedur obsługi zdarzeń przez powiązanie SearchCommand właściwości z ICommand implementacją. For more information about commanding, see Commanding.

The following example shows a viewmodel class that contains an ICommand property named 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 widoku zakłada istnienie klasy DataService, która jest zdolna do wykonywania wyszukiwań.

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

<ContentPage ...
             xmlns:viewmodels="clr-namespace:SearchBarDemos.ViewModels"
             x:DataType="viewmodels:SearchViewModel">
    <ContentPage.BindingContext>
        <viewmodels:SearchViewModel />
    </ContentPage.BindingContext>
    <StackLayout>
        <SearchBar x:Name="searchBar"
                   SearchCommand="{Binding PerformSearch}"
                   SearchCommandParameter="{Binding Text, x:DataType='SearchBar', Source={x:Reference searchBar}}"/>
        <ListView x:Name="searchResults"
                  ItemsSource="{Binding SearchResults}" />
    </StackLayout>
</ContentPage>

In this example, the BindingContext is set to an instance of the SearchViewModel class. Właściwość wiąże się z właściwością viewmodel , a właściwość wiąże się z właściwością . Podobnie, właściwość jest powiązana z właściwością modelu widoku.

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 miękką klawiaturą wejściową w kontrolkach obsługujących wprowadzanie tekstu. Klasa definiuje następujące metody:

• IsSoftInputShowing, which checks to see if the device is currently showing the soft input keyboard.
• HideSoftInputAsync, which will attempt to hide the soft input keyboard if it's currently showing.
• ShowSoftInputAsync, which will attempt to show the soft input keyboard if it's currently hidden.

The following example shows how to hide the soft input keyboard on a SearchBar named searchBar, if it's currently showing:

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