Xamarin.Forms Searchbar

  • Článek
  • 4 min ke čtení

Stáhnout ukázku Stažení ukázky

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

a AndroiduSnímek obrazovky SearchBarv iOSu a

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

Tyto vlastnosti jsou zálohovány objekty, což znamená, že lze přizpůsobit a BindablePropertySearchBar být cílem datových vazeb. Zadání vlastností písma v objektu SearchBar je konzistentní s přizpůsobením textu v jiných Xamarin.Forms Text controls objektech . Další informace naleznete v tématu Fonts in Xamarin.Forms.

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

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

Objekt SearchBar lze také vytvořit v kódu:

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

Vlastnosti vzhledu SearchBar

Ovládací SearchBar prvek definuje mnoho vlastností, které přizpůsobují vzhled ovládacího prvku. Následující příklad ukazuje, jak vytvořit instanci v SearchBar jazyce 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 zadat také při vytváření SearchBar objektu 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
};

Výsledný ovládací prvek je znázorněný na následujícím SearchBar snímku obrazovky:

obrazovky s přizpůsobenou vyhledávacím panelem v iOSu a Androidu Přizpůsobený panel a Androidu

Poznámka

V iOSu SearchBarRenderer obsahuje třída přepisitelnou UpdateCancelButton metodu. Tato metoda řídí, kdy se zobrazí tlačítko zrušit, a je možné ho přepsat ve vlastním rendereru. Další informace o vlastních rendererech najdete v tématu Xamarin.Forms Custom Renderers .

Vyhledávání pomocí obslužných rutin událostí

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

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

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

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

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

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

Obslužná rutina události v souboru kódu je stejná bez ohledu na to, jestli je TextChanged vytvořen pomocí XAML nebo SearchBar 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 třídy s metodou, která může vracet DataServiceGetSearchResults položky, které odpovídají dotazu. Hodnota SearchBar vlastnosti ovládacího prvku se předá metodě a výsledek se použije k aktualizaci TextGetSearchResults vlastnosti ListViewItemsSource ovládacího prvku. Celkovým efektem je, že se výsledky hledání zobrazují v ovládacím ListView prvku.

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

Hledání pomocí modelu viewmodel

Vyhledávání lze spustit bez obslužných rutin událostí vytvořením vazby vlastností a SearchCommandSearchCommandParameter k ICommand implementacím. Ukázkový projekt demonstruje tyto implementace pomocí modelu Model-View-ViewModel (MVVM). Další informace o datových vazbách s 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 třídy DataService 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í kód XAML ukazuje, jak vytvořit vazbu k příkladu modelu viewmodel s ovládacím prvku SearchBarListView 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 BindingContext nastaví jako instanci SearchViewModel třídy . Sváže SearchCommand vlastnost s PerformSearchICommand objektem v modelu viewmodel a sváže SearchBarText vlastnost s SearchCommandParameter vlastností . Vlastnost ListView.ItemsSource je svázaná SearchResults s vlastností modelu viewmodel.

Další informace o rozhraní a ICommand vazbách najdete v tématu a Xamarin.Forms data binding rozhraní ICommand.