Xamarin.Forms Searchbar

  • Makale
  • Okumak için 4 dakika

Örneği İndir Örneği indirme

Xamarin.FormsSearchBar , arama başlatan bir kullanıcı girişi denetimidir. Denetim SearchBar yer tutucu metni, sorgu girişini, arama yürütmeyi ve iptali destekler. Aşağıdaki ekran görüntüsünde, SearchBar sonuçların bir içinde görüntülendiğinden bir sorgu ListView gösterilir:

SearchBar iOS ve Android'de SearchBarekran

sınıfı SearchBar aşağıdaki özellikleri tanımlar:

Bu özellikler nesneler tarafından BindableProperty de desteklene, bu da özelleştirebileceğiniz ve veri SearchBar bağlamalarının hedefi olduğu anlamına gelir. üzerinde yazı tipi özelliklerini SearchBar belirtmek, diğer üzerinde metni özelleştirmeyle tutarlıdır. Xamarin.Forms Text controls Daha fazla bilgi için bkz. Fonts in Xamarin.Forms.

SearchBarXAML'de bir örneği olabilir. İsteğe Placeholder bağlı özelliği, sorgu giriş kutusunda ipucu metnini tanımlamak için ayarlanmış olabilir. için varsayılan değer Placeholder boş bir dizedir, bu nedenle ayarlanmayacaksa yer tutucu görünmez. Aşağıdaki örnekte, isteğe bağlı özellik kümesiyle SearchBar XAML'de bir örneği Placeholder nasıl örneklendirildirilmektedir:

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

Kodda SearchBar da bir oluşturulabilir:

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

SearchBar görünüm özellikleri

Denetim, SearchBar denetimin görünümünü özelleştiren birçok özelliği tanımlar. Aşağıdaki örnekte, belirtilen birden çok özellik ile SearchBar XAML'de bir örneği nasıl olduğu gösterir:

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

Kodda bir nesne oluşturulurken de bu SearchBar özellikler belirtilebilir:

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

Aşağıdaki ekran görüntüsünde sonuçta elde edilen denetim SearchBar yer alenidir:

ve Android'de özelleştirilmişSearchBar'ınekran görüntüsü iOS ve Arama Çubuğu

Not

iOS'ta SearchBarRenderer sınıfı geçersiz kılınabilir bir yöntem UpdateCancelButton içerir. Bu yöntem, iptal düğmesinin ne zaman görüntülendiğinde kontrol eder ve özel bir işleyicide geçersiz kılınabilir. Özel işleyiciler hakkında daha fazla bilgi için bkz. Xamarin.Forms Custom Renderers .

Olay işleyicileri ile arama gerçekleştirme

Bir arama, aşağıdaki olaylardan SearchBar biri için bir olay işleyicisi ekleyen denetimi kullanılarak yürütül olabilir:

  • SearchButtonPressed kullanıcı arama düğmesine tıkladığında veya Enter tuşuna basdığında çağrılır.
  • TextChanged , sorgu kutusunda metin her değiştiriken çağrılır.

Aşağıdaki örnekte, XAML'de olayına eklenmiş TextChanged bir olay işleyicisi gösterilir ve arama sonuçlarını görüntülemek için bir ListView kullanır:

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

Olay işleyicisi, kodda oluşturulan bir SearchBar işleyiciye de iliştirilmiş olabilir:

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

XAML veya kod aracılığıyla oluşturulsa da arka arkasındaki TextChangedSearchBar kod dosyasındaki olay işleyicisi aynıdır:

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

Önceki örnek, bir sorguyla eşan öğeleri DataService döndürebilecek bir GetSearchResults yönteme sahip bir sınıfın varlığını ifade eder. SearchBarDenetimin Text özellik değeri yöntemine GetSearchResults geçirildi ve sonuç denetimin özelliğini ListView güncelleştirmek için ItemsSource kullanılır. Genel etki, arama sonuçlarının denetimde ListView görüntülenebilir.

Örnek uygulama, arama DataService işlevselliğini test etmek için kullanılan bir sınıf uygulaması sağlar.

Viewmodel kullanarak arama gerçekleştirme

Ve özellikleri uygulamalara bağlanarak olay işleyicileri SearchCommandSearchCommandParameter olmadan bir arama ICommand yürütülebilirsiniz. Örnek proje, Model-View-ViewModel (MVVM) desenini kullanarak bu uygulamaları gösterir. MVVM ile veri bağlamaları hakkında daha fazla bilgi için bkz. MVVM ile Veri Bağlamaları.

Örnek uygulamanın viewmodel'i aşağıdaki kodu içerir:

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

Not

Viewmodel, arama gerçekleştirebilecek bir DataService sınıfın var olduğunu varsayıyor. Örnek DataService veriler de dahil olmak üzere sınıfı, örnek uygulamada kullanılabilir.

Aşağıdaki XAML, arama sonuçlarını görüntüleyen bir denetimle örnek SearchBar viewmodel'e bir ListView bağlamayı gösterir:

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

Bu örnek, BindingContext sınıf örneği olarak SearchViewModel ayarlar. viewmodel'de özelliğini ile bağlar ve SearchCommandPerformSearchICommand özelliğini SearchBarText özelliğine SearchCommandParameter bağlar. ListView.ItemsSourceözelliği, SearchResults viewmodel'in özelliğine bağlı.

Arabirim ve bağlamalar hakkında ICommand daha fazla bilgi için Xamarin.Forms data binding bkz. ve ICommand