Sdílet prostřednictvím

Xamarin.Forms Searchbar

  • Článek

Jedná se Xamarin.FormsSearchBar o ovládací prvek uživatelského vstupu, který se používá k zahájení hledání. Ovládací SearchBar prvek podporuje zástupný text, vstup dotazu, spuštění vyhledávání a zrušení. Následující snímek obrazovky ukazuje SearchBar dotaz s výsledky zobrazenými v ListView:

Snímek obrazovky vyhledávacího panelu v iOSu a Androidu

Třída SearchBar definuje následující vlastnosti:

  • CancelButtonColor je definice Color barvy tlačítka zrušit.
  • CharacterSpacing, typu double, je mezery mezi znaky SearchBar textu.
  • FontAttributes je hodnota výčtu FontAttributes , která určuje, zda SearchBar je písmo tučné, kurzíva nebo ani jedno.
  • FontFamily je typ string , který určuje rodinu písem, kterou SearchBarpoužívá .
  • FontSize může být hodnota výčtu NamedSizedouble nebo hodnota, která představuje konkrétní velikosti písem napříč platformami.
  • HorizontalTextAlignmentTextAlignment je hodnota výčtu, která definuje vodorovné zarovnání textu dotazu.
  • VerticalTextAlignmentTextAlignment je hodnota výčtu, která definuje svislé zarovnání textu dotazu.
  • Placeholder je text string , který definuje zástupný text, například "Hledat...".
  • PlaceholderColor je hodnota Color , která definuje barvu zástupného textu.
  • SearchCommand je akce ICommand uživatele, jako jsou klepnutí prstem nebo kliknutí, k příkazům definovaným v modelu viewmodel.
  • SearchCommandParameter je parametr object , který má být předán do objektu SearchCommand.
  • Textstring je obsahující text dotazu v tabulce SearchBar.
  • TextColor je definice Color barvy textu dotazu.
  • TextTransformTextTransform je hodnota, která určuje velikost písmen SearchBar textu.

Tyto vlastnosti jsou podporovány BindableProperty objekty, což znamená SearchBar , že lze přizpůsobit a být cílem datových vazeb. Určení vlastností písma na objektu SearchBar je konzistentní s přizpůsobením textu v jiných Xamarin.Forms ovládacích prvcích Text. Další informace naleznete v tématu Písma v Xamarin.Forms.

V SearchBar XAML je možné vytvořit instanci. Jeho volitelnou Placeholder vlastnost lze nastavit tak, aby definovala text nápovědy ve vstupním poli dotazu. Výchozí hodnota je Placeholder prázdný řetězec, takže pokud není nastavený, nezobrazí se žádný zástupný symbol. Následující příklad ukazuje, jak vytvořit instanci SearchBar v XAML s volitelnou Placeholder sadou vlastností:

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

V kódu lze také vytvořit A SearchBar :

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

Vlastnosti vzhledu vyhledávacího panelu

Ovládací SearchBar prvek definuje mnoho vlastností, které přizpůsobí vzhled ovládacího prvku. Následující příklad ukazuje, jak vytvořit instanci SearchBar v XAML s více zadanými vlastnostmi:

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

Tyto vlastnosti lze také zadat při vytváření objektu SearchBar v kódu:

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

Následující snímek obrazovky ukazuje výsledný SearchBar ovládací prvek:

Snímek obrazovky s přizpůsobeným vyhledávacím panelem v iOSu a Androidu

Poznámka:

V iOSu třída SearchBarRenderer obsahuje přepisovatelnou UpdateCancelButton metodu. Tato metoda řídí, když se zobrazí tlačítko zrušit, a lze je přepsat ve vlastním rendereru. Další informace o vlastních rendererech naleznete v tématu Xamarin.Forms Vlastní renderery.

Hledání pomocí obslužných rutin událostí

Hledání lze provést pomocí SearchBar ovládacího prvku připojením obslužné rutiny události k jedné z následujících událostí:

  • SearchButtonPressed je volána, když uživatel buď klikne na tlačítko hledat, nebo stiskne klávesu Enter.
  • TextChanged je volána při každé změně textu v poli dotazu.

Následující příklad ukazuje obslužnou rutinu události připojenou TextChanged k události v XAML a používá ListView k zobrazení výsledků hledání:

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

Obslužnou rutinu události lze také připojit k vytvořenému SearchBar v kódu:

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

Obslužná rutina TextChanged události v souboru kódu je stejná bez ohledu na SearchBar to, jestli je vytvořená prostřednictvím XAML nebo kódu:

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

Předchozí příklad naznačuje existenci DataService třídy s metodou schopnou GetSearchResults vrátit položky, které odpovídají dotazu. SearchBar Hodnota vlastnosti ovládacího prvku Text je předána GetSearchResults metodě a výsledek se používá k aktualizaci ListView vlastnosti ovládacího prvkuItemsSource. Celkovým účinkem je zobrazení výsledků hledání v ovládacím ListView prvku.

Ukázková aplikace poskytuje DataService implementaci třídy, kterou lze použít k testování funkčnosti vyhledávání.

Hledání pomocí modelu viewmodel

Vyhledávání lze provést bez obslužných rutin událostí vazbou SearchCommand vlastností a SearchCommandParameterICommand implementací. Ukázkový projekt demonstruje tyto implementace pomocí modelu Model-View-ViewModel (MVVM). Další informace o datových vazbách pomocí MVVM najdete v tématu Datové vazby s MVVM.

Model viewmodel v ukázkové aplikaci obsahuje následující kód:

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

Poznámka:

Model viewmodel předpokládá existenci DataService třídy schopné provádět vyhledávání. Třída DataService , včetně ukázkových dat, je k dispozici v ukázkové aplikaci.

Následující XAML ukazuje, jak vytvořit vazbu SearchBar na ukázkový model zobrazení s ovládacím ListView prvek zobrazující výsledky hledání:

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

Tento příklad nastaví BindingContext instanci SearchViewModel třídy. Vytvoří vazbu vlastnosti SearchCommand na PerformSearchICommand objektu viewmodel a vytvoří vazbu SearchBarText vlastnosti na SearchCommandParameter vlastnost. Vlastnost ListView.ItemsSource je vázána na SearchResults vlastnost modelu viewmodel.

Další informace o rozhraní a vazbách naleznete v ICommand částiXamarin.FormsDatové vazby a rozhraní ICommand.